Jeśli kiedykolwiek próbowałeś zaprojektować stronę internetową, stworzyć logo lub wydrukować wizytówkę, natychmiast natknąłeś się na mylącą zupę alfabetyczną kodów kolorów: HEX, RGB, HSL i CMYK. Dlaczego istnieje tak wiele sposobów na opisanie prostego odcienia błękitu?
Prawda jest taka, że komputery i drukarki „widzą” światło w zasadniczo różny sposób. Co więcej, sposób, w jaki komputery przetwarzają światło, niekoniecznie pokrywa się z tym, jak ludzki mózg interpretuje kolor. Zrozumienie tych formatów to nie tylko teoria — pozwoli Ci uniknąć wdrażania witryn internetowych o niedostępnych współczynnikach kontrastu lub płacenia tysięcy dolarów za ulotki marketingowe, których wydruki wyglądają na zabłocone i ciemne.
Światło addytywne a subtraktywne
Zanim zagłębimy się w kod, musimy ustalić fizyczną różnicę między ekranami a papierem.
- Ekrany emitują światło (dodatkowe). Jeśli wyłączysz wszystkie piksele, ekran będzie czarny. Aby uzyskać biel, ekran emituje światło czerwone, zielone i niebieskie z maksymalną intensywnością.
- Papier odbija światło (subtraktywa). Pusta kartka papieru jest już biała (odbija całe światło). Aby uzyskać kolor czarny, drukarka nakłada na siebie atrament cyjan, magenta i żółty, aby pochłonąć całe światło.
1. RGB (czerwony, zielony, niebieski)
RGB jest językiem ojczystym monitora komputera. Definiuje kolor, informując ekran dokładnie, ile światła czerwonego, zielonego i niebieskiego ma wyemitować. Każdy kanał jest reprezentowany przez liczbę całkowitą od 0 (wyłączony) do 255 (maksymalna intensywność).
Na przykład czysta czerwień to rgb(255, 0, 0). Czysta biel to rgb(255, 255, 255).
Najlepsze do: edycji obrazów (Photoshop) i fotografii cyfrowej. Bezpośrednio manipuluje pikselami sprzętowymi.
2. HEX (szesnastkowy)
Kody HEX, takie jak #FF5733, są dokładnie tym samym, co RGB. Jedyną różnicą jest matematyka. Zamiast używać liczb o podstawie 10 (0-255), używa liczb szesnastkowych o podstawie 16 (00 do FF). Pierwsze dwie litery oznaczają kolor czerwony, dwie środkowe zielone, a dwie ostatnie niebieskie.
Dlaczego twórcy stron internetowych używają HEX? Ponieważ jest krótszy. Napisanie #FFF jest znacznie szybsze dla programisty CSS niż pisanie rgb(255, 255, 255).
Najlepsze do: Zakodowania na stałe kolorów marki w CSS. Jest zwięzły i można go łatwo kopiować między narzędziami do projektowania, takimi jak Figma, a edytorami kodu.
Natychmiastowa konwersja kodów kolorów
Nie trać czasu na wykonywanie w głowie obliczeń szesnastkowych. Skorzystaj z naszego narzędzia offline, aby błyskawicznie tłumaczyć pomiędzy HEX, RGB, HSL i CMYK z podglądem wizualnym.
Otwórz Konwerter kolorów3. HSL (Barwa, Nasycenie, Jasność)
RGB i HEX są okropne dla ludzi. Jeśli pokażę Ci kod #4A90E2, nie będziesz łatwo zgadnąć, jaki to kolor. Jeśli poproszę cię, abyś „przyciemnił ten niebieski o 20%”, wykonanie obliczeń w formacie HEX jest prawie niemożliwe.
HSL został zaprojektowany z myślą o ludzkim mózgu. Definiuje kolor w 360-stopniowym kole kolorów.
- Odcień (0-360): rzeczywisty kolor. 0 to czerwony, 120 to zielony, 240 to niebieski.
- Nasycenie (0-100%): intensywność koloru. 0% jest szare, 100% jest żywe.
- Jasność (0-100%): stopień ciemności lub jasności. 0% to kolor czarny, 100% to kolor biały.
Jeśli kolor niebieski Twojej marki to hsl(210, 100%, 50%) i chcesz uzyskać ciemniejszy odcień dla efektu najechania przyciskiem, po prostu zmień ostatnią liczbę: hsl(210, 100%, 40%). To magia dla architektury CSS.
4. CMYK (cyjan, magenta, żółty, klucz/czarny)
CMYK jest przeznaczony wyłącznie dla świata fizycznego. Określa sposób mieszania atramentu fizycznego przez drukarkę. Ponieważ atrament pochłania światło, przestrzeń kolorów jest fizycznie mniejsza niż RGB. Ekran może emitować żywe neonowe odcienie zieleni (w formacie RGB), których drukarka fizycznie nie może wydrukować (w formacie CMYK).
Złota zasada: nigdy nie wysyłaj pliku RGB do komercyjnej drukarki. Drukarka na siłę przekonwertuje go na CMYK, w wyniku czego żywe kolory będą wyglądać na zabłocone i wyblakłe. Zawsze konwertuj swoje projekty do formatu CMYK przed wysłaniem ich do drukarni.
Matryca porównawcza
| Format | Environment | Readability | Primary Use Case |
|---|---|---|---|
| HEX | Digital | Low | Standard web design, copying from Figma |
| RGB | Digital | Medium | Manipulating alpha transparency (rgba) |
| HSL | Digital | High | Dynamic CSS theming, Dark Modes |
| CMYK | Physical Print | N/A | Business cards, flyers, packaging |
Często zadawane pytania (FAQ)
Jakiego formatu powinienem użyć w trybie ciemnym CSS?
Do motywów dynamicznych zawsze używaj HSL. Utrzymując stałą barwę i nasycenie, można po prostu odwrócić wartość Jasności, aby idealnie przełożyć kolor z trybu jasnego na kolor z trybu ciemnego.
Czy mogę używać CMYK na stronie internetowej?
Nie. Przeglądarki internetowe obsługują wyłącznie formaty kolorów oparte na świetle (RGB, HEX, HSL). Jeśli prześlesz plik JPEG w formacie CMYK na stronę internetową, niektóre przeglądarki będą próbowały go wyrenderować, ale kolory będą wyglądać na zepsute lub odwrócone.
Co to jest kanał alfa?
Litera „A” w RGBA lub HSLA oznacza Alpha, która kontroluje przezroczystość. Wartość alfa 1,0 jest całkowicie trwała, a wartość 0,5 oznacza 50% przezroczystości. Nowoczesny CSS umożliwia teraz przezroczystość bezpośrednio w kodach HEX, dodając dwie dodatkowe cyfry (np. #FFFFFF80).