Nazwy Kolorów i Kody Hex

Znajdź wartości hex, RGB i HSL dla dowolnej nazwy koloru albo najbliższą nazwę do podanego kodu. Z odcieniami, rozjaśnieniami i kontrastem WCAG dla 148 kolorów CSS.


Wpisz nazwę koloru albo wklej wartość hex, RGB lub HSL. Działają wszystkie cztery formaty.
Wyczyść

Wszystkie nazwane kolory CSS

Wszystkie 148 nazw kolorów wbudowanych w CSS wraz z wartościami hex i RGB. Kliknij dowolny wiersz, aby otworzyć go powyżej.

Jak działają szesnastkowe kody kolorów

Kod hex to po prostu trzy liczby zapisane w systemie szesnastkowym: ile czerwonego, ile zielonego i ile niebieskiego, każda od 00 do FF. Zatem #FFD700 oznacza czerwony na pełnej mocy, zielony na poziomie 215 z 255 i zupełny brak niebieskiego, co oko odczytuje jako złoto. Znaczenie mają wyłącznie pary dwóch znaków, i dlatego #FFF oraz #FFFFFF to oba biel.

Porównanie hex, RGB i HSL

Wszystkie trzy opisują te same kolory, niosą jedynie inne informacje. Hex jest zwięzły i stanowi zwyczajowy wybór w CSS. RGB to te same liczby dziesiętnie, na których łatwiej liczyć. HSL oddziela odcień od nasycenia i jasności, dzięki czemu ułożenie palety ręcznie jest o wiele prostsze: zachowaj odcień, zmień jasność i masz pasujący wariant.

Dlaczego kontrast ma znaczenie

Tekst musi odcinać się od tła na tyle, by mogły go przeczytać osoby słabowidzące albo osoby patrzące na przyciemniony ekran. Wytyczne dostępności ustalają stosunek 4,5 do 1 dla zwykłego tekstu (AA) i 7 do 1 dla surowszego poziomu AAA. Dużemu tekstowi wystarcza 3 do 1. To narzędzie wylicza stosunek zarówno wobec bieli, jak i czerni, więc od razu widać, co położyć na wierzchu.

Warto wiedzieć

  • CSS ma 148 nazwanych kolorów, a kilka z nich się powtarza: grey i gray, podobnie jak aqua i cyan, są identyczne.
  • Skrócony zapis hex działa tylko wtedy, gdy każda para się powtarza, więc #FFCC00 można zapisać jako #FC0, ale #FFD700 nie da się skrócić.
  • Dodanie dwóch kolejnych znaków hex ustawia przezroczystość, zatem #FFD70080 to złoto o mniej więcej połowicznym kryciu.
  • Budując paletę, zachowaj odcień w HSL i zmieniaj wyłącznie jasność. Kolory zawsze będą wyglądały na spokrewnione.

Najczęściej zadawane pytania

Kolor CSS o nazwie gold to #FFD700, czyli rgb(255, 215, 0). Jest to raczej jasna żółć złota niż odcień metaliczny, ponieważ płaski kolor nie odda połysku prawdziwego złota. Aby uzyskać bardziej metaliczny efekt, projektanci zwykle zestawiają go z ciemniejszymi złotymi barwami, takimi jak #B8860B, który w CSS nosi nazwę darkgoldenrod.

Wpisz nazwę w polu powyżej, a otrzymasz wartości hex, RGB i HSL naraz. Działa to dla wszystkich 148 nazwanych kolorów CSS, a także w drugą stronę: wklej kod hex, a narzędzie wskaże najbliższy nazwany kolor wraz z dokładną odległością.

Niosą dokładnie tę samą informację w innym zapisie. Hex zapisuje każdy z trzech kanałów dwoma znakami szesnastkowymi, więc #FF7F50 to czerwony 255, zielony 127, niebieski 80. RGB zapisuje te same liczby dziesiętnie jako rgb(255, 127, 80). Żaden nie jest dokładniejszy; hex po prostu krócej się wpisuje w CSS.

Odcień, nasycenie i jasność. Odcień to położenie na kole barw od 0 do 360 stopni, nasycenie mówi, jak żywy jest kolor, a jasność biegnie od czerni przy 0% do bieli przy 100%. To najbardziej praktyczny format do projektowania, bo zachowanie odcienia i zmiana samej jasności daje zestaw wariantów, które w oczywisty sposób do siebie pasują.

Specyfikacja CSS zawiera 148 nazwanych kolorów, wliczając transparent. Kilka nazw odnosi się do identycznych wartości, zwłaszcza grey i gray, aqua i cyan oraz magenta i fuchsia. Pełna lista z wartościami hex i RGB znajduje się na tej stronie.

Wytyczne dostępności wymagają co najmniej 4,5 do 1 dla zwykłego tekstu i 3 do 1 dla dużego tekstu, co odpowiada poziomowi AA. Surowszy poziom AAA wymaga 7 do 1. To narzędzie oblicza stosunek twojego koloru wobec bieli i czerni oraz wskazuje, który wynik spełnia wymagania, żebyś od razu wybrał czytelną opcję.

Tak. Ośmioznakowy kod hex dodaje na końcu dwa znaki kanału alfa, gdzie 00 oznacza pełną przezroczystość, a FF pełne krycie. Zatem #FF000080 to czerwony o kryciu około 50%. Wszystkie obecne przeglądarki to obsługują, choć starszy zapis rgba() nadal jest bardzo popularny.

Ponieważ 148 nazwanych kolorów to znikoma próbka spośród około 16,7 miliona, które potrafi wyświetlić ekran. Jeśli twoja wartość nie trafia w jeden z tych dokładnych punktów, narzędzie znajduje najbliższy nazwany kolor, mierząc odległość między nimi w przestrzeni RGB, i uprzedza, że to przybliżenie, a nie zgodność.

Jaki jest kod hex koloru?

Wpisz nazwę koloru, a otrzymasz naraz jego wartości hex, RGB i HSL, albo wklej dowolny kod, aby znaleźć najbliższy nazwany kolor CSS. Gold to #FFD700, coral to #FF7F50, a teal to #008080. Każdy wynik pokazuje też odcienie oraz kontrast wobec czerni i bieli.