search

Found

info 概要

CSS 標準 148 色 (steelblue 等) を hex / RGB / HSL / OKLCH と双方向変換し、任意の hex から最も近い CSS 色名を ΔE 距離付きで検索できる開発者向けツール。

📘 使い方

  1. 「色名で検索」または「Hex で検索」モードを切り替える
  2. CSS 色名 (例 steelblue) または hex (例
  3. スウォッチと hex / RGB / HSL / OKLCH 値、近似色の ΔE 距離を確認する
  4. 「148 色の一覧を表示」で標準色全体を視覚的に俯瞰する

CSS カラーネーム ルックアップ

148 種類の CSS 標準色名から選択 (入力欄でオートコンプリート)

grid_view 関連ツール

Article

CSS カラーネーム ルックアップ | 148 色を双方向に引ける色名辞書

CSS Color Module Level 4 で定義された 148 個の named-color を、名前 ↔ hex / RGB / HSL / OKLCH の双方向で引ける開発者向けの色名辞書。任意の hex から「最も近い CSS 色名」も OKLab 色空間の ΔE 距離で割り出すため、デザインシステムで色を CSS 名指しにするか個別 hex で持たせるかの判断材料が 1 画面で揃う。

💡 このツールについて

CSS の named-color (例: steelblue cornflowerblue lightgoldenrodyellow) は X11 の歴史的色名を引き継いだ 148 種類のキーワードで、SVG 1.0 / CSS Color Module 仕様に明文化されている。エディタの補完任せでスペルを当てに行くと lightgoldenrodyellow のような長い色名で躓きやすく、MDN を毎回開くのも煩わしい。

このツールは入力欄でオートコンプリートが効くので、light と打てば lightcoral lightskyblue などの候補が出てきて、選んだ瞬間に hex / RGB / HSL / OKLCH の 4 表記が同時に揃う。逆に手元の hex を渡せば、視覚的に近い CSS 標準色名を OKLab perceptual 距離 (Björn Ottosson 係数) で計算して提示する。単純な RGB ユークリッド距離より知覚色差に沿った結果になるため、「この hex なら CSS で darkslateblue と書ける」「いや微妙に違うから個別 hex を残す」といった判断が肌感に合いやすい。

🧐 よくある質問

Q. CSS 色名は何種類あるのですか? A. CSS Color Module Level 4 で正式に 148 種類定義されています (X11 由来の *gray / *grey 表記違いを別カウントすると 9 組重複)。本ツールはこの 148 すべてに対応します。

Q. rebeccapurple はなぜあるのですか? A. 2014 年に CSS コミュニティの一員 Eric Meyer 氏の娘 Rebecca の追悼として CSS WG が追加した色 (#663399) です。仕様策定の経緯が公式に記録されている希少な named-color です。

Q. gray と grey は同じ色ですか? A. はい、gray darkgray lightgray ... など 9 個のグレー系色はすべて grey 綴りでもまったく同じ hex で定義されています。CSS 仕様で両綴り併存が認められた歴史的経緯です。

Q. なぜ最近傍検索に OKLab を使うのですか? A. sRGB のユークリッド距離は人間の知覚色差と一致せず、特に暗色域・彩度差で大きくずれます。OKLab は Björn Ottosson が 2020 年に発表した知覚均等色空間で、ΔE = 直線距離が知覚色差に近い性質があるため、色名最近傍検索でも納得感のある結果を返します。

Q. RGB や HSL の値を直接入力できますか? A. 現状の入力は CSS 色名と hex のみです。RGB / HSL / OKLCH は出力表示専用です。お手元の RGB / HSL があれば、まず hex 変換してから入力してください。

Q. 出力の oklch() 表記は CSS で使えますか? A. 使えます。oklch(L% C H) 形式で CSS Color Module Level 4 に正式採用されており、Chrome / Safari / Firefox の現行版で実用可能です。広色域 (P3 / Rec.2020) を扱うデザインシステムで採用が進んでいます。

📚 豆知識

CSS 色名の起源は 1980 年代の X Window System の rgb.txt ファイルで、当時の研究者・グラフィックデザイナーが手作業で命名した。mediumaquamarine papayawhip peachpuff といった一見ふざけた名前は、その時代に X 用テーマを作っていた誰かの感性をそのまま現代の Web に持ち込んだ化石のような存在で、CSS WG も「歴史的経緯」として削除せず保存している。

X11 を経由した名前の中で、ホワイトハウスのキッチンで使う果物の名前 (papayawhip) や 1990 年代のテキスタイル業界用語 (burlywood = 樹皮色) が標準ライブラリに居座っているのは Web プラットフォームならではの面白さで、oklch() のような最新色空間記法と同じファイルで並ぶのも CSS のレイヤー構造の妙と言える。