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

近い名前は色の距離から選ばれます。

入力色と名前付き一覧のRGB差を比較し、距離が最も小さい候補を表示します。完全一致がない場合でも比較の基準は変わりません。

• 赤・緑・青の差をまとめて見ます。
• 近い結果は同一色の保証ではありません。
• 候補チップで周辺の値を見比べられます。

HEXは六桁で光の量を記録します。

HEXの二桁ずつは赤、緑、青を00からFFで表します。#3498DBなら34、98、DBが各チャンネルです。

• CSSへ貼るときは#を残します。
• 00はその光が最も少ない状態です。
• FFはその光が最大の状態です。

RGBとHSLは同じ色を別の角度で示します。

RGBは画面の三つの光の値で、HSLは色相環の位置、彩度、明度として同じ色を読みやすくします。

• RGBはピクセル値と照合しやすいです。
• HSLは色調を動かすときに役立ちます。
• 二つの表記は同じ表示色を指せます。

色相と明度で調整の向きが分かります。

hueは色相環の角度、lightnessは黒から白までの位置です。彩度を下げると色相を保ちながら灰色に近づきます。

• 0度付近のhueは赤系です。
• lightness 50%は両極の中間です。
• 彩度を下げても明度は別に変わります。

CSS/W3C名は英語のまま扱います。

仕様とコードでは英語の識別子として定義されているため翻訳しません。ブラウザ、スタイルシート、制作メモで同じ綴りを使うためです。

• 標準名はCSSで直接使えます。
• ブランド名は標準名と分けて残します。
• 結果名は色の品質評価ではありません。

近い色のチップで候補を比べます。

最初の結果だけで決めず、スウォッチとHEXを並べて確認してください。背景の上では隣の候補の方が自然に見えることがあります。

• チップを押すとその値を入力できます。
• 近い候補の明度差を見ます。
• 決めた値は制作記録へコピーします。

履歴はこのブラウザだけに残ります。

確認した色は端末のブラウザ保存領域にあり、後で開き直せます。共有端末では消去しておくと安心です。

アクセシブルな対比は組み合わせで調べます。

BlueやGrayという名前だけでは文字の読みやすさは分かりません。文字色と背景色の実際の比率を別の検査で確認してください。

入力形式の小さな違いに注意します。

三桁HEXは各桁を二回繰り返す省略形です。#がないとCSSでは値として扱いにくいため、貼り付け後に六桁の結果を見直します。

実務の引き継ぎでは値も書き添えます。

ブランドブルー #3498DBを調べたら、「ボタン背景 #3498DB」のように候補名と残します。開発者は推測せず同じ色を再現できます。