Konwerter kolorów

Konwertuj między HEX, RGB, HSL i OKLCH z podglądem na żywo.

Autor: Nethanel Bar, Co-founder & CEO

Ostatnia aktualizacja 25 kwietnia 2026

Chcesz naprawdę nauczyć się programować?

Coddy uczy cię przez pisanie prawdziwego kodu w przeglądarce: interaktywne lekcje, natychmiastowa informacja zwrotna i pomoc AI, gdy utkniesz.

Zacznij naukę za darmo

Czym jest konwerter kolorów?

Konwerter kolorów bierze kolor w dowolnym popularnym formacie, czyli HEX, RGB, HSL lub OKLCH, i pokazuje każdy inny format opisujący ten sam kolor. To codzienne narzędzie projektantów i programistów przy dopasowywaniu kolorów marki, debugowaniu zmiennych CSS, porównywaniu palet trybu ciemnego i jasnego oraz sprawdzaniu kontrastu pod kątem dostępności.

CSS obsługuje kilka modeli kolorów i każdy ma swoje mocne strony. HEX i RGB opisują kolory za pomocą czerwonego, zielonego i niebieskiego światła. HSL jest bardziej intuicyjny (odcień, nasycenie, jasność). OKLCH to model percepcyjny, w którym równe zmiany liczbowe wyglądają jak równe zmiany wizualne, co czyni go szczególnie przydatnym do tworzenia jaśniejszych i ciemniejszych odcieni oraz dostępnych palet.

Dostępność zależy od kontrastu, a nie tylko od koloru. WCAG definiuje współczynnik kontrastu między tekstem a tłem: co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużych nagłówków. Dobre narzędzie do kolorów pokazuje obie liczby obok twojego koloru, żeby przypadkiem nie wdrożyć niedostępnego interfejsu.

Czego nauczysz się, konwertując kolory

HEX to tylko skrócony zapis RGB: #ff8800 to to samo co rgb(255, 136, 0).
HSL rozdziela *odcień* (jaki kolor), *nasycenie* (jak intensywny) i *jasność* (jak jasny). Zmiana jednego bez pozostałych jest dużo bardziej intuicyjna niż kręcenie R/G/B.
OKLCH jest percepcyjnie jednorodny: zwiększenie L o 10% w OKLCH wygląda jak mniej więcej ta sama zmiana jasności dla każdego odcienia. HSL tak się nie zachowuje.
Jaśniejsze odcienie (tints) dodają biel, ciemniejsze (shades) dodają czerń. To różnica między dwoma odcieniami tej samej barwy sprawia, że paleta interfejsu wydaje się spójna.

Jak krok po kroku konwertować i sprawdzać kolory

Wpisz kolor
Wklej dowolną wartość HEX, RGB, HSL lub OKLCH albo wybierz kolor pipetą lub systemowym próbnikiem.
Zobacz wszystkie formaty naraz
Konwerter pokazuje ten sam kolor w każdym obsługiwanym formacie. Kliknij dowolną wartość, aby skopiować ją do schowka.
Dostosuj suwakami HSL lub OKLCH
Przesuwaj suwak jasności, aby uzyskać jaśniejsze i ciemniejsze odcienie. Używaj jasności OKLCH, aby kroki były wizualnie równe.
Sprawdź kontrast z kolorami tekstu
Panel kontrastu pokazuje współczynnik WCAG względem bieli i czerni. Celuj w ≥ 4.5 dla zwykłego tekstu i ≥ 3 dla dużych nagłówków.
Skopiuj wartość do CSS
Użyj formatu pasującego do twojego kodu: HEX dla tokenów projektowych, OKLCH dla nowoczesnych palet, HSL, gdy chcesz modyfikować kolor przez calc().

Formaty kolorów w CSS: ściąga

Pięć formatów, które spotkasz na co dzień, z przykładami dla tego samego koloru. Pełny opis składni kolorów znajdziesz na stronie MDN o <color>.

Format	Składnia	Przykład (pomarańczowy)
HEX	`#RRGGBB` lub `#RGB`	`#ff8800`
HEX z kanałem alfa	`#RRGGBBAA`	`#ff880080` (50% przezroczystości)
`rgb()`	Czerwony, zielony, niebieski od 0 do 255	`rgb(255 136 0)`
`rgb()` z kanałem alfa	Nowoczesna składnia z ukośnikiem	`rgb(255 136 0 / 0.5)`
`hsl()`	Odcień 0 do 360°, nasycenie 0 do 100%, jasność 0 do 100%	`hsl(32 100% 50%)`
`oklch()`	Jasność 0 do 100%, chroma, odcień	`oklch(74% 0.18 50)`
Nazwa	Nazwany kolor CSS (jest ich 147)	`darkorange`

Przykłady konwersji kolorów do wypróbowania

Zamień kolor marki w HEX

Ten sam kolor, cztery formaty

color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);

Wszystkie cztery deklaracje dają dokładnie ten sam niebieski. Wybór jednej z nich dla tokenów projektowych to głównie kwestia tego, jak chcesz je później modyfikować.

Twórz jaśniejsze odcienie w OKLCH

Kolor marki + 4 odcienie

--brand:        oklch(67% 0.16 268);--brand-light:  oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark:   oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);

Utrzymanie stałego odcienia (268) i chromy przy zmianie jasności daje spójną paletę, w której każdy krok *wygląda* na tę samą różnicę, czego HSL nie gwarantuje.

Dodaj przezroczystość kanałem alfa

50% przezroczystości

background: rgb(108 140 255 / 0.5);background: #6c8cff80;

/ 0.5 to nowoczesny sposób dodawania kanału alfa w CSS. Forma HEX dopisuje dwucyfrowy bajt alfa (80 ≈ 50%).

Częste błędy przy konwersji kolorów

Porównywanie jasności HSL między różnymi odcieniami. hsl(60 100% 50%) (żółty) i hsl(240 100% 50%) (niebieski) mają to samo L, ale zupełnie inną postrzeganą jasność. Do porównań wizualnych używaj OKLCH.
Zapominanie, że 3-cyfrowy HEX (#abc) to skrót formy 6-cyfrowej (#aabbcc).
Używanie rgba(...) zamiast nowoczesnej składni rgb(... / alpha). Obie działają, ale forma z ukośnikiem to aktualna specyfikacja i łatwiej ją czytać w narzędziach.
Dobieranie kolorów tylko względem czystej bieli lub czystej czerni. Testuj na prawdziwych kolorach tła i sprawdzaj kontrast WCAG.
Wpisywanie kolorów na sztywno głęboko w komponentach zamiast definiowania ich jako właściwości niestandardowych CSS w elemencie głównym.

Konwerter kolorów: FAQ

Jak zamienić HEX na RGB?

Podziel wartość HEX na pary (#RR, GG, BB) i zamień każdą parę z systemu szesnastkowego na dziesiętny. Albo wklej wartość do konwertera kolorów i od razu odczytaj wynik RGB.

Czym różni się HSL od OKLCH?

HSL jest wygodny i szeroko obsługiwany, ale nie jest percepcyjnie jednorodny: równe L nie zawsze wygląda na równie jasne. OKLCH jest percepcyjnie jednorodny, więc lepiej sprawdza się przy tworzeniu spójnych jaśniejszych i ciemniejszych odcieni oraz dostępnych palet.

Co oznacza skrót OKLCH?

OKLCH oznacza Oklab Lightness, Chroma, Hue, czyli jasność, chromę i odcień. Opiera się na przestrzeni kolorów Oklab, zaprojektowanej tak, by była percepcyjnie jednorodna: małe zmiany liczbowe wyglądają jak małe zmiany wizualne.

Jak sprawdzić kontrast kolorów pod kątem dostępności?

Oblicz współczynnik kontrastu WCAG między tekstem a tłem. WCAG AA wymaga co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (18 pt+ lub 14 pt pogrubiony). Konwerter kolorów, który pokazuje kontrast, oszczędza ci liczenia.

Używać w CSS HEX, RGB, HSL czy OKLCH?

Tego, z którym twój zespół czuje się najlepiej. HEX jest wszędzie, OKLCH to nowoczesny wybór dla systemów projektowych, a HSL świetnie się sprawdza, gdy chcesz zmieniać odcień lub jasność obliczeniami. Wszystkie cztery mają doskonałe wsparcie w przeglądarkach.