CSSカラー名⇔HEX変換の使い方｜148色と最近傍色の仕組み
公開日：2026年10月8日 更新日：2026年9月15日 運営：シルギア（Analyzegear, Inc.） 対象ツール：CSSカラー名⇔HEX変換
CSSカラー名⇔HEX変換は、dodgerblue や rebeccapurple のようなCSSの色名と、#1E90FF のようなコードを双方向に変換するツールです。名前からHEX / RGB / HSLの3種類を同時に表示し、コードからは一致するCSS名、無ければ最も近い色名を提示します。この記事では148色の背景から最近傍色の仕組み、別名の扱いまで、実際の値とあわせて解説します。
CSSの名前付きカラーとは
CSSの「名前付きカラー（named color）」は、color: red のように英単語で色を指定できる仕組みです。CSS Color Module Level 4 では合計148のキーワードが定義されており、black・white・red のような基本色から、dodgerblue（ドジャースの青）のような具体的な色まで含まれます。もとは古い X11 ウィンドウシステムの色名に由来し、各ブラウザが実装をそろえて標準化されました。どの主要ブラウザでも同じ色として表示されるため、覚えやすさと再現性の両方を備えています。
名前には文化や背景が刻まれているものもあります。rebeccapurple（#663399）は、著名なWebエンジニアであり教育者でもあった Eric Meyer 氏の娘レベッカさんを追悼して2014年にCSSへ加えられた色名です。コードよりも名前の方が意図や由来が伝わる、という側面をよく表しています。
HEX・RGB・HSLの関係
同じ色でも、書き方は複数あります。HEX（#1E90FF）は赤・緑・青の各成分を16進2桁で並べた表記、RGB（rgb(30, 144, 255)）は各成分を0〜255の10進で表す表記、HSL（hsl(210, 100%, 56%)）は色相・彩度・明度で表す表記です。どれも中身は同じ色で、用途によって扱いやすさが変わります。
たとえばHEXの各2桁はそのまま0〜255に対応します。1E は16進で30、90 は144、FF は255なので、#1E90FF は rgb(30, 144, 255) と同じ意味になります。HSLは「少し明るく」「彩度を落として」といった調整が直感的で、配色を手で詰めるときに便利です。このツールはカラー名を入力すると、この3表記を一度に並べて表示し、各行の「コピー」ボタンでそのまま貼り付けられます。
カラー名からコードを調べる
「調べ方」で『カラー名から』を選び、入力欄にCSSのカラー名（例: dodgerblue, tomato, rebeccapurple）を入れます。大文字・小文字や前後の空白は自動で整えられるので、DodgerBlue のような入力でも認識されます。結果にはスウォッチ（色見本）とHEX / RGB / HSLが表示されます。
- dodgerblue → #1E90FF ／ rgb(30, 144, 255) ／ hsl(210, 100%, 56%)
- tomato → #FF6347 ／ rgb(255, 99, 71) ／ hsl(9, 100%, 64%)
- rebeccapurple → #663399 ／ rgb(102, 51, 153) ／ hsl(270, 50%, 40%)
該当する名前が無ければ「一致するCSSカラー名はありません」と表示されます。綴りが不確かなときは、下部の一覧の検索フィルタで名前の一部から探すのが確実です。
HEXから名前を調べる
『HEXから』を選ぶと、逆にコードから色名を引けます。入力は#付き・#無し・3桁短縮のいずれでも構いません。#1E90FF でも 1e90ff でも #F00 でも解釈され、#F00 は #FF0000 と同じ扱いになります。
ツールはまず148色の中に完全一致するコードがあるかを探します。たとえば #FF0000 は red、#808080 は gray（別名 grey）として表示されます。一致する名前が無いときは、後述する計算で最も近い色を距離とともに提示します。デザインカンプで渡されたHEXに、覚えやすい近い色名を当てたいときに役立ちます。
最も近い色はどう決まるか
完全一致が無い場合、ツールは入力色と各CSS名の色をRGB空間上の点とみなします。赤・緑・青の差をそれぞれ二乗して足し、その平方根をとった値（ユークリッド距離）が最小になる色を「最も近い色」に選びます。式で書くと、距離 = √((R差)² + (G差)² + (B差)²) です。
たとえば #FE0000 は red（#FF0000）と赤成分が1だけ違い、緑と青は同じなので距離は1、最も近い色は red になります。もっと離れた例では、#123456 の最近傍は midnightblue（#191970）で距離は約38.1です。距離は小さいほど元の色に近い目安ですが、RGBの数値上の近さであって、人の見た目の近さとは必ずしも一致しない点には注意してください。
別名と使いどころ
148のキーワードには、綴りが違うだけで同じ色を指す別名が含まれます。gray と grey（どちらも #808080）、aqua と cyan（#00FFFF）、magenta と fuchsia（#FF00FF）などです。HEXから調べると、これらは「別名」としてまとめて表示されるため、同じ色に複数の呼び名があることがひと目で分かります。そのぶん実際に異なる色（HEX）の数は148より少なくなります。
使いどころは幅広く、CSSを書くときに名前とコードを行き来したい場面、コードレビューで色の意図を共有したい場面、資料や配色候補を148色の一覧から探したい場面などで役立ちます。変換や距離計算はすべてブラウザ内で完結し、入力した色はどこにも送信されません。オフラインでも使えるので、手元で気軽に色名とコードを確かめる用途に向いています。