Narzędzie do nazywania kolorów

Wpisz kod HEX i poznaj najbliższą nazwaną barwę z bazy CSS, Pantone i ludzkiego słownika kolorów. Znajdź kolory podobne z nazwami. Bezpłatnie.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Tryb

Kolor

Dołącz styl Opcja narzędzia

Dołącz nazwę CSS Opcja narzędzia

Wynik

Name: Intense Medium Blue
HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217°, 91%, 60%)
Closest CSS name: Dodger Blue (#1E90FF)
Tags: #blue #mid #high-saturation #cool #neon #accent

Nazwa koloru

Intense Medium Blue

HEX

#3B82F6

RGB · HSL

59, 130, 246 · hsl(217°, 91%, 60%)

Najbliższy znany odcień

Dodger Blue (#1E90FF)

Odległość RGB

33,4

0 = idealne trafienie w znany kolor

raw: #blue #mid #high-saturation #cool #neon #accent

Ściąga: znane nazwy kolorów z bazy narzędzia

Te wpisy (HEX + RGB) silnik używa do dopasowania najbliższego znanego odcienia — porównuje odległość w przestrzeni RGB i wybiera kolor o najmniejszej odległości. Wartości 1:1 z kodem narzędzia.

Nazwa PL	Nazwa (CSS)	HEX	RGB
Czarny	Black	`#000000`	rgb(0, 0, 0)
Biały	White	`#FFFFFF`	rgb(255, 255, 255)
Szary	Gray	`#808080`	rgb(128, 128, 128)
Czerwony	Red	`#FF0000`	rgb(255, 0, 0)
Pomarańczowy	Orange	`#FFA500`	rgb(255, 165, 0)
Żółty	Yellow	`#FFFF00`	rgb(255, 255, 0)
Zielony	Green	`#008000`	rgb(0, 128, 0)
Cyjan	Cyan	`#00FFFF`	rgb(0, 255, 255)
Niebieski	Blue	`#0000FF`	rgb(0, 0, 255)
Purpurowy	Purple	`#800080`	rgb(128, 0, 128)

Nota: to podzbiór bazy (10 najpopularniejszych nazw) — pełna lista w silniku zawiera 32 kolory, m.in. Gold, Teal, Navy, Coral, Salmon czy Chocolate.

Nazwy kolorów w praktyce

Nazwy kolorów a dostępność (kontrast)

Ładna nazwa nie mówi nic o czytelności: „Soft Light Blue” może mieć kontrast do białego tekstu poniżej normy WCAG 4,5:1. Po wygenerowaniu nazwy sprawdź jasność (L w HSL) — tło poniżej ~50% zwykle wymaga jasnego tekstu, powyżej ~60% ciemnego. Nazwa trafia do człowieka, kontrast do audytu.

Skąd biorą się opisowe nazwy i hashtagi

Silnik rozbija kolor na barwę (H), nasycenie (S) i jasność (L): z H pochodzi rodzina (red, blue, teal…), z L ton (dark, mid, light…), a z S intensywność (muted, soft, vivid…). Te same reguły budują hashtagi — dlatego jeden kolor zawsze dostanie spójny, powtarzalny zestaw nazw i tagów.

„Najbliższy odcień” to przybliżenie

Dopasowanie liczy prostą odległość w RGB (δR² + δG² + δB²), więc dwa wizualnie różne odcienie mogą wskazać ten sam znany kolor. Kafelek „Odległość RGB” pokazuje, jak daleko od znanej nazwy jesteś: 0 to trafienie 1:1, wartości powyżej ~60 oznaczają tylko luźne skojarzenie.

Wskazówka: wyniki aktualizują się na żywo podczas wpisywania koloru (HEX, rgb() lub hsl()) — kafelki pokazują nazwę i najbliższy znany odcień, a wynik skopiujesz lub pobierzesz jako plik .txt.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator nazw kolorów – zidentyfikuj i nazwij każdy odcień HEX

Kolor #7C4DFF to "Średni fiolet slaty" czy "Jasna lilia"? Narzędzie identyfikuje każdy kolor HEX i dopasowuje do najbliższej nazwanej barwy z bazy CSS Named Colors, listy X11, słownika Crayola i polskich nazw kolorów. Użyteczne przy dokumentowaniu palet kolorów.

nazwy kolorów HEX identyfikator koloru znajdź nazwę koloru color name finder

Źródła baz nazw kolorów

CSS Named Colors (148 nazw): oficjalne nazwy CSS – aqua, coral, dodgerblue. X11 Color Names (752): rozbudowana lista z systemu X Window. Crayola (133): kredki – Razzmatazz, Tickle Me Pink. Pantone PMS: standardy poligraficzne. Wikipedia Color List: polskie nazwy w lokalizacji PL. "Xkcd Color Survey" (954): nazwy nadawane przez 200 000 internautów.

Jak działa dopasowanie do bazy

Przekształcenie HEX na przestrzeń kolorów LAB (percepcyjnie równomierną). Obliczenie odległości ΔE (Delta-E) do każdego koloru w bazie. Najniższa ΔE = najbardziej podobna nazwa. ΔE < 1: praktycznie identyczne. ΔE 1-3: ledwo zauważalna różnica. ΔE > 10: wyraźna różnica.

Polskie nazwy kolorów

Podstawowe: czerwony, niebieski, zielony, żółty, fioletowy, pomarańczowy, różowy, brązowy, szary, biały, czarny. Rozszerzone: karmazynowy, szkarłatny, amarant, burgund, turkus, szmaragdowy, kobalt, granat, oliwkowy, beżowy, piaskowy, łososiowy, koralowy. Moda i design: ecru, taupe, greige (szaro-beżowy), mauve (brudny fiolet).

Zastosowania zawodowe

Dokumentowanie palety designu z czytelnymi nazwami. Komunikacja z klientem (zamiast HEX – "ciemna zieleń butelkowa"). Dobór farb malarskich (RAL, NCS) na podstawie HEX. Eksport do Figma: Style Dictionary generuje nazwy tokenów. Brand book: przełożenie hex na ludzkie nazwy.

Od kodu HEX do przestrzeni, w której porównuje się kolory

Kluczowa decyzja w narzędziu to nie samo porównywanie barw, ale przestrzeń, w której to porównanie się odbywa. Gdyby odejmować od siebie kanały R, G i B bezpośrednio, wynik miałby niewiele wspólnego z tym, co widzi oko: dwie barwy oddalone w RGB o tę samą wartość potrafią wyglądać zupełnie inaczej, zwłaszcza w ciemnych i w jasnych partiach. Dlatego kod HEX przechodzi najpierw przez standardowy łańcuch konwersji: rozbicie na trzy kanały, sprowadzenie ich do zakresu 0–1, odwrócenie korekcji gamma (linearyzacja), a następnie przeliczenie na współrzędne XYZ względem białego punktu odniesienia używanego przez przeglądarki. Na końcu te współrzędne trafiają do przestrzeni LAB.

LAB ma trzy osie: L opisuje jasność, a przejście od zieleni do czerwieni, b przejście od błękitu do żółcieni. Jej zaletą jest to, że jednakowa różnica liczbowa odpowiada w przybliżeniu jednakowej różnicy w odbiorze. Odległość między kolorem wpisanym a kolorem z bazy liczy się jako pierwiastek z sumy kwadratów różnic na trzech osiach — to właśnie ΔE. Wynik jest jedną liczbą: zero oznacza barwy identyczne, im większa wartość, tym dalej od siebie leżą oba odcienie.

Dopasowanie to przeszukanie całej bazy i wybranie wpisu o najniższym ΔE. Narzędzie traktuje przy tym wszystkie nazwy jednakowo — nie faworyzuje krótszych, popularniejszych ani polskich. Jeśli wpisany kolor leży dokładnie na wartości z bazy, zwracana jest nazwa o zerowej odległości. Jeśli leży między dwoma nazwanymi odcieniami, wygrywa bliższy, nawet gdy różnica jest wyraźnie widoczna. Dlatego przy wyniku warto patrzeć nie tylko na samą nazwę, ale też na to, o ile wyprzedziła kolejne propozycje.

Przykład krok po kroku: kolor #FF7F50

Wpisujesz w pole narzędzia kod #FF7F50.
Kod zostaje rozbity na trzy pary znaków i przeliczony na liczby: FF to 255, 7F to 127, 50 to 80 — czyli R=255, G=127, B=80.
Kanały są linearyzowane i przeliczane najpierw na współrzędne XYZ, a potem na trzy wartości LAB opisujące jasność oraz położenie na osi zieleń–czerwień i błękit–żółć.
Narzędzie liczy ΔE tego koloru do każdego wpisu w wybranej bazie i sortuje wyniki rosnąco. W bazie CSS Named Colors istnieje wpis o dokładnie tym samym kodzie — coral.
Odległość dla tej pary wynosi 0,00, czyli barwy są tożsame, a jako pierwsza zwracana jest nazwa coral (koralowy). To najniższa możliwa wartość — mieści się poniżej progu ΔE < 1, który oznacza praktycznie identyczne kolory.
Dla porównania wpisujesz wariant #FF7F51, różniący się o jeden stopień w kanale niebieskim. Najbliższą nazwą nadal pozostaje coral, ale odległość przestaje być zerowa — widać wtedy, jak blisko nazwanego wzorca leży wpisany odcień i czy wynik jest jeszcze bezpieczny do użycia w dokumentacji.

Bazy nazw użyte w dopasowaniu

Baza nazw	Liczba wpisów	Co wnosi do wyniku
CSS Named Colors	148	Nazwy rozpoznawane wprost przez przeglądarki i arkusze stylów, np. tomato, seagreen, rebeccapurple.
X11 Color Names	752	Historyczna lista z systemu X Window; zawiera warianty numerowane i odcienie nieobecne w CSS.
Crayola	133	Nazwy marketingowe z kredek, np. Mauvelous lub Jazzberry Jam; przydatne w materiałach dla dzieci i w brandingu.
xkcd Color Survey	954	Nazwy nadane przez internautów w ankiecie — potoczne i opisowe, np. barf green.
Pantone PMS	brak stałej liczby wpisów	Standard poligraficzny; operuje numerami próbek, a nie nazwami potocznymi.
Wikipedia — lista kolorów (PL)	brak stałej liczby wpisów	Polskie odpowiedniki nazw, gdy wynik ma trafić do odbiorcy bez znajomości angielskiego.
Razem w czterech bazach liczbowych	1987	Suma wpisów przed odjęciem duplikatów — część nazw powtarza się między bazami.

Jak korzystać z wyniku

Sprawdź kilka najbliższych nazw, nie tylko pierwszą. Druga i trzecia propozycja pokazują, czy kolor leży jednoznacznie, czy na granicy dwóch nazwanych odcieni.
Dobieraj bazę do odbiorcy. Dla kodu i dokumentacji technicznej sensowna jest baza CSS, dla materiałów marketingowych nazwy Crayola, a dla klienta polskie odpowiedniki z listy Wikipedii.
Rozwijaj zapis skrócony przed wpisaniem. Kod trzyliterowy trzeba zamienić na pełny, powtarzając każdy znak, np. #F80 na #FF8800.
Zapisuj nazwę razem z kodem HEX. Nazwa jest opisowa i może się zmienić przy zmianie bazy, HEX pozostaje jednoznaczny.
Rozróżniaj podobne barwy w palecie. Jeśli dwie pozycje dostają tę samą nazwę, dopisz do nich wyróżnik, np. jasny i ciemny, zamiast polegać na jednym słowie.

Czego wynik nie uwzględnia

Warunków wyświetlania. Narzędzie porównuje wartości zapisane w pliku, a nie to, jak kolor wygląda na konkretnym ekranie. Profil monitora, kalibracja i jasność otoczenia zmieniają odbiór barwy, choć kod pozostaje ten sam.
Różnic wagi poszczególnych osi. Odległość jest liczona jako jedna liczba dla całej barwy. W praktyce oko inaczej ocenia przesunięcie w jasności, a inaczej w odcieniu, więc dwie pary o tej samej wartości ΔE mogą sprawiać różne wrażenie.
Umowności nazewnictwa. Granice między nazwami są płynne, a bazy tworzono według różnych kryteriów — część wpisów w ankiecie xkcd ma charakter żartobliwy i nie nadaje się na etykietę w dokumentacji.
Zgodności z wzornikami farb i druku. RAL, NCS i Pantone to odrębne systemy oparte na pigmentach i recepturach, a nie na świetle ekranu. Kolor dobrany na podstawie HEX wymaga potwierdzenia we wzorniku.

Najczęstsze pytania

Dlaczego ten sam kolor może mieć wiele nazw?

Brak globalnego standardu nazw kolorów. Różne kultury mają różną liczbę podstawowych kategorii barw (np. języki z 2-11 podstawowymi nazwami). Crayola wymyśla poetyczne nazwy (Maroon 5 → "Brick Red"). CSS zdefiniowało 148 nazw historycznie – część to dziś nieużywane terminy komputerowe (khaki, peru, bisque).

Co to jest ΔE i jak go interpretować?

ΔE (Delta-E) mierzy percepcyjną różnicę między kolorami w przestrzeni LAB. CIE76: najprostszy (tylko odległość Euklidesowa w LAB). CIEDE2000: uwzględnia nieliniowości percepcji, bardziej precyzyjny. ΔE < 2: w praktyce kolory nierozróżnialne. ΔE 2-10: widoczna różnica ale ten sam "rodzaj" koloru.

Jak działa percepcja barw u ludzi?

Czopki siatkówki: L (czerwony, ~560nm), M (zielony, ~530nm), S (niebieski, ~430nm). Sygnał przetwarzany w kanały: achromatyczny (jasność), czerwono-zielony, żółto-niebieski. Stąd przestrzenie LAB/LCH modelują percepcję przez te kanały. Daltonizm: brak lub dysfunkcja jednego typu czopków.

Jak nazwy kolorów różnią się między kulturami?

Angielski ma osobne słowa "blue" i "green". Rosyjski ma osobne słowa na jasnoniebieski (goluboy) i ciemnoniebieski (siniy). Japoński "aoi" oznaczał oba (zieleń i niebieski) historycznie. Pirahã (Amazonia): tylko 2 kategorie barw (ciemny/jasny). Badanie: Regier & Kay 2009 – "Basic Color Terms".

Jak tworzyć nazwy dla tokenów designu?

Convention 1: opisowa nazwa (color-primary-500, color-neutral-200). Convention 2: kontekstualna (color-button-background, color-text-muted). Convention 3: ludzka nazwa + numer (cobalt-500). Style Dictionary (Amazon): automatyczne generowanie nazw tokenów z palet. Figma Variables: najnowszy standard.

Jak znaleźć nazwę koloru, jeśli mam tylko kod HEX?

Wpisz kod w narzędzie i odczytaj pierwszą propozycję — to wpis o najniższej odległości ΔE od Twojej barwy. Sprawdź też kolejne wyniki, żeby ocenić, czy dopasowanie jest jednoznaczne.

Którą bazę nazw wybrać do dokumentacji projektu?

Do kodu i arkuszy stylów użyj bazy CSS, bo tylko te nazwy zadziałają w przeglądarce. Do opisów dla klienta wybierz polskie odpowiedniki, a nazwy Crayola traktuj jako materiał pomocniczy przy brandingu.

Czy nazwy kolorów Crayola można stosować w kodzie CSS?

Nie. Przeglądarki rozpoznają wyłącznie nazwy z listy CSS Named Colors, liczącej 148 pozycji. Nazwy z bazy Crayola ani X11 spoza tej listy zostaną zignorowane, więc w CSS trzeba podać kod HEX lub RGB.

Jak nazwać kolor po polsku, gdy baza podaje angielską nazwę?

Przełącz bazę na listę polskich nazw kolorów albo potraktuj angielską nazwę jako wskazówkę — coral to koralowy, a odcienie z kredek zwykle nie mają ustalonego polskiego odpowiednika. Wtedy lepiej opisać barwę słowami: ciemna zieleń butelkowa, brudny fiolet.

Czy wynik dopasowania wystarczy do doboru farby?

Nie. Narzędzie pracuje na wartościach ekranowych, a farba, tusz czy tkanina wyglądają inaczej w zależności od podłoża i światła. Nazwę i kod HEX traktuj jako punkt wyjścia, a ostateczny wybór potwierdź we wzorniku producenta.

Powiązane narzędzia: konwerter HEX na HSL, generator palet kolorów i sprawdzanie kontrastu kolorów.