🎨 CSSカラー名⇔HEX変換

CSSの名前付きカラー（全148色）と HEX / RGB / HSL を相互変換します。カラー名からコードとスウォッチを表示し、HEXからは完全一致するCSS名、無ければ「最も近い色名」をRGB距離とともに提示します。148色一覧は検索フィルタ付きです。

入力

調べ方

CSSのカラー名（例: dodgerblue, rebeccapurple, tomato）を入力すると HEX / RGB / HSL を表示します。

CSSカラー名 一覧（148色）

全 148 色

解説

CSSの「名前付きカラー（named color）」は、color: red のように英単語で色を指定できる仕組みです。CSS Color Module Level 4 では合計148のキーワードが定義され、black／white／red のような基本色から、dodgerblue（ドジャースの青）や rebeccapurple（後述）まで含まれます。もともとは古い X11 ウィンドウシステムの色名に由来し、ブラウザ各社が実装を揃えて標準化された経緯があります。本ツールは、この148色の名前とHEXコードを内蔵し、双方向に変換します。

色コードには複数の表記があります。HEX（#1E90FF）は赤・緑・青の各成分を16進2桁で並べた表記、RGB（rgb(30, 144, 255)）は各成分を0〜255の10進で表す表記、HSL（hsl(210, 100%, 50%)）は色相（Hue）・彩度（Saturation）・明度（Lightness）で表す表記です。同じ色でも用途によって扱いやすい表記が異なるため、本ツールはカラー名を入力するとHEX・RGB・HSLの3種類を同時に表示し、それぞれをワンクリックでコピーできます。

HEXから調べる場合、まず148色の中に完全一致するコードがあるかを探します（例: #FF0000 は red）。一致するものが無ければ、入力色と各CSS名の色をRGB空間上の点とみなし、赤・緑・青の差の二乗和の平方根（ユークリッド距離）が最小になる色を「最も近い色」として提示し、その距離も表示します。例えば #FE0000 は red（#FF0000）から距離1で、最も近いCSS名は red になります。距離は色の近さの目安で、値が小さいほど元の色に近いことを意味します。

rebeccapurple（#663399）は、Webの著名なエンジニアであり教育者でもあった Eric Meyer 氏の娘レベッカさんを追悼して、2014年にCSSへ追加された特別な色名です。このように名前付きカラーには背景や文化があり、コード（#663399）よりも名前の方が意図やニュアンスが伝わる場面もあります。gray と grey、aqua と cyan、magenta と fuchsia のように、同じ色を指す別綴り・別名も存在します。変換はすべて端末内（ブラウザ内）で行い、入力した色はどこにも送信されません。

よくある質問

CSSの名前付きカラーとは何ですか？

HEXやRGBの代わりに、red や dodgerblue のような英単語で色を指定できるCSSの仕組みです。CSS Color Module Level 4 で148のキーワードが定義されており、どの主要ブラウザでも同じ色として表示されます。

全部で何色ありますか？

148のキーワードがあります。ただし aquaとcyan、grayとgrey、magentaとfuchsia のように同じ色を指す別名が含まれるため、実際に異なる色（HEX）の数はこれより少なくなります。本ツールは148のキーワードすべてを一覧に載せています。

HEX・RGB・HSLの違いは？

いずれも同じ色を別の書き方で表したものです。HEXは #1E90FF のように16進で、RGBは rgb(30,144,255) のように各成分を0〜255で、HSLは hsl(210,100%,50%) のように色相・彩度・明度で表します。HSLは「少し明るく／くすませたい」といった調整がしやすいのが特徴です。本ツールは3種類を同時に表示します。

一致する名前がないときの「最も近い色」はどう決めていますか？

入力色と各CSS名の色をRGBの座標（赤・緑・青）とみなし、その差の二乗和の平方根（ユークリッド距離）が最小になる色を選んでいます。距離が小さいほど元の色に近く、#FE0000 なら距離1で red が最近傍になります。人の見た目の近さとは必ずしも一致しない点にご注意ください。

rebeccapurple とは何ですか？

#663399 の紫で、CSSエンジニア Eric Meyer 氏の娘レベッカさんを追悼して2014年にCSSへ追加された色名です。技術仕様に人への想いが刻まれた珍しい例で、名前で指定することに意味がある色といえます。

gray と grey、aqua と cyan はどう違いますか？

綴りが違うだけで、指す色（HEX）は同じです。grayとgreyはどちらも #808080、aquaとcyanはどちらも #00FFFF、magentaとfuchsiaはどちらも #FF00FF です。本ツールでHEXから調べると、これらは「別名」としてまとめて表示されます。

どんなときに使いますか？

デザインカンプで指定されたHEXに近い覚えやすい色名を知りたいとき、コードレビューやCSS記述で名前とHEXを行き来したいとき、配色の候補を148色の一覧から探したいときなどに便利です。名前で指定するとコードより意図が伝わりやすい場面もあります。

入力した色はサーバーに送られますか？

送られません。変換・距離計算はすべてブラウザ内で完結し、入力内容はどこにも送信されません。オフラインでも利用できます。