Kolory to kluczowy element każdego projektu graficznego i wizualnego. Bez względu na to, czy tworzysz stronę internetową, projektujesz logo czy przygotowujesz materiały do druku, zrozumienie różnych przestrzeni kolorów, takich jak HEX, CMYK i RGB, jest niezbędne. W tym artykule wyjaśniamy, czym są te modele kolorów, jak działają i kiedy warto je stosować.
HEX (skrót od Hexadecimal) to sześciocyfrowy kod, który reprezentuje kolor w formacie cyfrowym. Jest powszechnie stosowany w projektach internetowych i aplikacjach cyfrowych, ponieważ każdy kolor HEX jest kompatybilny z przeglądarkami internetowymi i CSS.
Każdy kolor w formacie HEX jest zapisany jako:
#RRGGBB
RR – komponent czerwony (Red)
GG – komponent zielony (Green)
BB – komponent niebieski (Blue)
Każda para cyfr (od 00 do FF) określa intensywność danego koloru.
#FFFFFF
#000000
#FF0000
#0000FF
#00FF00
Prace związane z grafiką cyfrową.
Projektowanie stron internetowych (HTML, CSS).
Tworzenie interfejsów użytkownika (UI).
RGB (Red, Green, Blue) to model kolorów używany do wyświetlania kolorów na ekranach, takich jak monitory, telewizory czy smartfony. Opiera się na zasadzie addytywnego mieszania kolorów – łączenie czerwonego, zielonego i niebieskiego światła tworzy różne barwy.
W modelu RGB każdy kolor jest zdefiniowany przez trzy wartości w zakresie od 0 do 255:
rgb(R, G, B)
rgb(255, 255, 255)
rgb(0, 0, 0)
rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)
CMYK (Cyan, Magenta, Yellow, Key/Black) to model kolorów używany w druku. W przeciwieństwie do RGB, który jest modelem addytywnym, CMYK działa na zasadzie subtraktywnej – kolory są tworzone przez odejmowanie światła od białego podłoża (np. papieru).
Każdy kolor w modelu CMYK jest reprezentowany przez cztery wartości w procentach:
cmyk(C%, M%, Y%, K%)
cmyk(0%, 0%, 0%, 0%)
(brak farby na papierze).cmyk(0%, 0%, 0%, 100%)
.cmyk(0%, 100%, 100%, 0%)
.cmyk(100%, 100%, 0%, 0%)
.cmyk(100%, 0%, 100%, 0%)
.HEX: #000000
RGB: 0% R, 0% G, 0% B
Kolor zapisany w formacie HEX (szesnastkowym) wygląda tak: #RRGGBB
, gdzie:
Każda para znaków (RR, GG, BB) reprezentuje liczbę szesnastkową, którą należy przekonwertować na liczbę dziesiętną (RGB działa w zakresie 0–255).
#FF5733
na RGBRR = FF
: komponent czerwony.GG = 57
: komponent zielony.BB = 33
: komponent niebieski.FF → 255 57 → 87 33 → 51
FF
: (15 × 16) + 15 = 255.57
: (5 × 16) + 7 = 87.33
: (3 × 16) + 3 = 51.#FF5733
to rgb(255, 87, 51)
.Kolor w formacie RGB to zapis w postaci rgb(R, G, B)
, gdzie:
Konwersja RGB do HEX polega na zamianie każdej liczby dziesiętnej na liczbę szesnastkową.
rgb(255, 87, 51)
na HEXR = 255
: (255 ÷ 16 = 15 reszta 15) → FF
.G = 87
: (87 ÷ 16 = 5 reszta 7) → 57
.B = 51
: (51 ÷ 16 = 3 reszta 3) → 33
.rgb(255, 87, 51)
to #FF5733
. – **HEX → RGB**: Odczytujemy składniki i zamieniamy je z systemu szesnastkowego na dziesiętny.
– **RGB → HEX**: Zamieniamy każdą wartość z systemu dziesiętnego na szesnastkowy i łączymy w ciąg #RRGGBB
.
R_scaled = R / 255 G_scaled = G / 255 B_scaled = B / 255
R_scaled
, G_scaled
i B_scaled
:K = 1 - max(R_scaled, G_scaled, B_scaled)
C = (1 - R_scaled - K) / (1 - K), jeśli K ≠ 1 C = 0, jeśli K = 1
M = (1 - G_scaled - K) / (1 - K), jeśli K ≠ 1 M = 0, jeśli K = 1
Y = (1 - B_scaled - K) / (1 - K), jeśli K ≠ 1 Y = 0, jeśli K = 1
R_scaled = (1 - C) * (1 - K) G_scaled = (1 - M) * (1 - K) B_scaled = (1 - Y) * (1 - K)
R = R_scaled * 255 G = G_scaled * 255 B = B_scaled * 255
Aby przekonwertować kolor w formacie HEX na CMYK, wykonaj następujące kroki:
Rozdziel HEX na komponenty RR
, GG
, BB
, a następnie przekonwertuj każdą wartość szesnastkową na dziesiętną. (Szczegóły opisano w sekcji „HEX do RGB”).
R_scaled = R / 255 G_scaled = G / 255 B_scaled = B / 255
K
(czarny):K = 1 - max(R_scaled, G_scaled, B_scaled)
C
(cyjanowy):C = (1 - R_scaled - K) / (1 - K), jeśli K ≠ 1 C = 0, jeśli K = 1
M
(magenta):M = (1 - G_scaled - K) / (1 - K), jeśli K ≠ 1 M = 0, jeśli K = 1
Y
(żółty):Y = (1 - B_scaled - K) / (1 - K), jeśli K ≠ 1 Y = 0, jeśli K = 1
Weźmy kolor HEX: #FF5733
#FF5733
→ R = 255, G = 87, B = 51
Kolor RGB: rgb(255, 87, 51)
R_scaled = 255 / 255 = 1
G_scaled = 87 / 255 ≈ 0.341
B_scaled = 51 / 255 ≈ 0.2
K = 1 - max(1, 0.341, 0.2) = 1 - 1 = 0
C = (1 - 1 - 0) / (1 - 0) = 0
M = (1 - 0.341 - 0) / (1 - 0) ≈ 0.659
Y = (1 - 0.2 - 0) / (1 - 0) ≈ 0.8
C = 0 × 100 = 0%
M = 0.659 × 100 ≈ 66%
Y = 0.8 × 100 = 80%
K = 0 × 100 = 0%
Wynik: CMYK: cmyk(0%, 66%, 80%, 0%)
RGB: rgb(0, 0, 0)
HEX: #000000
CMYK: 0%, 0%, 0%, 100%
CMYK: 0%, 0%, 0%, 0%
RGB: rgb(255, 255, 255)
HEX: #FFFFFF