HEXコードから近い名前を探すカラーネームファインダー

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

入力色と候補のRGB差を√(2ΔR² + 4ΔG² + 3ΔB²)で計算し、最小の項目を選びます。知覚均等色空間のΔEではありません。

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

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

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

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

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

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

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

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

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

• 0度付近のhueは赤系です。
• lightness 50%は両極の中間です。
• 彩度と明度は別々の指標です。

CSS標準名と拡張名は区別します。

このツールの内蔵一覧にはCSS Standardと表示された130件の値とExtended 26件の別名があります。CSS Standardだけがブラウザで使える名前キーワードで、Extendedは参考名です。

• CSS Standardと表示された名前だけをCSSキーワードに使います。
• Extendedの結果はHEX値と一緒に残します。
• 名前は公的な色規格や品質評価ではありません。

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

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

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

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

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

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

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

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

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

色名の結果には限界があります。

結果はこのツールの固定された156件の中で最も近い項目であり、普遍的に確定した色名ではありません。別の一覧や計算式では異なる名前になることがあり、印刷、ブランド承認、アクセシビリティ判断には実際の色規格や別の検査が必要です。