HEX, RGB, HSL czy CMYK: którego formatu koloru użyć i kiedy =========================================================== Cztery formaty koloru, cztery różne zastosowania. Ten przewodnik wyjaśnia dokładnie, kiedy używać HEX, RGB, HSL lub CMYK — z praktycznymi przykładami z web designu, druku, mediów społecznościowych i tworzenia aplikacji. Author: Lubor Šimůnek Published: 2026-03-21 Category: Projektowanie 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 Format | Najlepszy do | Zakres | Obsługa przezroczystości | Czytelność dla człowieka | Bezpieczny w druku HEX | Sieć, CSS, księgi znaku | #000000 – #FFFFFF | Tylko ośmioznakowy (#RRGGBBAA) | Średnia | Nie RGB | Ekrany, aplikacje, gradienty | 0–255 na kanał | Tak (RGBA) | Średnia | Nie HSL | Systemy projektowe, motywy | 0°–360°, 0%–100%, 0%–100% | Tak (HSLA) | Wysoka | Nie CMYK | Druk, opakowania | 0%–100% na kanał | Nie | Niska | Tak Ściąga: który format do jakiego zadania Twój projekt | Użyj tego formatu | Dlaczego CSS strony internetowej | HEX lub HSL | HEX dla prostoty; HSL dla systemów projektowych z motywami Aplikacja mobilna (iOS/Android) | RGB/RGBA | Natywne frameworki używają wewnętrznie RGB Plik projektowy Figma / Sketch | HEX | Standardowe wejście w narzędziach projektowych System projektowy / tokeny | HSL | Skale i warianty są w HSL trywialne Grafiki do mediów społecznościowych | HEX lub RGB | Tylko cyfrowo; Canva i Photoshop akceptują oba Wizytówka / broszura | CMYK | Trafia do fizycznej drukarni Opakowanie produktu | CMYK + Pantone | Druk plus spójność koloru marki Szablon e-maila | HEX | Klienty poczty obsługują HEX niezawodnie Inteligentne oświetlenie / LED-y | RGB | Sprzęt LED używa RGB natywnie Dokument z wytycznymi marki | Wszystkie cztery | Różne zespoły potrzebują różnych formatów 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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) i Androida (https://play.google.com/store/apps/details?id=com.tomas.color_picker). 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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) | Pobierz na Androida (https://play.google.com/store/apps/details?id=com.tomas.color_picker) -- Source: https://appstoryo.com/pl/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) Cite as: Lubor Šimůnek (2026). HEX, RGB, HSL czy CMYK: którego formatu koloru użyć i kiedy. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/pl/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use