Konwerter formatów kolorów tłumaczy dowolny kolor między formatami HEX, RGB, HSL, HSV i OKLCH. Wybierz kolor za pomocą systemowego próbnika, wpisz wartość hex, wklej dowolny ciąg koloru CSS lub dostosuj suwaki RGB — każdy format aktualizuje się na żywo i posiada własny przycisk kopiowania.
Współczesny CSS oferuje tuzin sposobów na zapisanie tego samego koloru: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), a także ich warianty z kanałem alfa. Często zachodzi potrzeba konwersji między nimi — projekt w Figmie dostarcza OKLCH, Twój kod używa HEX, a zmienne motywu wymagają HSL do obsługi efektów najechania. Konwerter formatów kolorów wykonuje wszystkie konwersje w jednym panelu. Wybierz barwę z próbnika, wklej istniejący kolor w dowolnej składni lub użyj suwaków RGB. Wszystkie popularne formaty są renderowane jednocześnie: HEX (z alfa), rgb()/rgba(), hsl()/hsla(), hsv() oraz oklch() — dodatkowo otrzymujesz fragment kodu dla zmiennej CSS oraz obliczoną wartość luminancji do szybkich wyliczeń kontrastu. Kanał alfa jest obsługiwany kompleksowo. Każdy format ma własny przycisk kopiowania, a parser akceptuje nazwy kolorów i wszystko, co wspiera standard CSS.
Wyświetla HEX, RGB/RGBA, HSL/HSLA, HSV i OKLCH jednocześnie — wybierz format, którego oczekuje Twój kod, bez konieczności wielokrotnej konwersji.
Akceptuje HEX (#abc, #aabbcc lub #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() oraz nazwy kolorów. Wklej cokolwiek, co obsługuje CSS.
Obsługuje nowy format OKLCH używany w nowoczesnym CSS — percepcyjnie jednolita przestrzeń barw, która staje się nowym standardem w systemach projektowych.
Każdy wynik ma własny przycisk kopiowania. Kliknij, aby pobrać dokładnie ten format, którego potrzebujesz w kodzie, bez ręcznego zaznaczania.
Dostosuj suwaki Red/Green/Blue/Alpha dla precyzyjnego strojenia. Każdy format aktualizuje się w czasie rzeczywistym podczas przesuwania.
Przezroczystość jest obsługiwana w każdym formacie: #RRGGBBAA, rgba(...), hsla(...). Ustaw raz, przekonwertuj wszędzie.
Figma podaje OKLCH lub HSL — wklej je i skopiuj odpowiednik HEX dla konfiguracji Tailwind lub zmiennych CSS bez opuszczania przeglądarki.
Używaj suwaków do odkrywania odcieni, zapisując wartości OKLCH dla systematycznej palety w systemie projektowym.
Skonwertuj kolor marki na format HSL, aby móc używać hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) dla stanów najechania.
Pole luminancji podaje surową wartość używaną w obliczeniach kontrastu WCAG — przydatne przy wyliczaniu dostępności (a11y).
Wklej oklch(...) z czytanego pliku CSS i natychmiast zobacz, jaki kolor w rzeczywistości reprezentuje.
Kliknij ikonę Color Formats w panelu DevSuite Pro. Otworzy się panel z próbnikiem kolorów, polem hex i suwakami RGB.
Użyj próbnika, wpisz hex lub wklej dowolny ciąg koloru CSS (rgb(...), oklch(...) itp.). Podgląd koloru pojawi się natychmiast.
Każdy format wyświetla się poniżej: HEX, RGB, HSL, HSV, OKLCH, zmienna CSS i luminancja. Wszystkie pozostają zsynchronizowane podczas regulacji.
Przesuwaj suwaki R/G/B/A dla precyzyjnych korekt. Idealne do dopasowania konkretnego odcienia do specyfikacji projektu.
Kliknij Kopiuj w wierszu wybranego formatu — wartość trafi do schowka w poprawnej składni.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 64 narzędzi programistycznych dla swojej przeglądarki.
