Utilia

Wyszukiwarka nazw kolorów

Sprawdź nazwę dowolnego koloru. Wpisz kod HEX lub RGB, aby poznać 5 najbliższych nazw spośród ponad 30 000 kolorów i najbliższą nazwę CSS.

Jak korzystać z wyszukiwarki nazw kolorów

  1. Wybierz kolor przyciskiem Wybierz kolor albo wpisz wartość w polu Kod koloru: kod HEX, np. #1E90FF, rgb(30 144 255), hsl(210 100% 56%) lub dowolny inny kolor CSS.
  2. Za pierwszym razem narzędzie wczytuje listę około 32 000 nazw kolorów (kilkaset kilobajtów, raz na wizytę). Potem wyniki pojawiają się w trakcie pisania.
  3. Odczytaj Najbliższa nazwa obok próbki Twój kolor. Jeśli kod znajduje się dokładnie na liście, pojawia się etykieta Dokładne dopasowanie.
  4. Poniżej wyświetlane są 5 najbliższych nazw oraz Najbliższe nazwane kolory CSS, z kodem HEX i odległością (ΔE). Użyj przycisku Kopiuj nazwę lub Kopiuj HEX, aby skopiować wybraną pozycję.
  5. Zmień opcję Dopasuj według na CIEDE2000 (CIELAB) lub Odległość OKLab albo kliknij Losowy kolor, aby poeksperymentować.

Kolor i wyszukiwanie pozostają w twojej przeglądarce.

Skąd pochodzą nazwy

Nazwy pochodzą z color-name-list – otwartej kolekcji prowadzonej przez Davida Aerne i wielu współtwórców na licencji MIT. Zawiera około 32 000 unikalnych nazw z wzorników farb, historycznych słowników barw, przyrody, popkultury i propozycji społeczności, od „Absolute Zero” po „Zucchini”. Każda nazwa należy do dokładnie jednego kodu HEX. Nazwy są w języku angielskim – narzędzie nie tłumaczy ich na polski.

Narzędzie porównuje też twój kolor ze 148 nazwanymi kolorami CSS z CSS Color Level 4 (tomato, rebeccapurple, dodgerblue…), które rozumie każda przeglądarka. Synonimy o tym samym kodzie są pokazywane razem, np. gray / grey albo aqua / cyan. To właśnie tych nazw warto używać w arkuszu stylów, gdy zależy ci na czytelności.

Jak wybierany jest najbliższy kolor

Porównywanie kodów HEX cyfra po cyfrze nie działa: #808080 i #7F8080 są niemal identyczne, ale niewielka zmiana w innym kanale może wyglądać zupełnie inaczej. Narzędzie przelicza każdy kolor do percepcyjnej przestrzeni barw i tam mierzy odległości.

  • CIEDE2000 (CIELAB) to wzór na różnicę barw Międzynarodowej Komisji Oświetleniowej (CIE), używany przy dopasowywaniu kolorów w druku i farbach. Koryguje starszą odległość CIELAB pod kątem tego, jak oko ocenia jasność, nasycenie i odcień, zwłaszcza w błękitach i barwach bliskich szarości. Implementacja jest zgodna z pracą Sharmy, Wu i Dalala (2005) i przetestowana na ich danych referencyjnych.
  • Odległość OKLab to odległość w linii prostej w OKLab – nowoczesnej przestrzeni zaprojektowanej tak, by kroki percepcyjne były równe. Jest mnożona przez 100, aby dało się ją czytać w skali podobnej do ΔE2000. Jest szybsza i często zgadza się z CIEDE2000; gdy się różnią, różnice są subtelne.

Orientacyjnie: ΔE poniżej 1 jest niewidoczne dla większości osób, od 1 do 2 to bardzo niewielka różnica widoczna przy porównaniu obok siebie, a powyżej 5 kolory wyraźnie się różnią. Jeśli najbliższa nazwa ma duże ΔE, twój kolor po prostu leży między nazwanymi kolorami.

Pomysły na wykorzystanie nazw kolorów

  • Nazywaj tokeny projektowe i próbki palety czymś przyjaźniejszym niż kod.
  • Opisz kolor w e-mailu, opisie produktu lub tekście alternatywnym.
  • Znajdź słowo kluczowe CSS bliskie kolorowi marki do szybkich prototypów.

Najczęściej zadawane pytania

Jak nazywa się kolor #1E90FF?

Jego nazwa CSS to dodgerblue – jasny, lazurowy błękit, a duża lista społeczności nazywa go „Clear Chill” (dokładne dopasowanie). W ten sam sposób wpisz dowolny inny kod, aby poznać najbliższe nazwy.

Dlaczego niektóre nazwy są nietypowe?

Lista jest tworzona przez społeczność i zawiera żartobliwe nazwy z popkultury i przyrody. Przejrzyj pięć najbliższych wyników i wybierz tę, która pasuje do kontekstu; nazwane kolory CSS są najbardziej standardowe.

Czy najbliższa nazwa to dokładnie mój kolor?

Tylko wtedy, gdy widzisz etykietę Dokładne dopasowanie, a ΔE wynosi 0. W przeciwnym razie nazwa należy do pobliskiego koloru: porównaj obie próbki obok siebie.

Którą metodę dopasowania wybrać?

CIEDE2000 to uznany standard branżowy i ustawienie domyślne. Odległość OKLab to dobra nowoczesna alternatywa. Wypróbuj obie, gdy kolor leży między dwiema nazwami.

Czy mogę wyszukiwać po nazwie zamiast po kodzie?

Nie w tym narzędziu. Możesz jednak wpisać w polu Kod koloru dowolną ze 148 angielskich nazw kolorów CSS, np. salmon, i zobaczyć inne nazwy do niej zbliżone.