パレットを生成する

ベースカラーを使用し、色相、彩度、明度がパレット内でどのように変化するかを調整します。ジェネレーターは値を安全に制限し、色相は360度でループさせ、エクスポート値はRGBは整数、HSLは小数点第1位に丸めます。

ベースカラー

#C96C3D や #f80 のような3桁または6桁の16進数カラーコードを入力してください。

ハーモニースキーマスキーマによって色相の間隔が変わり、スライダーでセット内のバリエーションを調整できます。

パレットのサイズ調和の正確さを保つため、指定した色数によっては基本パターンが繰り返される場合があります。

バリエーションの広がり

48%

広がりを低くするとベーストーンに近くなります。高くすると、明るいアクセントと暗いアクセントの差が大きくなります。

パレットの準備ができました。

結果

プレビュー領域には、パレットが左から右へのシーケンスとして表示されます。各スウォッチには、その色に対するテキストのコントラスト推奨事項が含まれています。

出力形式を選択して、CSSカスタムプロパティとJSONを切り替えることができます。ブラウザのクリップボードAPIが利用できない場合のみ、コピーが無効になります。

HEX RGB HSL CSS JSON

出力形式

このジェネレーターは、ベースカラー（16進数）をHSLに変換し、選択したハーモニー規則に基づいて色相間隔を適用し、スプレッド値に従って彩度と明度を調整します。

入力された16進数は、トリミング、正規化、必要に応じて拡張されます。無効な入力があってもページは壊れず、修正されるまで最後に有効だったパレットが表示され続けます。

色相値は色相環を一周するように計算されます。彩度と明度は、無効なカラー出力を防ぐために0から100の間に制限されます。

エクスポートには命名、丸められた数値、安定した順序が含まれるため、デザインシステム、プロトタイプ、スタイルシートにそのまま利用できます。

色は、ディスプレイ、ブラウザ、OSによって異なって見える場合があります。このツールをパレット作成の迅速な出発点として活用し、最終的な選択はターゲット環境やアクセシビリティのワークフローで確認してください。