HEX, RGB, HSL czy CMYK: którego formatu koloru użyć i kiedy

Ten sam kolor, cztery różne języki

Wybierz dowolny kolor — powiedzmy ciepły koral. Teraz opisz go na cztery sposoby:

• HEX: #E8635A
• RGB: rgb(232, 99, 90)
• HSL: hsl(4, 75%, 63%)
• CMYK: 0, 57, 61, 9

Wszystkie cztery opisują dokładnie ten sam kolor. To nie są konkurencyjne standardy — to różne reprezentacje koloru, zoptymalizowane pod różne konteksty. Zamieszanie bierze się stąd, że nie wiemy, który kontekst wymaga którego formatu.

Ten przewodnik omawia każdy format prostym językiem: czym jest, jak działa, kiedy go używać i kiedy jest złym wyborem. Jeśli pracujesz z kolorem w jakiejkolwiek roli — projektowanie, programowanie, druk, marketing — uchroni cię to przed wyborem niewłaściwego formatu do projektu.

HEX: standard sieci

Czym jest

HEX (szesnastkowy) to sześcioznakowy kod poprzedzony krzyżykiem: #E8635A. Każda para znaków odpowiada kanałom czerwonemu, zielonemu i niebieskiemu w zapisie o podstawie 16 (od 00 do FF).

Funkcjonalnie jest identyczny z RGB — tylko zapisany inaczej. #E8635A to to samo co rgb(232, 99, 90). HEX to po prostu bardziej zwięzły sposób zapisu wartości RGB.

Kiedy używać HEX

• CSS i tworzenie stron — HEX to domyślny zapis koloru w CSS. Rozumie go każda przeglądarka. color: #E8635A; to najczęstszy sposób określania koloru w sieci.
• Narzędzia projektowe — Figma, Sketch, Adobe XD i Canva używają HEX jako podstawowego wejścia. Gdy projektant mówi „ten niebieski to #3B82F6”, wszyscy wiedzą, o co chodzi.
• Księgi znaku — cyfrowe wytyczne marki niemal zawsze zawierają wartości HEX, bo są krótkie, jednoznaczne i łatwe do skopiowania.
• Szybka komunikacja — „użyj #333” jest szybsze niż „użyj rgb(51, 51, 51)” w wiadomości na Slacku.

Kiedy NIE używać HEX

• Gdy potrzebujesz przezroczystości — standardowy sześcioznakowy HEX nie obsługuje kanału alfa ani krycia. Potrzebujesz ośmioznakowego HEX (#E8635A80), który jest mniej czytelny, albo przejścia na RGBA.
• Gdy chcesz modyfikować kolory programowo — „rozjaśnij to o 20%” jest w HEX praktycznie niemożliwe do policzenia w pamięci. HSL sprawdza się tu znacznie lepiej.
• Produkcja poligraficzna — drukarnie nie używają HEX. Nigdy.

Przykład z życia

Piszesz CSS dla strony docelowej. Projektant przekazuje ci styleguide z kolorami marki. Piszesz:

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

HEX jest tu idealny: zwięzły, czytelny i wszędzie obsługiwany.

RGB: model koloru dla ekranów

Czym jest

RGB to Red, Green, Blue (czerwony, zielony, niebieski) — trzy barwy światła, które ekrany mieszają, by uzyskać każdy widziany kolor. Każdy kanał przyjmuje wartości od 0 do 255. rgb(232, 99, 90) oznacza 232 jednostki czerwieni, 99 zieleni i 90 błękitu.

RGB jest fundamentem całego koloru cyfrowego. HEX to tylko RGB w innym zapisie. HSL to przyjazne człowiekowi przekształcenie RGB. Wszystko na twoim ekranie ostatecznie staje się wartościami RGB wysyłanymi do pikseli.

Kiedy używać RGB

• Gdy potrzebujesz przezroczystości — RGBA dodaje kanał alfa: rgba(232, 99, 90, 0.5) dla 50% krycia. To czytelniejsze niż ośmioznakowy HEX i szeroko obsługiwane w CSS, narzędziach projektowych i programowaniu.
• Programowanie i tworzenie aplikacji — Swift, Kotlin, Flutter, React Native; frameworki aplikacji zwykle operują wewnętrznie na wartościach RGB/RGBA.
• LED i oświetlenie — inteligentne żarówki (Philips Hue, taśmy LED) używają wartości RGB. Jeśli projektujesz fizyczne instalacje świetlne, RGB jest formatem natywnym.
• Matematyka koloru — mieszanie barw, interpolacja gradientów czy generowanie koloru w kodzie są w RGB proste.

Kiedy NIE używać RGB

• Druk — ekrany emitują światło (mieszanie addytywne), papier je odbija (mieszanie subtraktywne). RGB nie odwzoruje wiernie tego, co wyjdzie z drukarki.
• Regulacja jasności lub nasycenia — „zmniejsz nasycenie tego koloru o 30%” nie jest w RGB intuicyjne. Trzeba by najpierw przeliczyć na HSL.

Przykład z życia

Tworzysz aplikację w React Native i potrzebujesz półprzezroczystej nakładki:

backgroundColor: 'rgba(0, 0, 0, 0.6)'

RGB z kanałem alfa to naturalny wybór — bezpośredni, czytelny i natywny dla silnika renderującego.

HSL: format projektanta

Czym jest

HSL to Hue, Saturation, Lightness (odcień, nasycenie, jasność):

• Odcień (0°–360°) — sam kolor jako pozycja na kole barw. 0° to czerwony, 120° zielony, 240° niebieski.
• Nasycenie (0%–100%) — jak żywy jest kolor. 0% to szarość, 100% to najczystsza postać odcienia.
• Jasność (0%–100%) — jak jasny lub ciemny. 0% to czerń, 100% to biel, a 50% to kolor „właściwy”.

hsl(4, 75%, 63%) oznacza: czerwonawy odcień (4°), bardzo żywy (75% nasycenia) i lekko rozjaśniony (63%).

Kiedy używać HSL

• Systemy projektowe i motywy — HSL to najlepszy format do tworzenia spójnych skal kolorystycznych. Chcesz 10 odcieni koloru głównego? Zachowaj odcień i zmieniaj jasność od 10% do 95%. Chcesz wersję stonowaną? Zmniejsz nasycenie. W HEX czy RGB jest to praktycznie niewykonalne intuicyjnie.
• Tryb ciemny i jasny — zmiana motywu to regulacja jasności i nasycenia, czyli dokładnie parametrów HSL. Tailwind CSS, Radix Colors i wiele nowoczesnych systemów projektowych opiera się na HSL.
• Programowe generowanie kolorów — tworzenie stanów hover, stanów wyłączonych, teł i obramowań z jednego koloru bazowego jest w HSL banalne: hsl(4, 75%, 73%) dla jaśniejszego wariantu, hsl(4, 75%, 43%) dla ciemniejszego.
• Dostępność — sprawdzanie współczynników kontrastu staje się bardziej intuicyjne, gdy możesz wprost widzieć i regulować jasność.

Kiedy NIE używać HSL

• Komunikacja między zespołami — większość ludzi nie myśli w stopniach i procentach. Zdanie „przycisk ma hsl(4, 75%, 63%)” jest przy przekazaniu projektu mniej czytelne niż „przycisk ma #E8635A”.
• Druk — tak samo jak RGB, HSL jest ekranowym modelem koloru.

Przykład z życia

Budujesz system projektowy w Tailwind CSS i potrzebujesz spójnej skali kolorów:

--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);

Ten sam odcień, to samo nasycenie, inna jasność. Idealna skala w 30 sekund. Spróbuj tego w HEX.

CMYK: format druku

Czym jest

CMYK to Cyan, Magenta, Yellow, Key (cyjan, magenta, żółty i czarny). Opisuje kolor jako mieszaninę farby nałożonej na biały papier. Każda wartość mieści się w zakresie 0%–100%: 0, 57, 61, 9 oznacza 0% cyjanu, 57% magenty, 61% żółtego i 9% czarnego.

W przeciwieństwie do RGB (który dodaje światło, by uzyskać kolory), CMYK odejmuje je od białego papieru. Więcej farby = ciemniejszy kolor. Dlatego mówi się o subtraktywnym modelu koloru.

Kiedy używać CMYK

• Projektowanie do druku — wizytówki, broszury, opakowania, plakaty, czasopisma. Każdy plik wysyłany do drukarni komercyjnej powinien być w trybie koloru CMYK.
• Przygotowanie plików do druku w InDesignie i Illustratorze — te programy pozwalają pracować w trybie CMYK, by podejrzeć, jak kolory wypadną na papierze (zawsze mniej żywo niż na ekranie).
• Proof kolorystyczny — sprawdzenie, czy kolory projektu są odtwarzalne w CMYK. Niektórych żywych barw RGB (zwłaszcza neonowych zieleni i elektrycznych błękitów) fizycznie nie da się wydrukować w CMYK — wypadają „poza gamut”.

Kiedy NIE używać CMYK

• Wszystko, co jest na ekranie — strony, aplikacje, media społecznościowe, prezentacje, e-maile. Ekrany używają RGB. Podawanie CMYK dla strony internetowej to jak podawanie wskazówek dojazdu w milach morskich — technicznie to odległość, ale bezużyteczna w podróży.
• Obróbka zdjęć — edytuj w RGB, a na CMYK konwertuj dopiero na etapie finalnego eksportu do druku.

Przykład z życia

Zaprojektowałeś plakat w Illustratorze. Przed wysłaniem do drukarni konwertujesz dokument na tryb koloru CMYK (File → Document Color Mode → CMYK Color), sprawdzasz ostrzeżenia o przekroczeniu gamutu i poprawiasz elektryczne błękity, które zmieniły się w mętny turkus. Finalny PDF zapisujesz w CMYK z profilem ICC drukarni.

Tabela szybkiego wyboru

Ściąga: który format do jakiego zadania

Czy można je między sobą konwertować?

Tak — z zastrzeżeniami.

• HEX ↔ RGB — bezstratnie, to te same dane w innym zapisie.
• RGB ↔ HSL — bezstratnie, to przekształcenie matematyczne.
• RGB → CMYK — stratnie. Niektórych kolorów RGB (żywych błękitów, neonów, jaskrawych zieleni) nie da się odtworzyć w CMYK. Konwersja przesunie je do najbliższego drukowalnego odpowiednika, który zwykle wygląda bardziej matowo.
• CMYK → RGB — technicznie możliwe, ale wynik zależy od użytego profilu ICC. Dwa konwertery mogą zwrócić nieco inne wartości RGB dla tego samego wejścia CMYK.

Do szybkich konwersji w terenie najszybszy jest próbnik kolorów w telefonie, który pokazuje wszystkie cztery formaty naraz. Color Picker Camera: HEX RGB robi dokładnie to — skieruj aparat na dowolny kolor i zobacz HEX, RGB, HSL i CMYK obok siebie. Jedno dotknięcie kopiuje wybraną wartość. Dostępna na iPhone'a i Androida.

Najczęstsze błędy

1. Projektowanie do druku w RGB

To klasyczny błąd początkującego. Robisz żywy plakat w Photoshopie w trybie RGB, wysyłasz do drukarni, a wydruk wychodzi wyblakły — zwłaszcza zielenie i błękity. Zawsze konwertuj na CMYK przed eksportem do druku i sprawdzaj ostrzeżenia o gamucie.

2. Używanie HEX, gdy potrzebna jest przezroczystość

Jeśli projekt wymaga półprzezroczystych nakładek, cieni albo efektów glassmorphism, przejdź na RGBA lub HSLA. Standardowy sześcioznakowy HEX nie niesie informacji o kryciu, a ośmioznakowy jest rzadko używany, bo trudno go czytać.

3. Budowanie systemu projektowego w HEX

„#3B82F6, ale o 20% jaśniejszy” wymaga konwersji, obliczeń i konwersji z powrotem. W HSL: zwiększ jasność o 20%. Tokeny projektowe, generatory motywów i nowoczesne właściwości niestandardowe CSS działają w HSL zdecydowanie lepiej.

4. Konwertowanie CMYK na HEX do sieci i oczekiwanie tego samego koloru

Marka zdefiniowana w CMYK do druku będzie wyglądać inaczej po naiwnej konwersji na HEX do sieci. Właściwe podejście: dopasuj wizualnie kolor na ekranie do wersji drukowanej, a potem zdefiniuj osobne wartości HEX do zastosowań cyfrowych. Księga znaku powinna zawierać jedne i drugie.

Najczęstsze pytania

Czym różni się HEX od RGB?

Kolorystycznie niczym — różni je tylko zapis. HEX zapisuje te same wartości czerwieni, zieleni i błękitu w systemie szesnastkowym. #FF0000 jest identyczne z rgb(255, 0, 0). HEX szybciej się wpisuje; RGB łatwiej modyfikować programowo i obsługuje kanał alfa (RGBA).

Kiedy używać CMYK zamiast RGB?

Zawsze wtedy, gdy efekt końcowy jest drukowany na fizycznym materiale — papierze, kartonie, tkaninie, plastiku. Jeśli zostaje na ekranie, używaj RGB (albo HEX/HSL). Jeśli idzie do druku, przełącz się na CMYK na etapie eksportu.

Czy HSL jest lepszy od HEX?

Do systemów projektowych, motywów i manipulacji kolorem — tak. Do szybkiej komunikacji i wklejania do narzędzi praktyczniejszy jest HEX. Opisują te same barwy; HSL po prostu porządkuje informację tak, jak ludzie myślą o kolorze (odcień → żywość → jasność).

Czy mój telefon pokaże wszystkie cztery formaty naraz?

Tak. Color Picker Camera: HEX RGB pobiera kolor z aparatu lub zdjęcia i wyświetla jednocześnie HEX, RGB, HSL i CMYK. Dotknij dowolnej wartości, by ją skopiować. Działa jak kalkulator formatów koloru w świecie rzeczywistym — jedno ujęcie, cztery formaty.

Podsumowanie

HEX do sieci i szybkiej komunikacji. RGB do tworzenia aplikacji i przezroczystości. HSL do systemów projektowych i manipulacji kolorem. CMYK do druku.

Nie musisz wybierać jednego — musisz używać właściwego w każdym kontekście. A gdy trzeba je przeliczyć albo uchwycić kolor z otoczenia od razu w czterech formatach, próbnik kolorów w telefonie jest najszybszym dostępnym narzędziem.

Pobierz Color Picker Camera na iPhone'a | Pobierz na Androida

Pobierz PDF

Inne formaty: Markdown · Text · JSON · EPUB · JATS XML · BibTeX · RIS · CSL-JSON

Licencja: CC BY 4.0