ToolDeck

カラー名検索

HEXまたはRGB値に最も近いCSSカラー名を検索

サンプルを試す

カラー(HEX)

最も近いCSS名前付きカラー

MediumSlateBlue最も近い
#7B68EE
Δ 24
RoyalBlue
#4169E1
Δ 38
SlateBlue
#6A5ACD
Δ 39
CornflowerBlue
#6495ED
Δ 47
MediumPurple
#9370DB
Δ 54

Δ = 色の距離(小さいほど近い)

CSSカラー名とは?

CSSは148種類の名前付きカラーを定義しており、ブラウザは数値コードではなくキーワードでこれらを認識します。スタイルシートに #ff6347 と書く代わりに Tomato と書くことができます。#6a5acd の代わりに SlateBlue と書くことができます。これらの名前はCSS Color Level 3(2011年)とLevel 4(2022年)を通じて標準化されており、CSS 2.1の元々の17色と、初期のUnixウィンドウシステムから受け継いだ140種類のX11カラー名をベースにしています。

カラー名検索ツールは、任意のHEXまたはRGB値を受け取り、最も近いCSSの名前付きカラーを見つけます。マッチングアルゴリズムはRGB空間における2色の距離を計算します。通常はユークリッド距離: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2) を使用します。入力値に対して最も小さい距離を持つ名前付きカラーが結果として返されます。距離がゼロの場合、その名前に完全一致しています。

これはCSSを読みやすく自己文書化された状態に保ちたい場合に役立ちます。background-color: Tomato というルールは、background-color: #ff6347 よりも意図を素早く伝えます。デザインレビューやアクセシビリティ監査、ドキュメント作業でカラーを言語的に参照する際にも便利です。「あの赤みがかったオレンジ」と言う代わりに、「Tomato」と言えます。

このカラー名検索ツールを使う理由

最も近い名前付きカラーを手動で調べるには、148項目のリファレンス表をスクロールしながらHEX値を目視で確認する必要があります。このツールは距離計算を自動で行い、上位5件の近似カラーをHEXコードと距離スコアとともに返します。

🔍
カラーを名前で特定
デザインファイル、カラーピッカー、スクリーンショットからHEXコードを貼り付けると、最も近いCSS名前付きカラーを即座に取得できます。距離順にランク付けされた5件の結果から最適なものを選べます。
🔒
プライバシー優先の処理
すべてのカラーマッチング処理はブラウザ内で実行されます。カラーの値がサーバーに送信されることはありません。ページ読み込み後はオフラインでも動作します。
即時の結果表示
距離計算はキー入力のたびに実行されます。HEX入力の1文字を変更するだけで、ランク付きの結果がリアルタイムで更新されます。
📋
カラー名とHEXコードのコピー
結果をクリックするとカラー名またはHEX値をクリップボードにコピーできます。CSS、Sass変数、Tailwindの設定、デザインツールのフィールドに直接貼り付けられます。

カラー名検索ツールのユースケース

読みやすいCSSの作成
HEXリテラルを名前付きカラーに置き換えるフロントエンド開発者は、コードレビュー時にスキャンしやすいスタイルシートを得られます。名前付きカラーは、カラープレビュー拡張機能なしでも意図を伝えられます。
APIレスポンスへのラベル付け
カラー関連APIを構築するバックエンドエンジニアは、HEXコードとともに人間が読めるラベルを返すことができます。最も近いCSSカラー名を見つけることで、カスタムの名前辞書を管理せずにユーザーへの分かりやすい参照点を提供できます。
アクセシビリティドキュメントの作成
カラーコントラスト問題を記録するQAエンジニアは、バグレポートでカラーを名前で参照できます。「HEXのペアを引用するよりも、DarkSlateGray背景のCrimsonテキストがAAコントラストを満たしていない」と記述する方が明確です。
データビジュアライゼーションの凡例
チャートの系列に名前付きカラーでラベルを付けるデータエンジニアは、カラースウォッチなしでも読める凡例を作成できます。「#6495ed」よりも「CornflowerBlue」という名前は、印刷やモノクロの環境でより役立ちます。
デザインの引き渡し
デザイナーがFigmaやSketchからHEX値としてカラーを共有した場合、開発者は最も近いCSS名を調べ、SlackやPullリクエストのコメントで名前を使って議論できます。
CSSカラーの学習
CSSを学ぶ学習者は任意のHEX値を入力して、近くに存在する名前付きカラーを発見できます。距離の結果を確認することで、148種類の組み込みカラーキーワードへの理解が深まります。

グループ別CSSカラー名リファレンス

CSS Color Level 4仕様は148種類の名前付きカラーキーワードを定義しています。下の表は色相グループ別に整理され、各グループの件数と代表的な名前を示しています。ここに挙げた名前はすべて、すべての現代的なブラウザで動作する有効なCSSカラーキーワードです。

カラーグループ件数カラー名の例
Red / Pink14IndianRed, LightCoral, Salmon, DarkSalmon, Crimson, Red, +8 more
Orange5Coral, Tomato, OrangeRed, DarkOrange, Orange
Yellow10Gold, Yellow, LightYellow, LemonChiffon, PapayaWhip, Moccasin, +4 more
Green19GreenYellow, Chartreuse, LawnGreen, Lime, LimeGreen, SpringGreen, +13 more
Blue / Cyan24Aqua, Cyan, LightCyan, PaleTurquoise, Aquamarine, Turquoise, +18 more
Purple19Lavender, Thistle, Plum, Violet, Orchid, Fuchsia, +13 more
Brown17Cornsilk, BlanchedAlmond, Bisque, NavajoWhite, Wheat, BurlyWood, +11 more
Gray / White27White, Snow, HoneyDew, MintCream, Azure, AliceBlue, +21 more

色距離:ユークリッドRGBと知覚的指標

色距離の測定方法によって、最も近い名前付きカラーとして報告される結果が変わります。2つのアプローチがあり、同じ入力に対して異なる結果を返す場合があります。

ユークリッドRGB距離
R、G、BをそれぞれXYZ空間の軸として扱い、直線距離を計算します: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2)。シンプルで高速なため、このツールで使用しています。ほとんどの実用的なケースでうまく機能しますが、人間の目が青よりも緑に敏感なため、緑から青への遷移では人間の知覚と一致しないことがあります。
CIEDE2000(Delta E)
国際照明委員会(CIE)が定義した知覚的距離の計算式です。まずCIELAB色空間に変換し、明度・彩度・色相に対する補正を適用して人間の知覚に合わせます。精度は高いですが計算がはるかに複雑です。工業用のカラーマッチングには必要ですが、最も近いCSSキーワードを見つける用途にはオーバースペックです。

コード例

RGB空間のユークリッド距離を使って、最も近いCSS名前付きカラーをプログラムで見つけます。各例はHEX文字列を受け取り、CSSの仕様から最も近いカラー名を返します。

JavaScript
// Euclidean distance in RGB space
function nearestCssColor(hex) {
  const r = parseInt(hex.slice(1, 3), 16)
  const g = parseInt(hex.slice(3, 5), 16)
  const b = parseInt(hex.slice(5, 7), 16)

  let bestName = ''
  let bestDist = Infinity

  for (const [name, value] of Object.entries(cssColors)) {
    const r2 = parseInt(value.slice(1, 3), 16)
    const g2 = parseInt(value.slice(3, 5), 16)
    const b2 = parseInt(value.slice(5, 7), 16)
    const dist = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (dist < bestDist) { bestDist = dist; bestName = name }
  }
  return bestName
}

nearestCssColor('#6366f1') // → "SlateBlue"
nearestCssColor('#1e293b') // → "DarkSlateGray"
Python
import math

CSS_COLORS = {
    "Crimson": (220, 20, 60), "SlateBlue": (106, 90, 205),
    "Tomato": (255, 99, 71), "Teal": (0, 128, 128),
    # ... full list of 148 entries
}

def hex_to_rgb(hex_str: str) -> tuple[int, int, int]:
    h = hex_str.lstrip("#")
    return (int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16))

def nearest_css_color(hex_str: str) -> str:
    r, g, b = hex_to_rgb(hex_str)
    best = min(
        CSS_COLORS.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return best[0]

print(nearest_css_color("#6366f1"))  # → SlateBlue
print(nearest_css_color("#ff6347"))  # → Tomato (exact match, distance 0)
Go
package main

import (
	"fmt"
	"math"
	"strconv"
)

type CSSColor struct {
	Name    string
	R, G, B int
}

var colors = []CSSColor{
	{"Crimson", 220, 20, 60},
	{"SlateBlue", 106, 90, 205},
	{"Tomato", 255, 99, 71},
	// ... full list
}

func hexToRGB(hex string) (int, int, int) {
	r, _ := strconv.ParseInt(hex[1:3], 16, 64)
	g, _ := strconv.ParseInt(hex[3:5], 16, 64)
	b, _ := strconv.ParseInt(hex[5:7], 16, 64)
	return int(r), int(g), int(b)
}

func nearest(hex string) string {
	r, g, b := hexToRGB(hex)
	best := ""
	bestDist := math.MaxFloat64
	for _, c := range colors {
		d := math.Sqrt(float64((r-c.R)*(r-c.R) + (g-c.G)*(g-c.G) + (b-c.B)*(b-c.B)))
		if d < bestDist {
			bestDist = d
			best = c.Name
		}
	}
	return best
}

func main() {
	fmt.Println(nearest("#6366f1")) // → SlateBlue
}

よくある質問

CSSでサポートされている名前付きカラーの数は?
CSS Color Level 4は148種類の名前付きカラーキーワードを定義しています。これにはCSS 2.1の元々の17色(black、white、red、blueなど)、CSS 3で追加された140種類のX11カラー名、そしてCSS 4でCSSの作者であるEric Meyerの娘への追悼として追加されたRebeccaPurpleキーワードが含まれます。148種類の名前はすべて大文字・小文字を区別せず、あらゆる現代的なブラウザで動作します。
カラー名検索ツールとカラー変換ツールの違いは?
カラー変換ツールは色をフォーマット間で変換します:HEXからRGB、HSLからHEX、RGBからCMYKなど。カラー名検索ツールは異なる機能を持ちます。148種類のCSSカラー名を検索し、入力値に最も距離が近いものを返します。出力はキーワード(TomatoやSlateBlueなど)であり、数値表現ではありません。
カラーマッチングにおけるユークリッドRGB距離の精度は?
ユークリッドRGB距離は、大多数のカラー検索で正確な結果を返します。RGBモデルは3チャンネルを均等に扱いますが、人間の目は青よりも緑をより強く知覚するため、緑と青の範囲では予期しないマッチが生じる場合があります。ただし、最も近いCSSキーワードを見つけるなどのWeb開発用途では、この差異が実際に問題になることはほとんどありません。
JavaScriptでCSSカラー名を使用できますか?
はい。CSS.supports() API、canvas 2Dコンテキスト、SVGのfill/stroke属性はすべて名前付きカラーを受け付けます。element.style.backgroundColor = 'Tomato' と直接設定することもできます。名前付きカラーはCSSカスタムプロパティやgetComputedStyle()メソッドでも機能しますが、ブラウザは設定方法に関わらず計算値をrgb()形式で返します。
PapayaWhipやBlanchedAlmondのような奇妙な名前はなぜあるのですか?
これらの名前はX11カラーデータベースに由来します。X11は1980年代のUnixワークステーション向けに作られたXウィンドウシステムのもので、名前は正式な命名規則なしに各作者が付けたものです。CSS Level 3でX11カラーが採用された際、後方互換性のために既存の名前がそのまま維持されました。その結果、説明的な名前(DarkRed)、食べ物を参照した名前(PapayaWhip、Chocolate、Salmon)、地名(Peru、Sienna)が混在しています。
RebeccaPurpleは公式のCSSカラーですか?
はい。RebeccaPurple(#663399)は2014年にCSS Color Level 4仕様に追加されました。CSSの作者Eric Meyerの娘であるRebecca Meyerが6歳で脳腫瘍により亡くなったことを悼み、CSSワーキンググループによって提案されました。このカラーは2014年以降にリリースされたすべてのブラウザでサポートされています。
入力したHEX値が2つの名前付きカラーから等距離にある場合はどうなりますか?
2つの名前付きカラーが入力から同じユークリッド距離にある場合、結果は反復順序に依存します。このツールはCSSカラーリストをアルファベット順に反復し、最初に見つかったものを保持します。148種類の名前付きカラーはRGB空間に均等に分布していないため、実際に完全な同距離となるケースはまれです。ほとんどのHEX入力には唯一の最近傍カラーが存在します。