カラーネームファインダー

まず色を決めて、名前と数値をまとめて読みます

入力方法は三つありますが、全部を使う必要はありません。手元にある情報に合わせて始め、結果側で必要な値だけコピーします。

1. カラーピッカーかHEXコードで色を指定します。 #3498dbのような6桁の値をそのまま使えます。#fffのような3桁の値は6桁に展開されます。
2. 名前を覚えている色は色名検索を使います。 TomatoやRedなどを入力すると候補が出るので、近いものを選べます。
3. 完全一致か近い候補かを分けて見ます。 完全一致は、そのHEX値が色名データにあるという意味です。ない場合は似ている色のカードが判断材料になります。
4. 必要な形式だけコピーします。 デザイン指定にはHEX、CSSの一部にはRGB、色の調整にはHSLが便利です。

HEX、色名検索、カラーピッカーは入口が違うだけです

HEXはWebでよく使う#RRGGBB形式です。RGBは赤・緑・青のチャンネル値、HSLは色相・彩度・明度を分けて見せます。少し明るくしたい、彩度を下げたい、といった調整ではHSLが読みやすくなります。

完全一致の名前と近い名前は、役割が違います

CSSの色名は、ブラウザが認識する決まった一覧です。ツールにはMaterialやFlat系の拡張名も入っているため、標準名にない色でも近い呼び方を探せます。似ている色はRGB差の重み付き距離で並ぶため、距離が小さいほど数値上は近い色です。

#ff0000はRed、あいまいな色は近い候補を見ます

#ff0000を入力すると、結果はRed（赤）です。同じ画面でrgb(255, 0, 0)、hsl(0, 100%, 50%)、#FF0000もコピーできます。少し茶色寄りの赤などは完全一致が出ないことがあり、その場合は似ている色の1番目から確認します。

結果は、名前・コード・調整値に分けて読みます

次にどこへ貼り付けるかを決めてから見ると迷いません。コピー先に合わせてボタンが分かれています。

• 人に説明するときは名前を見ます。 配色をメッセージやレビューで共有するときに役立ちます。
• デザイントークンやCSSにはHEXが扱いやすいです。 結果は大文字の6桁HEXにそろえて表示されます。
• RGBは画面色のチャンネルを見るときに使います。 赤・緑・青がそれぞれどれくらい入っているかを確認できます。
• HSLは調整の方向を見るときに便利です。 色相、彩度、明度を分けて読めます。
• 履歴はブラウザ内に保存されます。 プライベートモード、保存のブロック、サイトデータの削除で消えることがあります。

カラーネームファインダーで迷いやすい質問