Wybierz dowolny kolor — powiedzmy ciepły koral. Teraz opisz go na cztery sposoby:
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 (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.
color: #E8635A; to najczęstszy sposób określania koloru w sieci.#E8635A80), który jest mniej czytelny, albo przejścia na RGBA.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 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.
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.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 to Hue, Saturation, Lightness (odcień, nasycenie, jasność):
hsl(4, 75%, 63%) oznacza: czerwonawy odcień (4°), bardzo żywy (75% nasycenia) i lekko rozjaśniony (63%).
hsl(4, 75%, 73%) dla jaśniejszego wariantu, hsl(4, 75%, 43%) dla ciemniejszego.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 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.
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.
| 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 |
| 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 |
Tak — z zastrzeżeniami.
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.
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.
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ć.
„#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.
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.
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).
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.
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ść).
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.
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
" }