Wyszukiwarka Nazw Kolorów CSS

Czym jest nazwa koloru CSS?

CSS definiuje 148 nazwanych kolorów, które przeglądarki rozpoznają po słowie kluczowym zamiast kodu numerycznego. Zamiast pisać #ff6347 w arkuszu stylów, można napisać Tomato. Zamiast #6a5acd — SlateBlue. Nazwy te zostały ustandaryzowane w CSS Color Level 3 (2011) i Level 4 (2022), na podstawie oryginalnych 17 kolorów z CSS 2.1 oraz 140 nazw kolorów X11 przejętych z wczesnych systemów okienkowych Unix.

Wyszukiwarka nazw kolorów przyjmuje dowolny kod HEX lub wartość RGB i odnajduje najbliższy nazwany kolor CSS. Algorytm dopasowania oblicza odległość między dwoma kolorami w przestrzeni RGB, zazwyczaj jako odległość euklidesową: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2). Wygrywa nazwany kolor o najmniejszej odległości od podanego wejścia. Jeśli odległość wynosi zero, wejście dokładnie odpowiada tej nazwie.

Ma to znaczenie, gdy zależy ci na czytelnym, samodokumentującym się CSS. Reguła background-color: Tomato komunikuje zamiar szybciej niż background-color: #ff6347. Pomaga też wtedy, gdy musisz odnieść się do koloru słownie podczas przeglądu projektu, audytu dostępności lub w dokumentacji. Zamiast mówić „ten czerwonawo-pomarańczowy“, możesz powiedzieć po prostu „Tomato“.

Dlaczego warto używać tej wyszukiwarki nazw kolorów?

Ręczne wyszukiwanie najbliższego nazwanego koloru oznacza przewijanie tabeli referencyjnej ze 148 wpisami i porównywanie wartości HEX na oko. To narzędzie wykonuje obliczenia odległości za ciebie i zwraca 5 najbliższych dopasowań wraz z dokładnymi kodami HEX i wynikami odległości.

Przypadki użycia wyszukiwarki nazw kolorów

Słownik nazwanych kolorów CSS według grup

Specyfikacja CSS Color Level 4 definiuje 148 słów kluczowych nazwanych kolorów. Poniższa tabela porządkuje je według grupy odcieni, podając liczbę i kilka przykładowych nazw dla każdej grupy. Każda wymieniona tutaj nazwa jest prawidłowym słowem kluczowym CSS działającym we wszystkich nowoczesnych przeglądarkach.

Odległość kolorów: euklidesowa RGB a percepcyjna

Metoda pomiaru odległości kolorów wpływa na to, który nazwany kolor zostaje wskazany jako najbliższe dopasowanie. Istnieją dwa podejścia, które mogą dawać różne wyniki dla tego samego wejścia.

Przykłady kodu

Znajdź najbliższy nazwany kolor CSS programowo, korzystając z odległości euklidesowej w przestrzeni RGB. Każdy przykład przyjmuje ciąg HEX i zwraca najbliższą nazwę koloru ze specyfikacji 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
}

Często zadawane pytania