ZAWODNIK

Modele barw: RGB, RGBA, CMYK, HSL, HSV, hex; przeliczanie

INF.03 · teoria
autor: redakcja · 02.11.2026
Składowe światła i farby, przezroczystość alfa, odcień i nasycenie oraz przeliczanie kolorów między zapisem RGB i szesnastkowym. Przykłady barw strony sklepu. Lekcja 5.3 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: Grafika i multimediaĆwicz temat: Grafika i multimedia
Model barw to sposób opi­sa­nia koloru za pomocą okre­ślo­nych skła­do­wych licz­bo­wych. Na eg­za­mi­nie trzeba roz­róż­nić świa­tło ekranu i farby dru­kar­skie, od­czy­tać war­to­ści RGB oraz prze­li­czyć zapis szes­nast­ko­wy. W prak­ty­ce ten sam kolor może po­ja­wić się w edy­to­rze gra­fi­ki, w pro­jek­cie strony i w ar­ku­szu CSS, więc trzeba ro­zu­mieć zapis, a nie kie­ro­wać się wy­łącz­nie po­do­bień­stwem próbek na mo­ni­to­rze.

RGB: do­da­wa­nie świa­tła

RGB opi­su­je kolor przez udział czer­wie­ni, zie­le­ni i błę­ki­tu: red (czer­wo­ny), green (zie­lo­ny), blue (nie­bie­ski). Jest mo­de­lem ad­dy­tyw­nym, czyli opar­tym na do­da­wa­niu świa­tła. Brak wszyst­kich trzech skła­do­wych daje czerń, a ich mak­sy­mal­ne war­to­ści dają biel. Dwie mak­sy­mal­ne skła­do­we dają kolory wtórne: czer­wo­ny z zie­lo­nym żółć, zie­lo­ny z nie­bie­skim cyjan, czer­wo­ny z nie­bie­skim ma­gen­tę.
W po­pu­lar­nym za­pi­sie ośmio­bi­to­wym każda skła­do­wa przyj­mu­je cał­ko­wi­tą war­tość od 0 do 255. Zestaw trzech zer ozna­cza czerń, a trzech war­to­ści 255 biel. Gdy wszyst­kie trzy liczby są jed­na­ko­we, otrzy­mu­je­my odcień sza­ro­ści. Im więk­sza wspól­na war­tość, tym ja­śniej­sza sza­rość. Przy­kła­do­wo 128, 128, 128 nie jest zie­le­nią, mimo że środ­ko­wa liczba także ma war­tość 128.
1
2
3
body { background-color: rgb(255, 255, 255); }
header { background-color: rgb(0, 128, 128); }
footer { color: rgb(128, 128, 128); }
Pierw­sza reguła usta­wia białe tło, druga kolor Teal, czyli ciemny cyjan, a trze­cia szary tekst. Rów­ność dwóch skła­do­wych nie wy­star­cza do uzy­ska­nia sza­ro­ści: muszą być równe wszyst­kie trzy. Nie należy też utoż­sa­miać mak­sy­mal­nej zie­lo­nej skła­do­wej RGB z nazwą CSS green, która ma war­tość zie­le­ni 128. Pełna zie­lo­na skła­do­wa od­po­wia­da nazwie CSS lime.

Zapis szes­nast­ko­wy krok po kroku

Zapis szes­nast­ko­wy, na­zy­wa­ny hex (szes­nast­ko­wy), używa cyfr od 0 do 9 i liter od A do F. Litery ozna­cza­ją ko­lej­no war­to­ści od 10 do 15. W ko­lo­rze z sze­ścio­ma zna­ka­mi pierw­sza para opi­su­je czer­wo­ny kanał, druga zie­lo­ny, a trze­cia nie­bie­ski. Każdą parę za­mie­nia się na liczbę dzie­sięt­ną od­dziel­nie.
Kolor #336699 roz­kła­da­my na pary 33, 66 i 99. Pierw­sza para daje 3 razy 16 plus 3, czyli 51. Druga daje 6 razy 16 plus 6, czyli 102. Trze­cia daje 9 razy 16 plus 9, czyli 153. Od­po­wied­ni­kiem jest zatem po­niż­sza war­tość:
1
nav { background-color: rgb(51, 102, 153); }
W drugą stronę dzie­li­my każdą skła­do­wą przez 16. Dla war­to­ści 217 iloraz cał­ko­wi­ty wynosi 13, a reszta 9. Trzy­na­ście za­pi­su­je­my literą D, więc otrzy­mu­je­my D9. Skła­do­wa 138 daje 8A, a 82 daje 52. Kolor o tych trzech skła­do­wych za­pi­su­je­my tak:
1
.przycisk { background-color: #D98A52; }
Wiel­kość liter nie zmie­nia war­to­ści koloru. Skrót trzy­zna­ko­wy po­wie­la każdy znak: #369 roz­wi­ja się do #336699, a nie do #030609. Skró­ce­nie jest moż­li­we tylko wtedy, gdy w każdej parze stoją takie same znaki. Koloru #D98A52 nie można za­pi­sać trzema zna­ka­mi bez zmiany jego war­to­ści. Prze­li­cze­nia po­je­dyn­czych par można spraw­dzić kon­wer­te­rem sys­te­mów licz­bo­wych.

RGBA: kolor i krycie

RGBA to RGB uzu­peł­nio­ny o kanał alfa, czyli sto­pień krycia. W funk­cji CSS czwar­ta liczba 0 ozna­cza cał­ko­wi­tą prze­zro­czy­stość, 1 pełne krycie, a 0,5 krycie czę­ścio­we. Tę samą skła­do­wą można za­pi­sać pro­cen­to­wo. Pół­prze­zro­czy­sta czerń na białym tle wy­glą­da szaro, lecz na nie­bie­skim tle daje inny re­zul­tat, po­nie­waż osta­tecz­ny kolor zależy od tego, co znaj­du­je się pod spodem.
1
.podpis { background-color: rgba(0, 0, 0, 0.5); }
Ta reguła zmie­nia krycie samego koloru tła pod­pi­su. Wła­ści­wość opacity (nie­prze­zro­czy­stość) za­sto­so­wa­na do całego ele­men­tu wpływa rów­nież na jego tekst i po­tom­ków. Jeśli napis ma po­zo­stać wy­raź­ny, a przy­ciem­nić ma się wy­łącz­nie tło, lepszy jest kolor z alfą. To roz­róż­nie­nie pomaga także w edy­to­rze gra­fi­ki: krycie war­stwy oraz prze­zro­czy­stość kon­kret­ne­go pik­se­la nie są tą samą ope­ra­cją.
Ośmio­zna­ko­wy zapis szes­nast­ko­wy dodaje na końcu parę alfa. War­tość 00 daje pełną prze­zro­czy­stość, FF pełne krycie, a 80 około połowy. Kanał ośmio­bi­to­wy ma 256 po­zio­mów, więc do­kład­ne 50 pro­cent nie ma ide­al­ne­go cał­ko­wi­te­go od­po­wied­ni­ka. Nie czy­ta­my koń­ców­ki 80 jako osiem­dzie­się­ciu pro­cent. Jej war­tość dzie­sięt­na to 128, którą od­no­si­my do 255.

CMYK: odej­mo­wa­nie świa­tła przez farby

CMYK opi­su­je farby: cyan (cyjan), magenta (ma­gen­ta), yellow (żółty) i key (skła­do­wa czarna). Jest mo­de­lem sub­trak­tyw­nym, czyli zwią­za­nym z odej­mo­wa­niem skła­do­wych świa­tła od­bi­ja­ne­go od pod­ło­ża. Biała kartka bez farby odbija świa­tło, a po­kry­wa­nie jej far­ba­mi zmie­nia to, które części świa­tła do­cie­ra­ją do oka. To inna sy­tu­acja niż świe­cą­ce pik­se­le mo­ni­to­ra.
W ide­al­nym modelu po­łą­cze­nie cyjanu, ma­gen­ty i żółci po­win­no dać czerń. W prak­ty­ce wła­ści­wo­ści farb i pod­ło­ża spra­wia­ją, że sto­su­je się osobny czarny skład­nik. Pomaga uzy­skać od­po­wied­nią czerń i dru­ko­wać drobny czarny tekst bez skła­da­nia go z kilku farb. Do­da­nie K do CMY jest ty­po­wym te­ma­tem py­ta­nia o róż­ni­cę między tymi mo­de­la­mi.
Kolor ekranu nie ma jed­ne­go bez­wa­run­ko­wo iden­tycz­ne­go od­po­wied­ni­ka w druku. Wynik zależy między innymi od pro­fi­lu barw­ne­go, czyli opisu in­ter­pre­ta­cji ko­lo­rów przez urzą­dze­nie lub proces druku. Dla­te­go baner sklepu prze­zna­czo­ny do strony przy­go­to­wu­je­my do wy­świe­tla­nia na ekra­nie, a plakat do dru­kar­ni według jej wy­ma­gań. Sama pod­mia­na nazwy modelu nie gwa­ran­tu­je zgod­no­ści próbek.

HSL i HSV: wybór od­cie­nia

HSL opi­su­je barwę przez hue (odcień), saturation (na­sy­ce­nie) i lightness (ja­sność). Odcień jest kątem na kole barw: 0 stopni to czer­wień, 120 zieleń, 240 nie­bie­ski. Po 360 stop­niach wra­ca­my do czer­wie­ni. Na­sy­ce­nie 0 pro­cent daje sza­rość, na­to­miast ja­sność 0 pro­cent daje czerń, a 100 pro­cent biel nie­za­leż­nie od od­cie­nia.
RGB opisuje trzy składowe światła, a HSL oddziela odcień, nasycenie i jasność; CMYK opisuje zestaw farb do druku.
Przy pełnym na­sy­ce­niu i ja­sno­ści 50 pro­cent HSL otrzy­mu­je­my in­ten­syw­ną barwę wska­za­ne­go od­cie­nia. Nie należy uzna­wać, że ja­sność 50 pro­cent zawsze ozna­cza szary. Dla zie­le­ni w takim za­pi­sie uzy­ska­my pełną zie­lo­ną skła­do­wą RGB. Model jest wy­god­ny przy two­rze­niu palety, po­nie­waż można za­cho­wać odcień i osobno zmie­niać ja­sność ko­lej­nych próbek.
HSV ma także odcień i na­sy­ce­nie, lecz trze­cią skła­do­wą jest value (war­tość, ja­sność mak­sy­mal­nej skła­do­wej). Usta­wie­nie V na 100 pro­cent nie musi dawać bieli: przy pełnym na­sy­ce­niu może dać in­ten­syw­ną czer­wień. HSL i HSV to różne spo­so­by opisu, więc nie wolno bez prze­li­cze­nia prze­pi­sy­wać ich trze­ciej liczby. Wy­bie­rak edy­to­ra może po­ka­zy­wać HSV, pod­czas gdy CSS używa funk­cji HSL.

Na eg­za­mi­nie

Przy py­ta­niu o barwę z kodu naj­pierw od­dziel kanały, potem prze­licz pary. Prze­wa­ga kanału czer­wo­ne­go su­ge­ru­je czer­wo­na­wy kolor, ale nie za­stę­pu­je ra­chun­ku. Dla #11FE07 otrzy­mu­je­my 17, 254 i 7, więc do­mi­nu­je zieleń. W py­ta­niu o druk od­po­wie­dzi RGB i CMYK roz­dzie­la sposób two­rze­nia koloru, a nie liczba liter w skró­cie.
Pu­łap­ka: HSL z ja­sno­ścią 100 pro­cent daje biel, lecz HSV z war­to­ścią 100 pro­cent może nadal przed­sta­wiać na­sy­co­ny kolor.
W prak­ty­ce wpisz podany kod do­kład­nie w polu koloru lub ar­ku­szu CSS. Próbka po­dob­na na oko nie za­stę­pu­je wy­ma­ga­nej war­to­ści. Skład­nię RGB, HSL, alfa i hex opi­su­je spe­cy­fi­ka­cja ko­lo­rów CSS W3C; zna­jo­mość tych za­pi­sów po­zwa­la po­rów­nać edytor i stronę bez zga­dy­wa­nia.

Ściąga

Zapis lub model
Odczyt
RGB
czer­wo­ny, zie­lo­ny, nie­bie­ski; do­da­wa­nie świa­tła
RGB 0, 0, 0
czerń
RGB 255, 255, 255
biel
#336699
RGB 51, 102, 153
#369
skrót #336699
Alfa 0 lub 1
brak krycia albo pełne krycie
CMYK
cyjan, ma­gen­ta, żółty, czarny; druk
HSL
odcień, na­sy­ce­nie, ja­sność
HSV
odcień, na­sy­ce­nie, war­tość
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Formaty: JPG, PNG, GIF, WEBP, SVG, AVIF, BMP, TIFF, PSD, RAW; przezroczystość, animacjanastępna: Edytory: GIMP (warstwy, zaznaczenia, filtry, kanał alfa, skalowanie) i Inkscape (ścieżki, obiekty, tekst)spis działu: Grafika i multimedia

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuDokumenty CKEFormularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03JavaScript na egzaminie INF.03Zapytania SQL na egzaminie INF.03Bazy danych i SQL na egzaminie INF.03pokaż więcej (85)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulaminKontakt
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.