Przelicznik kolorów (HEX ↔ RGB)
Ten przelicznik zamienia kolory między zapisem HEX (#1E90FF) a RGB (30, 144, 255) w obie strony, dodaje zapis HSL i pokazuje próbkę koloru na żywo. Każdy format skopiujesz jednym kliknięciem.
🧮 Policz od razu
Jak działa zamiana HEX ↔ RGB?
Zapis HEX to trzy pary szesnastkowe #RRGGBB — każda para koduje jedną składową światła w zakresie 0–255: czerwoną, zieloną i niebieską. Para FF to 255, 00 to zero, a 1E = 30. Stąd #1E90FF czytamy jako rgb(30, 144, 255) — intensywny błękit. Przelicznik liczy w obie strony, waliduje zapis i od razu maluje próbkę, więc widzisz kolor, o którym mowa.
Skróty i konwencje zapisu
Trzyznakowy skrót #F00 rozwija się przez podwojenie znaków do #FF0000 (czysta czerwień) — analogicznie #FFF to biel, a #000 czerń. Wielkość liter nie ma znaczenia (#1e90ff = #1E90FF). W CSS oba zapisy — HEX i rgb() — opisują dokładnie ten sam kolor; wybór to kwestia wygody i konwencji projektu.
Po co trzeci zapis: HSL?
RGB świetnie mówi maszynie, „ile którego światła zmieszać”, ale człowiekowi trudno z niego wyczytać charakter koloru. HSL opisuje barwę intuicyjnie: odcień (kąt na kole barw: 0° czerwień, 120° zieleń, 240° błękit), nasycenie i jasność. Nasz przykład to hsl(210, 100%, 56%) — „w pełni nasycony błękit, trochę jaśniejszy od średniego”. W HSL łatwo tworzyć warianty: ciemniejszy przycisk to ten sam odcień z mniejszą jasnością.
Praktyka projektowa
Kody HEX kopiuje się między programami graficznymi, CSS-em i palerami marek — dlatego wynik ma przycisk „Kopiuj”. Dobierając kolor tekstu na tło, pamiętaj o kontraście: na ciemnych tłach jasny tekst i odwrotnie (próbka w kalkulatorze sama dobiera czytelny podpis). Paleta strony zwykle trzyma się 2–3 odcieni plus neutralne szarości.
Kiedy się przydaje?
Przy stylowaniu stron i aplikacji (CSS), przenoszeniu kolorów z grafiki do kodu, odtwarzaniu barw firmowych z brandbooka, dobieraniu wariantów przycisków i tła oraz w nauce — zapis szesnastkowy kolorów to wdzięczny przykład systemu pozycyjnego.