CSSカラー名検索

使い方

1. 色の値を入力: hexコード(#3b82f6)、RGB値、HSL値を入力または貼り付けるか、ピッカーをクリックして視覚的に色を選択します。
2. 色の名前を取得: 最も近い名前付きCSSカラー名、Pantoneリファレンス、人間が読みやすい名前が瞬時に表示されます。
3. 近隣の色を探索: 類似の名前付き色のパレットを表示して、デザインに最適な一致または代替を見つけます。

なぜ色名検索を使うのか?

デザインシステム、アクセシビリティドキュメント、クライアントとのコミュニケーションで作業する際、色の人間が読める名前があると、hexコードよりはるかに役立ちます。「Cornflower Blue」は明確に伝わりますが、「#6495ed」はそうではありません。このツールは、機械の値と人間の名前の間のギャップを埋め、デザイナーがパレットを文書化し、色の選択を説明し、hex値の標準CSS名を取り戻すのに役立ちます。

機能

• 最も近いCSS名: 任意のhexまたはRGBコードに対して最も近い名前付きCSSカラー(148色のCSSカラーの完全なリストから)を見つけます。
• 複数の入力形式: hex(#rrggbb)、RGB、HSL、HSVを受け入れます。
• カラーピッカー: 視覚的選択のためにネイティブピッカーを使用します。
• 近隣の色: 代替を見つけるために類似の名前付き色を表示します。
• 色のメタデータ: 色相、彩度、明度、知覚輝度を表示します。

よくある質問

ツールはどのように最も近い名前を見つけますか?

ツールは、CIEDE2000差分式を使用して、あなたの色とすべての名前付きCSSカラー間の知覚的距離を計算します。これは色の違いの人間の知覚とよく一致します。最も近い一致が名前として返されます。

これらの色はCSSキーワードと同じですか?

はい。ツールには、「rebeccapurple」、「dodgerblue」、「tomato」など、すべての148個の標準CSS名前付き色(CSS Color Module Level 4仕様から)が含まれています。これらをhex値の代わりにCSSで直接使用できます。

色に正確な名前がない場合は?

ほとんどの色には正確なCSS名がありません。ツールは知覚的に最も近い名前付き色を返し、一致がどれだけ近いかを示すために違い(delta E)を表示します。

X11からCSS Color Module Level 4まで:「rebeccapurple」への長い道のり

今日ほとんどの人が使用しているCSS名前付き色は、1986年にMITでX11グラフィカル環境のためにアセンブルされたXウィンドウシステムカラーリスト(rgb.txt)から継承されています。リストは次の10年間で有機的に成長し、「papayawhip」、「peachpuff」、「papayawhip」のような奇抜で曖昧な名前で満たされました。Mosaic(1993)、そしてNetscape Navigator(1994)がHTMLで色を標準化したとき、X11名のサブセットを保持しました。CSS1(1996年12月)は元のVGAパレットに一致する16の名前付き色のみを正式に定義しました:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。HTML 4(1997)は17番目として「orange」を追加しました。CSS2.1(2011年6月)は17を維持しました。CSS3 Color Module(2014年6月、2018年に最終化)はX11名の残りを追加し、合計を147にしました。2014年6月、色「rebeccapurple」(#663399)が、脳がんで亡くなったEric Meyerの娘Rebeccaを称えるために追加されました。彼女は紫が好きな色だと言っていました。CSS Color Module Level 4に追加され、合計を148にしました。16進数値#663399は、特定の人物を記念して追加された唯一のCSS名前付き色です。

名前付き色を超えるCSSカラー:oklch、lab、color()

名前付き色は依然として、現代のディスプレイが表示できるものの一角しかカバーしていません。CSS Color Module Level 4(Candidate Recommendation、現在のドラフト)は、はるかに広い色構文セットを導入します。lab()とlch()は、知覚的に均一な色空間であるCIE LabとLChで色を指定できます。oklab()とoklch()(Björn Ottosson、2020)は、明るい飽和色をよりよく処理する改良版です。oklch(70% 0.15 240)は鮮やかな空色青です。color(display-p3 1 0.5 0)は、モダンなiPhone、iPad、Macが表示できる広いP3カラーガマットへのアクセスを提供します。名前付き色が制限されているsRGBよりも約25%飽和度が高いです。相対カラー構文(oklch(from blue calc(l - 10%) c h))は、ある色から別の色を派生させることができます。すべての4つのカラー関数のブラウザサポートは2024年に>90%に達しました。2025年代のデザインでは、プロトタイピングに名前付き色を使用し、色ガマットスペクトル全体で機能する本番パレットにはoklch()に移植してください。

「最も近い色」が実際にどのように計算されるか

2つの色の間の「距離」は単一の概念ではありません。異なる公式は異なる答えを与え、それぞれが異なるユースケースに適合します。

• sRGBでのユークリッド距離。 sqrt((r₁−r₂)² + (g₁−g₂)² + (b₁−b₂)²)。高速だが、人間の知覚と一致せず、同じに見える2つの色がRGBで遠く離れていることもあり、非常に異なって見える2つの色が近いこともあります。「最も近い名前」のクエリには避けてください。
• Delta E CIE76。同じユークリッド公式ですが、ほぼ知覚的に均一なCIE Lab空間で。ほぼ、完全にではない。良い初期近似;制御された条件下でΔE ≤ 2.3は「ぎりぎり認識できる」とみなされる。
• Delta E CIEDE2000。現在の業界標準、CIEによって2001年に公開。明るさ、彩度、色相回転のための補正を追加し、人間が実際に色の違いを知覚する方法によりよく一致する。ΔE2000 ≤ 1はほとんどの観察者に知覚不能;≤ 5は類似の色に見える。このツールは「最も近い一致」にCIEDE2000を使用します。
• OKLabでのユークリッド距離。Björn Ottossonの2020年カラー空間は、単純なユークリッド距離がΔE2000に近く近似するように設計されている。ΔE2000より高速で、知覚品質は類似。デザインツールで増加するデフォルト。

色に名前を付けることが実際に役立つ場所

• デザインシステムのドキュメント。「主要アクション:Royal Blue(#4169e1)」はデザイン仕様やブランドガイドラインで単なる16進数値よりも読みやすい。
• クライアントコミュニケーション。「coralとsteel blueを使いましょう」は会議で機能する;「#ff7f50と#4682b4」は機能しない。名前は正確な値にコミットする前に会話を固定する。
• アクセシビリティ監査。背景に対してどの色がWCAGコントラストに失敗するかを文書化する際、人間の名前があると監査レポートが非開発者にも使いやすくなる。
• レガシーコード翻訳。古いCSSファイルはしばしば名前付き色を使用する。デザイントークンやカスタムパレットに移行する際、「lightseagreen」と「mediumaquamarine」がどの正確な色にマップするかを知る必要がある。
• クイックプロトタイプ。 background: tomatoをタイプする方が、色相環から16進数を選ぶより速い。名前付き色は、最終的な色が選ばれる前のレイアウトのスケッチに驚くほど良いデフォルトである。
• ブランド色の命名。あなたのブランド赤がcrimson(#dc143c)に近い場合、内部で「Brand Crimson」と呼ぶ方が「Red 8」よりも記憶しやすい。
• スウォッチマッチング。デザイナーは写真やスクリーンショットからサンプリングした色を貼り付け、「この色は何に近い?」と尋ねて実世界の参照からパレットを開始する。

CSS名前付き色での間違いと驚き

• gray vs grey。CSSは両方の綴りを受け入れますが、X11リストには元々「gray」しかありませんでした。「grey」は後に追加されました。lightgrayとlightgreyはエイリアスで、同じ色です。コードベースでは1つの綴りに固執してください。
• 「dark」バリアントは常にベースより暗いとは限らない。 darkgray(#a9a9a9)は実際にgray(#808080)より明るい、X11リストの有名な歴史的な癖でCSSが継承した。darkgreyでも同じ罠。
• aquaとcyanは同じ色。両方とも#00ffff。CSSは両方をレガシーエイリアスとして含む。fuchsiaとmagentaも同一(#ff00ff)。
• 「orange」はCSS名前付き色だが「pink」バリアントは異なる。 orange = #ffa500。しかし単一の「pink」はなく、CSSにはpink、lightpink、hotpink、deeppink、palevioletredがあり、すべて顕著に異なる。
• 「最も近い色」はあなたの脳が色をどう考えるかに依存する。同じペイントチップをサンプリングする2人が異なる名前を選ぶことがある。CIEDE2000は平均的な知覚を捉え、あなたのではない。距離数字だけを信じるのではなく、常にスウォッチを視覚的にチェックしてください。
• 名前付き色はすべてsRGB。CSS名前付き色は8ビットsRGBトリプルとして定義されている。P3またはBT.2020ディスプレイでは、tomatoやfuchsiaのような鮮やかな色は、color(display-p3 ...)で指定された同じ色相よりもくすんで見えることがある。プロトタイプには問題ない;モダンハードウェアでの本番には、ワイドガマット構文に移植してください。
• 名前付き色だけではアクセシビリティチェックに合格しない。 whiteの上のyellowは読みづらい;blackの上のredはぎりぎり。色の名前付きステータスはコントラストについて何も言わない。色の選択と常にWCAGコントラストチェックを組み合わせてください。

その他のよくある質問

実際に「papayawhip」や「peachpuff」のような名前を選んだのは誰?

1人の人ではない;X11 rgb.txtファイルは1980年代後半にMITと他のUnixベンダーの複数の貢献者によって成長した。多くの名前はSinclair Paintsやその時代の他のペイントカタログから来た。命名は意図的に非公式で一貫性がない、貢献者はデスクの上や窓の外にあったオブジェクトに基づいて色に名前を付けた。中央委員会はなかった。CSS3が2014年にX11リストを丸ごと採用したとき、すべての癖が一緒に来た。

本番環境でrebeccapurpleを使うべきか?

2014年以来ブラウザサポートは普遍的なので、どこでも動作する。#663399と完全に同等。コードで読みやすい名前を使用してください;「rebeccapurple」は、それを使用するすべてのページにある小さくても目に見えるトリビュート。

CIEDE2000と単純なΔE公式の違いは?

ΔE76(CIE Labでのユークリッド距離)は高速で合理的な答えを与えるが、飽和色での違いを過小評価し、暗い色で過大評価する。CIEDE2000は5つの補正項(明るさ、彩度、色相回転、2つの交差項)を追加し、人々が実際に色の違いをどのように知覚するかについての経験的データに適合する。修正は重要;同じペアの色がΔE76 = 4とΔE2000 = 2を与える可能性がある(非常に異なる知覚判定)。「この色はその色に十分近いか」については、ΔE2000を使用する。速度が重要なバッチ処理には、OKLabユークリッド距離が高速近似。

独自のカスタム色名を追加できる?

CSSキーワードとしてはできない、名前付き色リストはspecで固定されている。しかし、CSSカスタムプロパティ(変数)は同じ人間工学を与える::root { --brand-coral: #ff7f50; }そしてcolor: var(--brand-coral)。デザイントークンは本質的にこのアイデアを形式化したもので、現代のデザインシステムは普遍的に使用している。

色データはどこかに送信される?

いいえ。すべての色変換と距離計算はブラウザで実行されます。DevToolsでネットワークタブを開いて色を選択すると、アウトバウンドリクエストがゼロ表示されます。未発表のブランド色や内部パレット作業に安全。