Nazwy kolorów HTML: wszystkie 148 z HEX, RGB, HSL i OKLCH | We.Inc
Wszystkie 148 nazw kolorów CSS i HTML z kodami HEX, RGB, HSL i OKLCH, kontrastem na bieli i czerni, najbliższą klasą Tailwind oraz sortowaniem po odcieniu, jasności lub rodzinie.
Nazwy kolorów HTML
CSS definiuje 148 nazw kolorów, od aliceblue do yellowgreen, i każda przeglądarka rozumie je w HTML i CSS. Dziewięć z nich to alternatywna pisownia innej nazwy, na przykład grey dla gray i cyan dla aqua, więc różnych kolorów jest 139. Poniższa tabela podaje dla każdego wartości HEX, RGB, HSL i OKLCH, kontrast tekstu i najbliższą klasę Tailwind.
Fakty o nazwanych kolorach
Pytanie
Odpowiedź
Ile jest nazw?
148 (139 różnych kolorów)
Czy wielkość liter ma znaczenie?
Nie: Red, RED i red to to samo
Gdzie są zdefiniowane?
CSS Color Module Level 4
Najnowsza nazwa
rebeccapurple (#663399), dodana w 2014
Szukaj po nazwie lub kodzie HEX, filtruj według rodziny kolorów, sortuj po odcieniu, jasności lub nazwie i kopiuj dowolną wartość jednym kliknięciem. Każdy wiersz pokazuje też, czy czarny lub biały tekst jest czytelny na danym kolorze i który kolor Tailwind jest najbliższy.
Wpisz fragment nazwy lub kod HEX w polu wyszukiwania, aby przefiltrować tabelę.
Wybierz rodzinę, na przykład Niebieskie lub Brązowe, aby zobaczyć tylko te kolory. Rodziny są pogrupowane według postrzeganego odcienia.
Sortuj po nazwie, po odcieniu (aby zobaczyć kolory jako widmo) lub po jasności (od ciemnych do jasnych).
Kliknij dowolną wartość, aby ją skopiować. Kolumny kontrastu pokazują współczynnik dla białego i czarnego tekstu na danym kolorze.
Nazwane kolory przydają się w prototypach i przykładach, ale prawdziwy projekt zwykle wymaga dokładnych wartości marki. Przed startem zamień nazwy na HEX lub custom properties.
Niektóre nazwy są mylące: darkgray (#A9A9A9) jest jaśniejszy niż gray (#808080), a lightgoldenrodyellow to blady kremowy, a nie żółty.
Używaj transparent i currentColor obok nazw. To również słowa kluczowe CSS, ale nie należą do 148, bo nie są stałymi kolorami.
Sprawdź kontrast, zanim użyjesz nazwanego koloru do tekstu. Wiele jaskrawych, takich jak yellow, gold i lime, nie przechodzi testu na białym tle.
Najczęściej zadawane pytania
Ile jest nazw kolorów HTML?
W CSS Color Module Level 4, z którego korzysta HTML, jest 148 nazwanych kolorów. Dziewięć par to aliasy tego samego koloru: aqua i cyan, fuchsia i magenta oraz siedem nazw, które można pisać z gray lub grey, na przykład darkgray i darkgrey. Lista opisuje więc 139 różnych kolorów.
Czy nazwy kolorów działają w każdej przeglądarce?
Tak. Wszystkie 148 nazw obsługuje każda współczesna przeglądarka. Pierwotne 16 nazw z HTML 4, takich jak red, navy i teal, działa od dziesięcioleci; pozostałe pochodzą z listy kolorów X11 i również od dawna są obsługiwane.
Dlaczego darkgray jest jaśniejszy niż gray?
Nazwy pochodzą z dwóch różnych źródeł. gray zdefiniowano w HTML przy jasności 50% (#808080), a darkgray pochodzi ze starszej listy kolorów X11, gdzie miał wartość #A9A9A9. Gdy listy połączono, obie wartości pozostawiono bez zmian.
Czym jest rebeccapurple?
To #663399, dodany do CSS w 2014 roku dla upamiętnienia Rebeki Meyer, córki autora CSS Erica Meyera. To najnowsza nazwa koloru dodana do CSS.
Używać nazw kolorów czy kodów HEX?
W produkcyjnych projektach używaj wartości HEX, RGB, HSL lub OKLCH, najlepiej zapisanych jako custom properties, bo nazwy obejmują tylko 148 stałych punktów. Nazwy sprawdzą się w szybkich testach, dokumentacji i nauce, gdzie czytelność liczy się bardziej niż precyzja.
Skąd pochodzą nazwy
HTML 4 zdefiniował 16 podstawowych nazw kolorów: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal i aqua. Przeglądarki przejęły też znacznie dłuższą listę z X Window System, a CSS3 uczynił ją oficjalną. CSS Color Level 4 dodaje rebeccapurple, a resztę pozostawia bez zmian.
Ponieważ nazwy X11 wybierali ludzie, a nie wzór, są nierównomierne. Jest wiele odcieni prawie białych i kilka niemal identycznych zieleni, a niektóre odcienie nie mają żadnej nazwy. Posortowanie tabeli po odcieniu wyraźnie pokazuje te luki.
Jak czytać dodatkowe kolumny
OKLCH opisuje kolor jako jasność, chromę (nasycenie barwy) i odcień w przestrzeni zaprojektowanej tak, by równe kroki wyglądały na równe. Przydaje się do budowania palet z nazwanego koloru, bo zmiana samej jasności zachowuje ten sam wygląd odcienia.
Kolumny kontrastu używają wzoru WCAG 2. Dla zwykłego tekstu potrzeba 4.5:1 lub więcej, a dla dużego tekstu 3:1. Kolumna Tailwind podaje klasę z domyślnej palety Tailwind, która wygląda najbardziej podobnie, wraz z wartością różnicy: poniżej 2 trudno je rozróżnić.
Nazwa
HEX
RGB
HSL
OKLCH
Na bieli
Na czerni
Najbliższy Tailwind
Czerwone
Różowe
Pomarańczowe
Żółte
Brązowe
Zielone
Cyjanowe
Niebieskie
Fioletowe
Białe
Czarne i szare
Kopiuj
Wszystkie 148 w skrócie, według odcienia
Wszystkie 148 nazw kolorów
Szukaj nazwy lub HEX
Sortuj według
Nazwa
Odcień (widmo)
Jasność (od ciemnych do jasnych)
Pokazano: {n}
· Skopiowano {v}
Rodzina kolorów
Wszystkie
Nazwane kolory CSS i HTML
Próbka
różnica {d}
Zielone wartości kontrastu spełniają 4.5:1, co wystarcza dla tekstu głównego. Próbka Aa używa czarnego lub białego, zależnie od tego, który jest czytelniejszy.