Color to Name

CSS 色名とは？

CSS 色名は、ブラウザが固定の RGB 値にマッピングする人間が読めるキーワードです。CSS は約 140 の名前付き色を定義しています — red、blue、white などの 17 の基本 HTML 色から、skyblue、tomato、rebeccapurple などを追加する拡張 X11 リストまで。各名前は正確な RGB トリプルに解決されるため、skyblue は常に rgb(135, 206, 235) を意味します。

名前付き色は HEX コードより記憶しやすく読みやすいため便利で、引用符や関数なしで CSS、HTML、SVG で直接機能します。デザイナーはパレットについて議論する際にも共通語彙として使用します — 「red の代わりに tomato を使う」と言うのは、2 つの HEX コードを引用するより明確です。

最も近い一致の見つけ方

名前付き色は約 140 個しかありませんが、HEX 色は 1670 万色以上可能なため、拾ったほとんどの色には正確な名前付きの一致がありません。このツールは、あなたの色とすべての名前付き色の間の RGB 空間でのユークリッド距離を計算し、最も距離の小さいものを返すことで最も近い名前付き色を見つけます：

距離 = √((R₁ − R₂)² + (G₁ − G₂)² + (B₁ − B₂)²)

結果は入力に視覚的に最も近い名前付き色です。ほとんどの拾い取りでは一致は優れていますが、2 つの名前付き色の間にある色では結果が別のツールとわずかに異なる場合があります。これは単純な RGB 距離が人間の視覚が違いを知覚する方法を無視するためです（輝度の感度を考慮せず、すべてのチャンネルを均等に重み付けします）。

色名を使用するタイミング

色名はいくつかの実用的なワークフローで優れています：

• 迅速なプロトタイピング。 UI をスケッチする際、coral と綴るのは #FF7F50 を探すより速いです。
• 読みやすいコード。 color: tomato; は生の HEX 値より意図を明確に次の開発者に伝えます。
• デザイン議論。 色に名前を付ける（「このブランドの青は dodgerblue に近い」）ことで共通語彙を作成します。
• アクセシビリティレビュー。 最も近い名前付き色を知ることで、明度とコントラストについての推論に役立ちます。
• 教育。 CSS を学ぶ学生は HEX や HSL に移行する前に名前付き色を使用できます。

本番環境のブランドパレットでは、正確な HEX コードを出荷すべきです — 名前は便利なレイヤーであり、正確なトークンの代わりにはなりません。

名前付き色と HEX と RGB の違い

名前付き色、HEX、RGB はすべて同じ基盤となる sRGB 色を記述します。名前は単に固定 RGB トリプルのエイリアスです：skyblue、#87CEEB、rgb(135, 206, 235) は同じピクセルを生成します。違いは利便性です — 名前は読みやすく、HEX はコンパクトで普遍的、RGB はプログラムによる操作のためにチャンネルを公開します。

HEX はクロスツールの一貫性のための最も安全な選択です。すべてのブラウザ、デザインアプリ、画像エディタがサポートし、曖昧さがないためです。名前付き色はクイックドラフトやドキュメントに最適で、RGB（およびその HSL のいとこ）は色値を計算やアニメーションする必要がある場合に最適です。

色名の見つけ方

このツールで最も近い色名を見つけるのは一瞬で、すべてブラウザ内で完結します。アップロード不要、登録不要、インストール不要。以下の手順で行います：

1. 色を拾います。 カラーピッカーを使用するか、RGB 入力に赤、緑、青の値（0–255）を入力します。
2. 結果を読みます。 最も近い CSS 色名とその HEX 値がリアルタイムで更新され、一致した色を示すスウォッチが表示されます。
3. 名前をコピーします。 「名前をコピー」をクリックしてキーワードをコピーし、CSS やデザインツールに貼り付けます。

すべてのステップは JavaScript でローカルに実行されるため、色の選択がブラウザから離れることはありません。これによりツールは完全にプライベートで即時です。