カラー名検索
カラー
任意の色(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ユークリッド距離をそのまま使えば再現可能。
関連ツール
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
カラー00
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー00
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー00
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー00
カラーパレット ジェネレーター
基準色から 6 種類のスキームで調和の取れたパレットを作成。
カラー00
カラーコントラスト チェッカー
文字／背景のコントラストを WCAG AA・AAA 基準でチェック。
カラー00