Nazwy Kolorów CSS Online
Kompletny przewodnik po wszystkich 148 nazwanych kolorach CSS - z wartosciami HEX, RGB, HSL i natychmiastowa konwersja
Showing 148 colors
Darmowy przewodnik
148 nazwanych kolorow CSS - kompletny przewodnik
Wszystkie 148 kolorow
Kompletny przewodnik po wszystkich nazwanych kolorach CSS zdefiniowanych w CSS Color Level 4.
HEX, RGB i HSL
Sprawdz rownowazniki HEX, RGB i HSL kazdego nazwanego koloru do uzycia w CSS.
Kontrast WCAG
Sprawdz, czy kazdy kolor spelnia wymogi dostepnosci WCAG 2.1 AA i AAA.
Kopiowanie jednym kliknieciem
Kliknij dowolna wartosc, aby skopiowac ja bezposrednio do schowka.
Jak to działa
Trzy kroki, żadnych komplikacji
Szukaj wedlug nazwy lub wartosci koloru
Wpisz nazwe koloru CSS (np. 'tomato', 'rebeccapurple', 'cornflowerblue') lub jego wartosc HEX/RGB, aby natychmiast znalezc ja w tabeli referencyjnej.
Sprawdz rownowazne wartosci
Dla kazdego nazwanego koloru CSS uzyskaj 6-cyfrowa wartosc HEX, komponenty RGB (0-255), wartosci HSL (barwa w stopniach, nasycenie i jasnosc w %) oraz wspolczynnik kontrastu WCAG.
Skopiuj potrzebna wartosc
Kliknij dowolna wartosc, aby skopiowac ja do schowka. Uzyj jej bezposrednio w swoim CSS, Figmie, Tailwindzie lub innym narzedziu do projektowania.
FAQ
Masz pytania?
Specyfikacja W3C CSS Color Level 4 definiuje dokladnie 148 nazwanych kolorow, w tym specjalny 'transparent' (rownowazny rgba(0,0,0,0)) oraz alias 'rebeccapurple' (dodany w 2014 roku na czesc Rebeki Meyer, corki autora CSS Erica Meyera, ktora zmara w wieku 6 lat). Pozostale 146 nazw pochodzi z systemu kolorow X11 MIT, znormalizowanego przez W3C w CSS2.1 (1998) i potwierdzonego w CSS3. CSS definiuje rowniez 'currentColor' i 'inherit', ale sa to slowa kluczowe dziedziczenia, a nie rzeczywiste wartosci kolorow, dlatego nie sa wliczane do 148.
Kolory X11 pochodza z pliku rgb.txt serwera X Window System (MIT X Consortium, 1985). Poczatkowo zawierac liste kolorow stworzona przez PaulaRavelinga z USC's Information Sciences Institute, oparty na systemie Resene Colours z Nowej Zelandii. Wraz z kolejnymi wersjami serwera X lista byla rozszerzana i modyfikowana przez roznych wspolpracownikow. Kiedy W3C przyjelo te nazwy do CSS2.1, staranny dobor wyeliminowal dwuznacznosci, ale zachowal fantazyjne nazwy jak 'blanchedalmond', 'papayawhip', 'peachpuff', 'lemonchiffon' i 'cornsilk', ktore pochodza od nazw amerykanskich deserow i materialow tekstylnych popularnych w latach 80.
Nazwane kolory CSS sa idealne do: szybkiego prototypowania i kodu demonstracyjnego, gdzie czytelnosc jest wazniejsza niz precyzja; kodu edukacyjnego, gdzie opisowe nazwy pomagaja zrozumiec zamiar (np. background: lightgray jest bardziej czytelne niz background: #d3d3d3); tymczasowych wartosci do debugowania; oraz przypadkow, gdzie dokladny kolor moze roznic sie miedzy implementacjami przegladarek. W produkcji preferowane sa wartosci HEX lub HSL: sa jawne, nie wymagaja od dewelopera znajomosci listy nazw i latwiej jest je programowo modyfikowac.
WCAG (Web Content Accessibility Guidelines) 2.1 W3C definiuje minimalne wspolczynniki kontrastu dla czytelnego tekstu. Poziom AA (minimum prawne w wielu jurysdykcjach) wymaga stosunku 4,5:1 dla normalnego tekstu i 3:1 dla duzego tekstu (18pt+ lub 14pt+ pogrubiony). Poziom AAA (doskonałosc) wymaga 7:1 dla normalnego tekstu. Stosunek jest obliczany miedzy wzgledna jaskrawoscia tekstu i tla. Wiele nazwanych kolorow CSS nie spelnia tych wymagan: 'yellow' (#FFFF00) na bialym tle ma stosunek 1,07:1 (nieczytelny), podczas gdy 'black' (#000000) na bialym ma 21:1 (maksimum mozliwe). Kolory takie jak 'navy', 'darkgreen', 'maroon' i 'midnightblue' maja dobry kontrast na bialym tle.
CSS Color Level 4 wprowadza zaawansowane funkcje kolorow, ktore daleko wykraczaja poza 148 nazwanych kolorow. oklch() i oklab() to percepcyjnie jednostajne przestrzenie kolorow, gdzie ta sama numeryczna delta daje wizualnie rowne zmiany kolorow (w odroznieniu od HSL, gdzie ta sama delta jasnosci ma bardzo rozne efekty w zaleznosci od barwy). Funkcja color-mix() pozwala mieszac dwa kolory: color-mix(in oklch, blue 30%, red) tworzy percepcyjnie naturalne mieszanie. display-p3 i rec2020 umozliwiaja dostep do szerokiej gamy kolorow nowoczesnych wyswietlaczy HDR. Funkcje te maja rosnace wsparcie przegladarek od 2022-2023 roku.
7 czerwca 2014 roku Rebecca Alicia Meyer, 6-letnia corka Erica A. Meyera (wspolzalozyciel CSS Working Group, autor definitywnych ksiazek o CSS), zmara na glejaka wielopostaciowego (guz mozgu IV stopnia). W dniu jej smierci spolecznosc CSS zaproponowala nadanie kolorowi #663399 (fioletowy purpurowy, ktory byl jej ulubionym) nazwy 'rebeccapurple' na jej czesc. Propozycja zostala zatwierdzona przez CSS Working Group i dodana do specyfikacji CSS Color Level 4 14 czerwca 2014 roku. To jedyny kolor CSS dodany z powodow emocjonalnych i humanitarnych, i jedyny wsrod 148 z udokumentowana osobista historia, ktora nie jest odziedziczona z systemu X11.
Historia kolorow CSS: od X11 (MIT 1985) do CSS Color Level 4, WCAG 2.1 i oklch
Historia nazwanych kolorow w CSS zaczyna sie w 1985 roku w MIT Laboratory for Computer Science wraz z rozwojem serwera X Window System. Plik rgb.txt w X11 R3 (wydanym w 1988 roku) zawierac pierwsza znormalizowana liste kolorow wedlug nazwy dla graficznych interfejsow uzytkownika w systemach Unix i X. Lista ta zostala pierwotnie skompilowana przez PaulaRavelinga, czesciowo zainspirowanego systemem Resene Colours z Nowej Zelandii. Kiedy Tim Berners-Lee i rozwijajace sie konsorcjum W3C zaczely definiowac standardy CSS w latach 1994-1996, przyjecie systemu nazewnictwa X11 bylo naturalnym wyborem: wszyscy deweloperzy ery Unix juz znali te nazwy. CSS1 (1996) definiowal tylko 16 nazwanych kolorow. CSS2.1 (2011) rozszerzyl liste do 147 kolorow systemu X11 plus 'orange'. CSS Color Level 4 dodal 'rebeccapurple' w 2014 roku, osiagajac obecne 148.
148 nazwanych kolorow CSS prezentuje techniczne i historyczne ciekawostki, ktore powinien znac kazdy deweloper webowy. Najbardziej godna uwagi niespojnosc polega na tym, ze CSS rozpoznaje zarowno 'grey', jak i 'gray' (i ich warianty) jako identyczne kolory, dziedziczac anglojezyczna dwuznacznosc pisowni. Innym szczegolnym przypadkiem jest 'lime' (#00FF00) vs 'green' (#008000): w CSS 'green' to nie czysty zielony RGB, lecz ciemna zielen o 50% intensywnosci, podczas gdy 'lime' to czysty zielony RGB. Kolory 'aqua' i 'cyan' sa doskonalymi synonimami (#00FFFF), podobnie jak 'fuchsia' i 'magenta' (#FF00FF). Kolor 'rebeccapurple' ma wartosc #663399, rownowazna rgb(102, 51, 153) lub w HSL: hsl(270, 50%, 40%).
W kontekscie nowoczesnego tworzenia stron internetowych nazwane kolory CSS pozostaja istotne, ale nalezy je rozumiec w szerszym ekosystemie specyfikacji kolorow. CSS Color Level 4 wprowadza model kolorow oklch (Oklab-based Lightness Chroma Hue), ktory pokonuje ograniczenia HSL: w HSL dwa kolory z ta sama jasnoscia L, ale rozna barwa H wydaja sie miec rozna wizualna jasnosc (zolty wydaje sie znacznie jaśniejszy niz niebieski przy tej samej wartosci L), podczas gdy oklch jest percepcyjnie jednostajny. Składnia to: oklch(jasnosc% intensywnosc barwa), na przyklad: oklch(70% 0.25 145) dla zywiozlej zieleni. Narzedzia takie jak Figma (od 2023) i Tailwind CSS 4.0 (wydany w 2025) juz uzywa przestrzeni kolorow oklch do definiowania palet.