カラーパレットジェネレーター

ベースカラーから、補色、類似色、トライアド、テトラード、スクエア、モノクロマティックの配色ルールでカラーパレットを生成します。ロックしてCSSやTailwindにエクスポートできます。

パレット設定

ベースカラー

配色ルール

ベースの色相＋反対側の色相（180°）。

色相を回転する色空間

気に入った色はロックしましょう。「再生成」は新しいベースカラーをランダムに選び、ロックした色は維持します。

エクスポート

形式

トークン名

パレット

#3b82f6

oklch(62.3% 0.188 259.8)

#b07d00

oklch(62.5% 0.129 79.9)

エクスポートコード

:root {
  --palette-1: #3b82f6;
  --palette-2: #b07d00;
}

カラーパレットジェネレーターとは？

1つのベースカラーから、古典的なカラーホイールの配色ルールでパレットを作ります。色相の回転は、知覚的なOKLCH（知覚上の明度を揃える）でも、従来のHSLでも行えます。再生成の前に色をロックでき、パレットはCSS変数、SCSS、Tailwind v3の設定、Tailwind v4の@theme、JSONとしてエクスポートできます。

カラーパレットジェネレーターの使い方

ベースカラー（hex、rgb()、hsl()、oklch()）を入力するか、再生成をクリックしてランダムな色にします。
配色ルールと、色相をOKLCHとHSLのどちらで回転するかを選びます。
残したい色をロックします。再生成では、ロックされていない色だけが置き換わります。
スウォッチをクリックして、そのhex値をコピーします。
エクスポートの形式とトークン名を選び、コードをコピーします。

例

入力

Base #ff0000, Triadic, HSL

出力

:root {
  --palette-1: #ff0000;
  --palette-2: #00ff00;
  --palette-3: #0000ff;
}

カラーパレットジェネレーターを使うべき場面

ブランド、UIテーマ、イラストの配色を探るときに使います。配色ルールは出発点であり、アクセシビリティのチェックではありません。文字と背景のコントラストは別途確認してください。1つの色を50〜950のスケールに展開するには、Color Shades Generatorを使います。

カラーパレットジェネレーターの仕組み

配色ルールは、彩度/クロマと明度を保ったまま、ベースの色相を固定の角度で回転させます。補色は0°/180°、類似色は0°/±30°/±60°、トライアドは0°/120°/240°、スプリットコンプリメンタリーは0°/150°/210°、テトラードは0°/60°/180°/240°、スクエアは0°/90°/180°/270°です。モノクロマティックは色相を保ち、明度を−30、−15、0、+15、+30（HSLの%）または±0.15/±0.3（OKLCHのL）だけ変えます。sRGBの範囲外のOKLCHの色は、クロマを下げてガマットマッピングされます。再生成は、色相0〜360°、彩度55〜85%、明度45〜60%のランダムなベースを選びます。