使い方
- ベースカラーを入力するか、色を選びます。「ランダムなベースカラーを生成」を選ぶと、色が自動で選ばれます。
- 色の調和を選びます。「色の濃淡」では、明るい色から暗い色までの11段階スケールを作成できます。
- 残したい色をロックしてから、ほかのベースカラーを試します。
- HEX、CSSカスタムプロパティ、JSONから形式を選び、名前を指定してコードをコピーします。
仕組み
色相環上で色相を回転させて、色の調和を作ります。補色は反対側の色相（180°）、類似色は左右それぞれ30°と60°隣の色相、トライアドは120°間隔の3色、テトラードは90°間隔の4色、スプリットコンプリメンタリーは補色の両隣（150°と210°）を使います。
回転にはHSLではなくOKLCHを使います。OKLCHは知覚上の明るさを保つため、同じパレットの黄色と青が同じくらいの明るさに見え、黄色だけがまぶしくなるのを防ぎます。回転後の色がsRGB対応画面で表示できる範囲を超える場合は、明るさと色相を保ちながら、範囲内に収まるまで彩度を下げます。
色の濃淡スケールは、Tailwind CSSと同様に50から950までの名前を付けた、固定刻みのOKLCH明度を使います。白や黒に近い色では彩度を下げ、最も明るい色が蛍光色のように見えないようにしています。色の調和はあくまで出発点です。コンテンツに使う前に、コントラストチェッカーで文字色と背景色の組み合わせを確認してください。
使用例
ブランドカラーにアクセントを加える
ベースカラーを#3366ccにして「補色」を選ぶと、同じOKLCH明度の温かみのある黄土色、#8c6500が加わります。青系のブランドカラーに添えるアクセントとして、青とオレンジがかった黄色の組み合わせはよく使われます。
コンポーネントライブラリ用のデザイントークン
「色の濃淡」を選び、名前に「primary」を指定してCSS変数としてエクスポートします。背景色（50～100）、境界線（200～300）、文字色（700～900）に使える--primary-50から--primary-950までの変数が生成されます。
1色を保ちながらほかの色を試す
トライアドパレットの2色目をロックしてから、ベースカラーを変えてみましょう。ロックした色のHEX値はそのままに、ほかの色だけが変わります。
よくある質問
HSLのカラーホイールツールと色が異なるのはなぜですか？
このツールは、知覚的な色空間であるOKLCHで色相を回転させます。色相角はHSLと完全には一致しないため、ある色の「反対色」はHSLツールで表示される色と少し異なる場合があります。
JSONをTailwind CSSで使えますか？
JSONは名前とHEX値の対応を記述したもので、Tailwindのテーマ設定で色を指定する形式と同じです。Tailwind 4では、名前を--color-…に変更してから、CSS変数を@themeブロックに貼り付けることもできます。
生成したパレットはアクセシビリティに配慮されていますか？
自動的には対応していません。色の調和だけでは、文字色と背景色のコントラストはわかりません。使う予定の組み合わせをコントラストチェッカーで確認してください。
プライバシー
パレットはブラウザー上で生成されます。色が外部に送信されたり、保存されたりすることはありません。