Konwerter kolorów — konwerter HEX, RGB, HSL online _

Czym jest konwersja kolorów?

Każdy kolor renderowany przez Twoją przeglądarkę ostatecznie jest trójką sRGB — trzy liczby od 0 do 255 dla kanałów czerwonego, zielonego i niebieskiego, plus opcjonalna alfa. Specyfikacja CSS Color Level 4 definiuje kilka tekstowych formatów, które wracają do tej samej trójki, plus percepcyjnie jednolitą przestrzeń OKLCH. To narzędzie czyta dowolny z nich, konwertuje na wszystkie i raportuje współczynnik kontrastu WCAG 2.1 względem drugiego koloru, dzięki czemu możesz z pewnością dostarczać dostępne interfejsy.

Jak działa konwersja kolorów?

Konwersja to seria dobrze zdefiniowanych transformacji liniowych i nieliniowych. Każdy krok działa w Twojej przeglądarce — żadne dane wejściowe nigdy nie trafiają na nasze serwery:

1. Twoje wejście jest parsowane. Narzędzie automatycznie wykrywa HEX o 3, 4, 6 lub 8 cyfrach, formy funkcyjne rgb()/rgba()/hsl()/hsla()/hsv()/hwb() w starszej składni z przecinkami lub nowoczesnej składni z ukośnikiem-alfą, lub dowolny ze 150 nazwanych kolorów CSS (z rebeccapurple włącznie).
2. Sparsowany kolor jest normalizowany do kanonicznego sRGB — cztery liczby zmiennoprzecinkowe {r, g, b, a}, każda w zakresie 0–1. To jedyne źródło prawdy, z którego wyprowadzany jest każdy format wyjściowy.
3. HEX powstaje przez zaokrąglenie każdego kanału do jego wartości bajtowej 0–255 i połączenie cyfr szesnastkowych. RGB / RGBA drukują te same bajty. HSL i HSV stosują standardowe algorytmy współrzędnych cylindrycznych W3C; HWB wyprowadza odcień z HSV, biel z min(r, g, b), a czerń z 1 - max(r, g, b).
4. CMYK to naiwne przybliżenie — k = 1 - max(r, g, b), a następnie c, m, y z pozostałych kanałów. Nadaje się do podglądu na ekranie, ale nie do druku: prawdziwy wynik CMYK wymaga profilu ICC, którego to narzędzie celowo nie osadza.
5. OKLCH podąża ścieżką w przód css-color-4: sRGB jest linearyzowane, mnożone przez macierz LMS, pierwiastkowane sześciennie, mnożone przez macierz LMS-do-OKLab, a wreszcie konwertowane z prostokątnego OKLab do biegunowego OKLCH. OKLCH jest percepcyjnie jednolity, co czyni go właściwą przestrzenią do projektowania palet, które wyglądają zrównoważenie dla ludzkiego oka.

Dlaczego używać tego konwertera kolorów?

• Prywatność: każda konwersja działa w Twojej przeglądarce w czystym JavaScripcie. Wklejony kolor nigdy nie opuszcza Twojego urządzenia, co ma znaczenie dla niewydanych prac brandingowych, wewnętrznych systemów projektowych i makiet klienckich pod NDA.
• Przekazanie projekt–programowanie: wklej HEX z Figmy i odczytaj ciąg rgb() dla konfiguracji Tailwinda, ciąg hsl() dla niestandardowej właściwości CSS lub ciąg oklch() dla nowoczesnej palety — każdy format w jednym miejscu, bez kopiowania między kartami.
• Dokładność WCAG: narzędzie kontrastu używa dokładnej formuły luminancji względnej WCAG 2.1 oraz opublikowanych progów AA (4,5 / 3,0) i AAA (7,0 / 4,5) dla tekstu normalnego i dużego. Raportowany współczynnik pasuje do kalkulatorów ręcznych z dokładnością do 0,01.
• Tryb ciemny i wyprowadzanie palet: HSL i OKLCH wystawiają jasność jako pojedynczy kanał, więc łatwo przesunąć kolor marki w górę lub w dół osi jasności, aby wyprowadzić dopasowane tokeny trybu ciemnego lub wygenerować 10-stopniową rampę palety z jednego ziarna.

Jakie są typowe zastosowania konwersji kolorów?

Konwersja kolorów pojawia się w pracy nad rozwojem stron, projektowaniem i dostępnością:

• Systemy projektowe: konwersja HEX-a marki na dopasowane tokeny HSL i OKLCH dla skali niestandardowych właściwości CSS, a następnie weryfikacja, że każda kombinacja tokenów przechodzi WCAG AA względem tła strony.
• Audyty dostępności: wklejenie pary pierwszy plan/tło z rzeczywistego ekranu produktu i odczytanie współczynnika kontrastu plus werdyktów AA/AAA dla tekstu o normalnej i dużej wadze jednym spojrzeniem.
• Cykle między narzędziami: pobranie koloru z próbnika ze zrzutu ekranu (HEX), wklejenie tutaj i skopiowanie ciągu hsl() lub oklch() wprost do Tailwinda, tokenów Figmy lub motywu CSS-in-JS.

Jak wygląda przykład konwersji kolorów?

Weź słynny rebeccapurple. Wyszukiwanie nazwanego koloru rozwiązuje go na #663399. Konwersja RGB daje rgb(102, 51, 153). Konwersja HSL daje hsl(270, 50%, 40%) — fioletowy odcień, w połowie nasycony, cztery dziesiąte jasności. Sprawdzenie tego koloru względem czystej bieli za pomocą narzędzia kontrastu zwraca współczynnik bliski 7,39, co przechodzi AAA (7,0) dla tekstu normalnego i AAA (4,5) dla tekstu dużego — silny, dostępny wybór pierwszego planu. Cykl #663399 przez RGB → HSL → RGB → HEX zwraca oryginalny ciąg dokładnie, bajt po bajcie.

Używaj tego konwertera jako szybkiego odniesienia do każdego koloru, który napotkasz — w kodzie, w plikach projektowych lub na zrzucie ekranu — a narzędzia kontrastu jako sprawdzianu rozsądku przed dostarczeniem. Wszystko działa lokalnie, nic nie jest logowane, a matematyka konwersji jest zgodna z opublikowanymi specyfikacjami W3C i WCAG, więc liczby pasują do tego, co zgłosiłoby Twoje narzędzie audytujące lub devtools przeglądarki.