色名検索 — HEX / RGB に近い CSS / Tailwind 色名を探す

使い方

HEX 値 (`#3b82f6`、`3b82f6`、`#abc`) または CSS 色名 (`tomato`、`steelblue` など) を入力欄に入れます。 「検索対象」を選びます。すべて / CSS 148 色のみ / Tailwind パレットのみ。 入力した色との RGB 距離で並べた候補が表に出ます。各行の色名や HEX をクリックでコピーできます。 Tailwind は `red-500` のような `family-shade` 形式で表示されるので、Tailwind クラス名としてそのまま使えます。

よくある質問

距離スコアの意味は?

RGB 空間でのユークリッド距離です。0 が完全一致、441 が最大 (黒 ↔ 白)。100 以下なら同系色、50 以下ならほぼ同じ色という目安。あくまで RGB 距離なので、人の目で見た差 (知覚距離) と完全には一致しません。

CSS 色名で入力できる名前は?

CSS Color Module Level 4 で定義されている 148 色 (`tomato`、`rebeccapurple`、`darkslategray` など) を受け付けます。大文字小文字は区別しません。

Tailwind の色データはどのバージョン?

Tailwind CSS v4 のデフォルトパレット (22 色 × 11 階調 = 242 色) を内蔵しています。カスタムテーマや shadcn の OKLCH ベース色は含まれません。

距離の計算を改善できますか?

現状は RGB ユークリッド距離だけです。CIE Δ*E* (Lab 空間) ベースのより知覚に近い距離計算は将来検討します。デザイン用途では RGB でも十分な精度で命名候補が出ます。

データはどこかに送信されますか?

いいえ。色データは内蔵されており、検索はすべてブラウザ内で処理されます。

類似のツール

カラー変換 — HEX / RGB / HSL / HSV を相互

HEX・RGB・HSL・HSV をリアルタイムに相互変換できるカラーピッカー付きツール。どの欄を編集しても他の 3 表記が即座に追従。すべてブラウザ内で動作し、入力した色情報は外部に送信されません。

開発色変換

コントラスト比チェッカー — WCAG AA / AAA 判定

前景色 (文字色) と背景色を選ぶだけで、WCAG 2.x のコントラスト比を計算し、通常の文字・大きな文字・UI 部品それぞれで AA / AAA を満たすかをその場で判定します。HEX と rgb() 入力、カラーピッカー、ライブプレビュー付き。すべてブラウザ内で処理され、色情報は外部に送信されません。

開発色

CSS 整形 — pretty / minify 切替で読みやすく / 1 行に

CSS を整形 (pretty / minify) するツール。css-tree (MIT) でパースして AST → 自前の indent ロジックで書き戻す。Mode 切替: pretty (indent 2/4/タブ、改行あり、宣言ごと改行) と minify (空白・改行を除去して最小化)。@media / @supports / @keyframes / @font-face / @import などのアットルール、calc() / var() / カスタムプロパティ (--var) 、ベンダープレフィックス、ショートハンド を保持。コメント (`/* ... */`) は css-tree の parse 仕様により破棄されます。CSS-in-JS の `${expr}` のようなプレースホルダは parse できないため、純粋な CSS を入力してください。

開発変換

画像カラーパレット抽出 (主要色・配色を取得)

画像をドロップすると、median cut 量子化で主要な色を抽出し、各色の HEX / RGB 値と占有率を一覧表示します。色数 (4〜16) を選べ、占有率バーで配色バランスも確認可能。各色クリックで HEX をコピー、パレット全体を HEX 一覧 / CSS 変数 / JSON でコピーできます。画像はブラウザ内でだけ解析され、外部に送信されません。

画像色