配色パレット生成

Palette Generator

基準の色から補色・三色配色・類似色の規則で調和のとれたパレットを組み立てます。

色をひとつ受け取り、配色の規則どおりに色相だけを回して、OKLCHの明度と彩度はそのまま保ちます。だから三色配色を作ったときに、ひとつだけ目に見えて暗い色が混じることがありません。同じ規則をHSLでも下に描きます。なぜそれが大事なのかを見るいちばん速い方法です。書き出す前に、色覚特性のもとで2つの色見本が互いに溶け合ってしまわないか、そしてそれぞれの上に文字を載せられるかを確かめます。

🔒 ブラウザの中だけで動きますpalettecolorharmonygenerator

基準の色

色

CSS の表記ならどれでも構いません。配色はこの色の OKLCH の明度と彩度を保ったまま、色相だけを回します。

配色規則

規則

広がり: 1.00倍規則が決めた色相の角度に掛ける倍率です。1 が教科書どおりの間隔です。

左右 30° ずつの隣です。ひとつの色の仲間として読めるので、色相だけでは階層がつきません。明度差を別に与えてください。

OKLCH

#0094c3

L 62.3 C 0.188 H 230

#3b82f6

L 62.3 C 0.188 H 260

#886cee

L 62.3 C 0.188 H 290

同じ規則を HSL で描いたもの（比較用）

#3be0f6

L 83.3 C 0.132 H 209

#3b82f6

L 62.3 C 0.188 H 260

#523bf6

L 51.4 C 0.260 H 278

どちらの帯も同じ角度で色相を回しています。OKLCH の行は体感の明度を一定に保つので、広がりは 0.0000 です。いっぽう HSL の行の広がりは 0.3191 です。HSL の「明度」が知覚と結びついていないからです。純粋な黄も純粋な青もどちらも 50% を名乗りますが、L* では 65 以上も離れています。これは描画の副作用ではなく、誰も頼んでいない明度の傾きがすべての HSL 配色に焼き付いている、ということです。

HSL との比較を表示

明度の広がり

0.0000

sRGB の外

3個中 1個

1個の色が基準の彩度を sRGB 内に収めきれず、0.064 だけ諦めました。16 進数は収め直したあとの値で、書き出しの oklch() の値が広色域ディスプレイで実際に見える色です。

実際に耐えられますか？

色覚特性ごとにいちばん近づく 2 色、ΔE OKLab で

1 型色覚0.026— この 2 色は同じに見えます
2 型色覚0.021— この 2 色は同じに見えます
3 型色覚0.012— この 2 色は同じに見えます
全色盲0.013— この 2 色は同じに見えます

白地・黒地に対する WCAG コントラスト

白地 3.49·黒地 6.02どちらかでは本文に使えます
白地 3.68·黒地 5.71どちらかでは本文に使えます
白地 3.87·黒地 5.43どちらかでは本文に使えます

シミュレーションで見分けがつかなくなる 2 色は、2 つのものを区別する唯一の手がかりにしてはいけません。形やラベル、明度差も一緒に与えてください。コントラスト比チェッカーなら、特定の 2 色についての APCA 判定を丸ごと見られます。

書き出し

接頭辞

:root {
  --brand-100: oklch(62.308% 0.1239 229.81); /* #0094c3 */
  --brand-200: oklch(62.308% 0.188 259.81); /* #3b82f6 */
  --brand-300: oklch(62.308% 0.188 289.81); /* #886cee */
}

CSS と Tailwind の形式は oklch() を書き出し、16 進数はコメントとして添えます。書き出しの時点で精度を捨てると、そもそも OKLCH で計算した理由がなくなるからです。そして oklch() を受け取ったブラウザーは、出せるところでは広色域の色をそのまま描きます。

色相をいくつも並べるのではなく、このうちひとつから 50–950 のランプ全体が欲しいときは濃淡スケール生成が、実測した明度カーブに沿って作ります。

使い方

すでにある色を入れます
たいていはブランドカラーで、CSSの表記法ならどれでも構いません。あとはすべてこの色の色相・明度・彩度から導かれるので、全体を形づくる決定はこれひとつです。
規則を選び、広がりを調整します
補色は反対側の色相ひとつ、類似色は両隣、三色配色は120°ずつ3つ、分割補色は補色の組をやわらげたものです。広がりのスライダーはその角度を倍率で動かします。1が教科書どおりの間隔で、それより下げると全体がひとつの家族のように読めます。単色系と濃淡は色相ではなく明度を動かすので、角度ではなく段数を尋ねます。
2つの帯を見比べます
OKLCHの行の明度のばらつきは、作り方からして0に近くなります。HSLの行は同じ角度で回しているのにばらつきが残りますが、HSLの明度が知覚と無関係だからです。純粋な黄色と純粋な青がどちらも50%だと主張します。この基準色で2つの帯が同じに見えるなら実際に同じで、どちらを使っても構いません。
書き出す前に検証パネルを読みます
模擬した色覚の種類ごとに、いちばん近づく2色をΔE OKLabで、そして各色の白地・黒地に対するWCAGコントラストを報告します。溶け合うと印の付いた組は、2つの状態を分ける唯一の手がかりであってはいけません。形やラベル、明度の差も一緒に与えてください。
コードで使う接頭辞を付けて書き出します
CSS変数、Tailwindの`@theme`ブロック、SCSS、JSONトークン、SVGの色見本シートがあります。CSS形式では`oklch()`を出し、その横にコメントとして16進数を添えます。

よくある質問

書き出した16進数とoklch()が別の色になっています。どちらが正しいのですか。

どちらも正しく、対象のディスプレイが違うだけです。基準の彩度を保つと色見本がsRGBの外に出てしまう場合、16進数は色域に合わせて寄せたもので、収めるために彩度を諦めています。`oklch()`の値は実際に計算された色で、広色域の画面ならそちらが表示されます。切り詰められた色見本がどれだけ彩度を失ったかはパネルに出ます。