Konwertuj kolor między RGB, HSL i szesnastkowym

Praca z kolorem w sieci wymaga ciągłego żonglowania kilkoma notacjami. Konwerter kolorów eliminuje błędy ręczne i pozwala natychmiast przejść z jednego formatu do drugiego w zależności od kontekstu użycia. Każdy format ma swoje mocne strony, a wiedza, którego użyć, to jeden z odruchów programisty front-end.

Oto typowe zastosowania, które uzasadniają konwersję kolorów:

• RGB jest natywny w CSS i JavaScript, czytelny dla ludzi w zrozumieniu dominującego odcienia (kanały czerwony, zielony, niebieski w zakresie 0-255).
• HSL sprawia, że modyfikacja odcienia staje się trywialna: wystarczy dostosować nasycenie lub jasność bez przeliczania każdego kanału.
• HEX to format kanoniczny do kopiowania i wklejania: sześć znaków, kompatybilny wszędzie, idealny dla makiet Figma, Sketch lub przewodników po stylach.
• Konwersje HEX to RGB, RGB to HEX, HEX to HSL i ich odwrotności to najczęstsze operacje w CSS i JavaScript.

RGB i RGBA (Red, Green, Blue, Alpha)

Każdy kanał jest kodowany jako liczba całkowita od 0 do 255, co odpowiada jednemu bajtowi na komponent i daje 16 777 216 możliwych kolorów. Kanał alfa w RGBA przyjmuje wartości od 0 (przezroczysty) do 1 (nieprzezroczysty) i steruje przezroczystością.

.bouton {
    background-color: rgb(20, 0, 182);
    border-color: rgba(20, 0, 182, 0.5);
}

HEX i HEX8 (notacja szesnastkowa)

Bardzo rozpowszechniony, kompaktowy format: #RRGGBB na sześciu znakach, gdzie każda para reprezentuje kanał RGB w systemie szesnastkowym. Wariant #RRGGBBAA na ośmiu znakach dodaje kanał alfa w zapisie szesnastkowym (00 przezroczysty, FF nieprzezroczysty). Istnieje również krótka notacja #RGB: #F53 jest równoważne #FF5533.

.titre  { color: #1400B6; }
.ombre  { color: #1400B680; }   /* alpha 50% */
.accent { color: #F53; }        /* forme courte */

HSL i HSLA (Hue, Saturation, Lightness, Alpha)

HSL opisuje kolor w sposób percepcyjny. Hue to kąt na kole barw (od 0 do 360°), Saturation i Lightness wyrażane są w procentach. To preferowany format do generowania wariantów: rozjaśnienia przycisku po najechaniu, odbarwienia stanu wyłączonego, utworzenia spójnej palety zmieniając wyłącznie odcień.

$primary: hsl(247, 100%, 36%);
$primary-hover: hsl(247, 100%, 46%);   /* plus clair */
$primary-muted: hsl(247, 30%, 36%);    /* moins saturé */

Inne istniejące formaty

CMYK (Cyan, Magenta, Yellow, Key) jest używany w druku: opisuje kolor poprzez odejmowanie atramentów i nie jest istotny dla ekranu. OKLCH i LAB to przestrzenie jednorodne percepcyjnie, które pojawiły się w CSS Color Level 4, pozwalają one na lepszą kontrolę odczuwanej jasności. To narzędzie skupia się na konwersjach RGB, HEX i HSL, które pokrywają zdecydowaną większość potrzeb webowych.

HEX na RGB sprowadza się do parsowania ciągu znaków parami i interpretacji każdej pary jako liczby całkowitej w systemie szesnastkowym:

const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB na HEX jest operacją odwrotną: każdy kanał jest konwertowany na szesnastkowy, uzupełniany do dwóch znaków, a następnie łączony.

const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB na HSL jest bardziej algorytmiczne. Normalizujemy kanały do zakresu 0-1, obliczamy min i max, aby uzyskać jasność, następnie nasycenie i odcień w zależności od dominującego kanału. Pełny wzór jest udokumentowany w specyfikacji CSS Color Module Level 3.

Narzędzie działa w obu kierunkach między RGB, HEX i HSL. Aby wykonać konwersję:

1. Wybierz format wejściowy: RGB, HEX lub HSL.
2. Wprowadź wartość (na przykład #1400B6, rgb(20, 0, 182) lub hsl(247, 100%, 36%)).
3. Uruchom konwersję: równoważniki w dwóch pozostałych formatach wyświetlą się natychmiast.
4. Skopiuj żądany wynik dedykowanym przyciskiem i wklej go do swojego arkusza stylów lub makiety.

Obliczenia wykonywane są po stronie przeglądarki, żadne dane nie są wysyłane na serwer.

• Projektowanie stron i CSS: pobranie HEX z makiety i uzyskanie odpowiednika HSL do wygenerowania stanu hover lub active bez odchylenia od odcienia.
• Identyfikacja wizualna i paleta: odmiana koloru podstawowego w kilku wariantach (jaśniejszy, ciemniejszy, stłumiony) poprzez modyfikację jasności lub nasycenia HSL.
• Ilustracja i grafika: przeniesienie koloru ekranowego (RGB) na kod szesnastkowy do przekazania w oprogramowaniu lub klientowi.
• Dostępność: konwersja na format RGB w celu obliczenia współczynnika kontrastu (WCAG AA wymaga 4.5:1 dla tekstu normalnego) z kolorem tła.
• Zmienne CSS i preprocesory: zasilanie tokenów projektowych w pliku SASS lub motywie Tailwind z jednego koloru referencyjnego.

Kilka pełnych konwersji ilustrujących odpowiedniość między trzema formatami:

#1400B6 -> rgb(20, 0, 182)    -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51)   -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113)  -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15)  -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0)       -> hsl(0, 0%, 0%)

Z kanałem alfa:

#1400B680 -> rgba(20, 0, 182, 0.50)   -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80)  -> hsla(11, 100%, 60%, 0.80)

Jaka jest różnica między HEX a HEX8?

Klasyczny HEX koduje trzy kanały RGB na sześciu znakach (#RRGGBB). HEX8 dodaje dwa znaki dla kanału alfa (#RRGGBBAA), co pozwala obsługiwać przezroczystość w jednym ciągu. #1400B6FF i #1400B6 dają wizualnie ten sam, nieprzezroczysty kolor.

Czy w CSS lepiej używać HSL czy RGB?

Oba są równoważne w renderowaniu. HSL jest bardziej wyrazisty przy generowaniu spójnej palety lub wariantów stanów (hover, focus), ponieważ modyfikujemy tylko jeden parametr percepcyjny. RGB pozostaje praktyczny, gdy pracujemy z danymi z canvas lub czujnika.

Dlaczego mój HEX daje inny odcień niż oczekiwany?

Trzy częste przyczyny: pomylenie krótkiego #RGB z długim #RRGGBB (znaki są duplikowane, a nie łączone), błąd kopiowania pojedynczego znaku lub wyświetlanie na nieskalibrowanym ekranie. Sprawdź również, czy CSS nie nakłada przezroczystości elementu nadrzędnego, która modyfikuje ostateczny rezultat.

Do czego służy kanał alfa w RGBA i HSLA?

Kanał alfa steruje krycie koloru, od 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty). Jest przydatny dla nakładek, cieni, stanów wyłączonych lub warstw na obrazach. W przeciwieństwie do właściwości CSS opacity, RGBA i HSLA wpływają tylko na docelowy kolor, a nie na jego elementy podrzędne.

Czy można konwertować kolor bez utraty precyzji?

Między RGB a HEX konwersja jest dokładna, oba formaty kodują tę samą informację na 24 bitach. Konwersja do HSL wiąże się z zaokrągleniem odcienia, nasycenia i jasności, dlatego dwukierunkowy ruch RGB > HSL > RGB może zwrócić wartość przesuniętą o jedną jednostkę na niektórych kanałach.

Dlaczego korzystać z konwertera online zamiast własnej funkcji?

Do jednorazowego testu, prototypowania palety lub szybkiego sprawdzenia odpowiednika HEX dla koloru HSL wyciągniętego z makiety, konwerter online jest natychmiastowy. Do powtarzającej się potrzeby programistycznej, biblioteka taka jak color, chroma-js czy tinycolor2 pozostaje bardziej odpowiednia.