カラー名検索
HEXまたはRGB値に最も近いCSSカラー名を検索
カラー(HEX)
最も近いCSS名前付きカラー
Δ = 色の距離(小さいほど近い)
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コードと距離スコアとともに返します。
カラー名検索ツールのユースケース
グループ別CSSカラー名リファレンス
CSS Color Level 4仕様は148種類の名前付きカラーキーワードを定義しています。下の表は色相グループ別に整理され、各グループの件数と代表的な名前を示しています。ここに挙げた名前はすべて、すべての現代的なブラウザで動作する有効なCSSカラーキーワードです。
| カラーグループ | 件数 | カラー名の例 |
|---|---|---|
| Red / Pink | 14 | IndianRed, LightCoral, Salmon, DarkSalmon, Crimson, Red, +8 more |
| Orange | 5 | Coral, Tomato, OrangeRed, DarkOrange, Orange |
| Yellow | 10 | Gold, Yellow, LightYellow, LemonChiffon, PapayaWhip, Moccasin, +4 more |
| Green | 19 | GreenYellow, Chartreuse, LawnGreen, Lime, LimeGreen, SpringGreen, +13 more |
| Blue / Cyan | 24 | Aqua, Cyan, LightCyan, PaleTurquoise, Aquamarine, Turquoise, +18 more |
| Purple | 19 | Lavender, Thistle, Plum, Violet, Orchid, Fuchsia, +13 more |
| Brown | 17 | Cornsilk, BlanchedAlmond, Bisque, NavajoWhite, Wheat, BurlyWood, +11 more |
| Gray / White | 27 | White, Snow, HoneyDew, MintCream, Azure, AliceBlue, +21 more |
色距離:ユークリッドRGBと知覚的指標
色距離の測定方法によって、最も近い名前付きカラーとして報告される結果が変わります。2つのアプローチがあり、同じ入力に対して異なる結果を返す場合があります。
コード例
RGB空間のユークリッド距離を使って、最も近いCSS名前付きカラーをプログラムで見つけます。各例はHEX文字列を受け取り、CSSの仕様から最も近いカラー名を返します。
// 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"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)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
}