Color Name Finder

Що таке CSS-назва кольору?

CSS визначає 148 іменованих кольорів, які браузери розпізнають за ключовим словом замість числового коду. Замість того щоб писати #ff6347 у таблиці стилів, можна написати Tomato. Замість #6a5acd — SlateBlue. Ці назви були стандартизовані в CSS Color Level 3 (2011) та Level 4 (2022) на основі 17 оригінальних кольорів CSS 2.1 і 140 назв X11, успадкованих від ранніх графічних середовищ Unix.

Інструмент пошуку CSS-назви кольору приймає довільне значення hex або RGB і знаходить найближчий іменований CSS-колір. Алгоритм зіставлення обчислює відстань між двома кольорами в просторі RGB — зазвичай евклідову відстань: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Іменований колір із найменшою відстанню до введеного значення стає результатом. Якщо відстань дорівнює нулю, введений колір точно збігається з іменованим.

Це важливо, коли потрібен читабельний, самодокументований CSS. Правило background-color: Tomato передає намір швидше, ніж background-color: #ff6347. Це також корисно, коли потрібно вербально посилатися на колір під час дизайн-рев'ю, аудиту доступності або в документації. Замість «той червонувато-помаранчевий» можна сказати «Tomato».

Навіщо використовувати цей інструмент пошуку CSS-назв кольорів?

Знаходити найближчий іменований колір вручну означає гортати таблицю з 148 записів і порівнювати hex-значення на око. Цей інструмент виконує обчислення відстані автоматично та повертає 5 найближчих збігів із точними hex-кодами та оцінками відстані.

Випадки використання інструменту пошуку CSS-назв кольорів

Довідник іменованих CSS-кольорів за групами

Специфікація CSS Color Level 4 визначає 148 іменованих ключових слів кольорів. Таблиця нижче організовує їх за групами відтінку з кількістю та першими кількома назвами для кожної групи. Кожна назва в цій таблиці є дійсним ключовим словом CSS, що підтримується всіма сучасними браузерами.

Відстань між кольорами: евклідова RGB і перцептивна

Метод вимірювання відстані між кольорами визначає, який іменований колір буде визнано найближчим. Існують два підходи, які можуть давати різні результати для однакового введення.

Приклади коду

Знаходьте найближчий іменований CSS-колір програмно, використовуючи евклідову відстань у просторі RGB. Кожен приклад приймає рядок 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
}

Часті запитання