:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}カラー パレット ジェネレーターは、1 つの基本色を、色とホイールの調和のルールを使用して、調整された色のセットに変えます。 開始色を選択し、モードを選択します — 色合いと色合い、単色、補完、類似、トライアド、または四角形 — ツールは、各スウォッチの 16 進数、RGB、および HSL 値を含むバランスの取れたパレットを計算します。
適切な色の組み合わせは、HSL カラー ホイールで予測可能な関係に従います。補色は互いに反対に座り、類似の色は互いに隣り合い、トライアド カラーは等間隔に配置されます。 手作業でこれらを処理するということは、色相の角度と明るさの値を調整することを意味します。 このツールは、すぐに計算を行い、結果を表示するので、機能するスキームを選択できます。
すべてがブラウザで実行されます。 基本色を調整し、モードを切り替え、任意のスウォッチをクリックして値をコピーするか、パレット全体を CSS カスタム プロパティとしてエクスポートします。 アカウントもアップロードもありません。ページが読み込まれた後もオフラインで動作します。
カラー ピッカーを使用するか、16 進値を入力して、パレットが構築される色を設定します。
色合いと色合いを切り替え、単色、補完的、類似、三国間、四角形を切り替えて、さまざまな調整されたスキームを確認します。
各スウォッチには、その 16 進数、RGB、および HSL 値が表示されます。 スウォッチをクリックしてコピーするか、パレット全体を CSS カスタム プロパティとしてコピーします。
生成した色を背景、アクセント、テキストに使用して、デザインまたはスタイルシートで調和を一貫して UI 全体に保ちます。
色合いと色合い、単色、補完、類似、三位一体、四角形のスキームは、すべての一般的な色の関係をカバーしています
すべてのスウォッチには 3 つのフォーマットがすべて表示されるため、適切な値を CSS、デザイン ツール、またはコードに直接投入できます。
パレット全体を :root カスタム プロパティとしてエクスポートし、スタイルシートにデザイン トークン スケールとして貼り付けることができます
ハーモニーは HSL で計算されるので、色相は等間隔に保たれ、軽さのステップはバランスが取れているように見えますが、濁りはありません。
Pick colors and convert between HEX, RGB, and HSL formats
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Create beautiful CSS gradients with live preview
0 comments
No comments yet. Be the first to share your thoughts!