Jak komputer tworzy kolory: RGB, HEX i system dwójkowy

#FF0000. #00FF00. #0000FF. Pewnie widziałeś takie zapisy w projektach graficznych albo w kodzie. Wyglądają jak szyfr lub kod do gry. W rzeczywistości to nazwy kolorów.

Od góry: czerwony, zielony, niebieski. Tak komputer nazywa kolory. Wyjaśnijmy, skąd pochodzi ten zapis.

RGB — trzy litery tworzące kolor

Red, Green, Blue. Trzy podstawowe barwy światła. Mieszając je w odpowiednich proporcjach, uzyskujemy wszystkie kolory, które widzimy.

RGB jest wszędzie wokół nas

Wszędzie tam, gdzie jest ekran, jest też RGB.

• Monitor / telewizor — każdy piksel składa się z trzech punktów: czerwonego, zielonego i niebieskiego
• Ekran smartfona — ta sama struktura, mniejsze piksele
• Klawiatura gamingowa LED — pod każdym klawiszem trzy diody R, G i B
• Podświetlenie obudowy PC — taśmy RGB to dokładnie sygnał RGB

Wystarczy wystarczająco zbliżyć ekran. Czerwony, zielony, niebieski. To wszystko. Miliony malutkich punktów RGB składają się na każdy wyświetlany obraz.

Kolory tworzy się przez mieszanie

Każdy kanał RGB ma intensywność od 0 do 255.

• RGB(255, 0, 0) — tylko czerwony na maksimum → czysty czerwony
• RGB(0, 255, 0) — tylko zielony na maksimum → czysty zielony
• RGB(255, 255, 0) — czerwony + zielony → żółty
• RGB(0, 0, 0) — wszystko wyłączone → czarny
• RGB(255, 255, 255) — wszystko na maksimum → biały

Mieszanie czerwonego i zielonego daje żółty – może wydawać się to nieintuicyjne, ale to synteza addytywna światła. Inne zasady obowiązują przy mieszaniu farb (czerwony + zielony = brązowy). Światło sumuje się i staje coraz jaśniejsze; pełna suma to biel.

Przesuń trzy suwaki i sprawdź to sam.

8-cyfrowa liczba po prawej stronie to reprezentacja binarna danego kanału. Gdy przesuwasz suwak, ta liczba też się zmienia. Jak z samych zer i jedynek uzyskać 256 wartości – to temat następnej sekcji.

Dlaczego akurat 0 do 255?

Komputer operuje wyłącznie na zerach i jedynkach. Jedna cyfra, która może przyjąć wartość 0 lub 1, to bit. Im więcej bitów, tym dwukrotnie więcej możliwych wartości.

8 bitów = 1 bajt. Jeden kolor to trzy kanały RGB, łącznie 3 bajty = 24 bity. 24 bity dają około 16,7 miliona kolorów. To wystarczająco dużo, by ludzkie oko nie wyczuło różnicy – dlatego 1 bajt stał się standardem dla jednego kanału.

Czytamy binarne liczby

Każda pozycja ma ustaloną wartość. Od lewej: 128, 64, 32, 16, 8, 4, 2, 1 — kolejne potęgi liczby 2.

Zsumuj wartości pozycji, gdzie stoi 1, a otrzymasz liczbę dziesiętną.

Dlatego maksymalna wartość 8-bitowa to 255. To dokładny powód, dla którego zakres jednego kanału RGB wynosi 0–255.

HEX — ta sama liczba, krócej

RGB(255, 255, 255). Szesnaście znaków. Wpisywanie tego w każdą linię CSS lub pole w narzędziu projektowym jest uciążliwe. Dlatego powstał krótszy sposób zapisu.

Czym jest system szesnastkowy?

System szesnastkowy to zapis, w którym jedną cyfrą przedstawiamy wartości od 0 do 15. Zwykłych cyfr mamy jednak tylko 10 (0–9). Brakujące 6 pożyczamy z alfabetu.

Trzy zasady:

• 0–9 — tak samo jak zawsze
• od 10 zaczynamy od A
• F to maksymalna wartość jednej cyfry (= 15)

Dlaczego akurat szesnastkowy?

Cztery cyfry binarne (0000 – 1111) dają dokładnie 16 kombinacji.

4 cyfry binarne = 1 cyfra szesnastkowa. Cztery znaki skracamy do jednego. Ponieważ jeden kanał RGB to 8 bitów, zamienia się on dokładnie w dwie cyfry szesnastkowe.

Jak przekonwertować RGB na HEX?

Spróbujmy przekonwertować RGB(255, 87, 51).

14-znakowy zapis zmienia się w 7 znaków.

Odczytywanie koloru z kodu HEX

Czytając HEX od razu można wyczuć, jaki to kolor.

• #FF5733 — R maksymalny (FF), G połowa (57), B niski (33) → mocno czerwona pomarańcz
• #3576E0 — R niski (35), G średni (76), B silny (E0) → niebieski z lekkim fioletowym odcieniem
• #29A85A — R niski (29), G silny (A8), B niski (5A) → chłodna zieleń

Gdy tylko rzut oka na pierwsze trzy cyfry pozwala odróżnić „pomarańczowy” od „niebieskiego”, projektanci i deweloperzy mogą mówić tym samym językiem.

Skrótowe podsumowanie

• RGB — trzy kanały: czerwony, zielony, niebieski; każdy w zakresie 0–255
• 8-bitowy system binarny — skąd bierze się 256 wartości na jeden kanał
• HEX — ten sam numer zapisany krócej, dwiema cyframi

Gdy te trzy pojęcia połączą się w jeden ciąg, kod koloru przestaje być kodem obcego języka. Trzy liczby RGB to dokładnie sześć cyfr HEX.

Następny krok to przełożenie tych liczb na język projektanta. Zadania w stylu „trochę jaśniej”, „mniej nasycony” czy „to samo na papierze” są trudne do realizacji wyłącznie za pomocą RGB i HEX. Jak rozwiązują ten problem HSL, CMYK i OKLCH, czytaj w RGB to za mało: notacje kolorów HSL, CMYK i OKLCH.