カラーパレット生成ツール

基準になる色を選ぶと、残りは色相環に沿って計算されます。色をクリックするとコードがコピーされ、写真を読み込めばその写真から配色をそのまま取り出せます。

ベースカラー

配色

色数: 6

色をクリックするとコードをコピーします

CSS 変数

写真から配色を作る

写真は端末から出ません。ブラウザーの中だけで読み取ります。

配色は好みではなく、色相環上の幾何です。補色はちょうど反対側の 180°、トライアドは環を 120° ずつ三等分した位置、類似色は 30 度以内の隣同士。このツールは彩度と明度をそのままに色相だけを回すので、相手の色も基準色と同じだけ鮮やかで、同じだけ深く仕上がります。

写真では「最も多い画素」を数える方法が通用しません。空だけでも百万通りの微妙に違う青があり、どれも一度しか現れないからです。このツールは色空間を最も幅の広い成分で二分し、必要な数の箱ができるまで繰り返します。だから結果には空も、顔も、影もそれぞれ残り、平均化された茶色一色にはなりません。

ウェブサイトにはどの配色が向きますか。

モノクロと類似色が安全です。ページが落ち着き、要素同士が注目を奪い合いません。補色は「必ず目に入ってほしい」ひとつの要素 — ボタン、バッジ、警告 — のために取っておきます。

配色をコードでどう使いますか。

色見本の下にある CSS 変数のかたまりをコピーし、スタイルシートに貼り付けます。名前は --color-1 … --color-6 になり、他人のプロジェクトでは 16 進数の羅列より読みやすくなります。

写真はどこかに送られますか。

いいえ。画像はページ内でデコードされ、色を数える前に 160 ピクセルまで縮小されます。端末から何も出ていかないので、結果もすぐに出ます。

シェードの列が真っ黒で終わらないのはなぜですか。

純粋な黒と白は情報を持ちません。誰でも知っている色で、パレットの中では枠を一つ使うだけです。列は端の手前で止まるので、どの色見本も実際に使える色のままです。