Wyszukiwarka nazw kolorów CSS

Znajdź najbliższe słowo kluczowe CSS

CSS zawiera długą listę nazwanych słów kluczowych kolorów, od znanych jak black, white i red po bardziej szczegółowe, takie jak cornflowerblue, papayawhip i mediumseagreen. Ta wyszukiwarka nazw kolorów pomaga powiązać dowolną wartość HEX z najbliższą dostępną nazwą CSS. Wpisz kolor, a przeglądarka porówna go z wbudowaną mapą słów kluczowych, używając odległości RGB. Najbliższa nazwa, jej wartość HEX i kilka pobliskich alternatyw aktualizują się natychmiast.

Nazwane kolory są przydatne w szybkich demonstracjach, nauczaniu, dokumentacji i czytelnych przykładach. Mogą też pomóc opisać komuś kolor, gdy dokładne tokeny nie są potrzebne. Lista nazwanych kolorów jest jednak ograniczona i nierównomiernie rozłożona: jest wiele bladych różów i błękitów, ale mniej precyzyjnych nowoczesnych odcieni marek, dlatego najbliższe słowo kluczowe należy traktować jako przybliżenie, a nie idealny zamiennik oryginalnego kodu HEX.

Jak działa dopasowanie najbliższego koloru

Każde słowo kluczowe CSS ma stałą wartość czerwieni, zieleni i błękitu. Skrypt konwertuje Twój HEX na RGB, a następnie mierzy kwadrat odległości do każdego nazwanego koloru, porównując trzy kanały. Nazwa o najmniejszej odległości jest pokazywana jako najbliższe dopasowanie. Ta metoda jest szybka i przewidywalna, co czyni ją idealną dla narzędzia działającego po stronie klienta. To nie jest pełny wzór na percepcyjną różnicę kolorów, więc dwa kolory o podobnej odległości RGB nie zawsze wydają się ludzkiemu oku równie bliskie.

Kiedy używać nazw zamiast HEX

W produkcyjnych systemach projektowych HEX, RGB, HSL lub właściwości niestandardowe są zwykle lepsze niż nazwy kolorów, ponieważ zachowują dokładną intencję. Nazwy sprawdzają się w przykładach, szybkich prototypach, wpisach na blogu i rozmowach, w których czytelność jest ważniejsza od precyzji. Jeśli użyjesz nazwanego koloru we wdrażanym CSS, przetestuj go w pełnym interfejsie jak każdy inny token. Najbliższe słowo kluczowe może nadal wymagać kontroli kontrastu, zanim zostanie użyte jako tło, kolor tekstu lub wskaźnik statusu.