カラー名検索
任意の色(hex、RGB、カラーピッカー)に最も近い色名を3つのデータベース(CSS 4標準148色、Tailwind v3デフォルトパレット110+色、XKCD色名調査上位60色)から検索し、上位8件まで表示します。距離計算は知覚均等色空間OKLabで行うため、RGBユークリッド距離のように明度差に偏らず、人の目で見た類似度と実際に一致します。
—
最も近い色
- dodgerblue#1e90ff · ΔE 0.0363
- royalblue#4169e1 · ΔE 0.0668
- cornflowerblue#6495ed · ΔE 0.0697
- mediumslateblue#7b68ee · ΔE 0.0871
- steelblue#4682b4 · ΔE 0.1011
- mediumpurple#9370db · ΔE 0.1131
- slateblue#6a5acd · ΔE 0.1140
- lightslategray#778899 · ΔE 0.1564
距離はOKLabユークリッド(知覚均等)。小さいほど近い。
使い方
- hex(`#3b82f6`、`3b82f6`、`#36e`)、`rgb(59, 130, 246)`、またはカラーピッカーで入力。
- CSS / Tailwind / XKCD データベースを切替。
- コピーボタンで名前を取得し、CSS・Tailwind設定にそのまま使用。
よくある質問
- なぜRGB距離ではなくOKLab?
- 純粋なRGB距離は誤解を招く順位を出します — 暗い色の10%明度変化と明るい色の10%変化を同等に扱いますが、人の目は中間トーンの方がはるかに敏感です。OKLab(2020年Björn Ottosson発表)は知覚均等性のために設計されており、「最も近い」が本当に「最も似て見える」を意味します。
- XKCDカラーサーベイとは?
- 2010年、Randall Munroe氏が222,500人にランダムな5色の名前を尋ねる調査を実施。最も合意された名前が、matplotlib等のデータ可視化でも使われるパレットになりました。「puke green」のような俗称も含まれますが、本ツールでは上位60件のみ使用。
- なぜ結果は8件?
- 8位以降は距離が大きすぎて「最も近い」という表現が意味を失います。さらに必要であればOKLabユークリッド距離をそのまま使えば再現可能。
関連ツール
カラートークンエクスポーター
カラーパレットを1回定義 → CSSカスタムプロパティ·Tailwind設定·SCSS·LESS·デザイントークンJSON·SwiftUI Color·Android `colors.xml` にエクスポート。ライブプレビュースウォッチ。
カラー 0 0
Tailwind カラーパレット
Tailwind CSS のデフォルトパレット全体 — 22 色相 × 11 シェード（50〜950）— クリックで Tailwind クラス、HEX、rgb() としてコピー。
カラー 0 0
OKLCH カラーピッカー
知覚的に均一な OKLCH 空間（明度・彩度・色相）で色を選ぶ — そして各選択が sRGB ディスプレイ色域内に収まるかを確認。
カラー 0 0
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー 0 0
CSS 名前付きカラー
147 個の CSS / X11 named color — HEX・RGB・ライブスウォッチ、検索・色相系列別グループ化。
カラー 0 0
カラー補間 / グラデーションステップ
2 つの 16 進カラーを選び、N の離散中間ステップを得る — sRGB、線形 RGB、OKLab または HSL で — オプションのイージング付き。
カラー 0 0