Konwerter kolorów (HEX, RGB, HSL)
Konwertuj kolory między HEX (#RRGGBB), RGB (0–255) i HSL (odcień, nasycenie, jasność) w czasie rzeczywistym. Użyj pickera albo wpisz wartości — wszystkie formaty aktualizują się razem. Idealne do CSS, przekazania z Figma i brand guidelines. HSL ułatwia intuicyjne korekty (jaśniej/ciemniej bez zmiany odcienia) lepiej niż edycja cyfr hex.
Kolor
Wynik
HEX: #6f9b96
RGB: rgb(111, 155, 150)
HSL: hsl(173, 18%, 52%)
Jak konwertować kolory
1. Wybierz kolor wizualnie albo wpisz HEX, RGB lub HSL.
2. Zobacz równoważne wartości we wszystkich formatach od razu.
3. Koryguj jasność HSL dla stanów hover, zachowując odcień marki.
4. Skopiuj format potrzebny w stacku (#hex dla CSS, rgb() dla nowoczesnych przeglądarek).
Przykłady konwersji kolorów
Niebieski marki #2563EB
RGB rgb(37, 99, 235); HSL hsl(217, 84%, 53%). Ciemniejszy hover: hsl(217, 84%, 45%) bez zgadywania hex.
CSS rgb na HEX dla SVG
rgb(255, 87, 51) → #FF5733 do fill SVG i zasobów koloru Android XML.
Neutralny szary obramowań
hsl(220, 10%, 90%) → bardzo jasny chłodny szary; lekko podnieś nasycenie dla tła UI z odcieniem.
Kiedy warto użyć tego narzędzia
• Gdy tłumaczysz tokeny designu między HEX w Figma a HSL w zmiennych CSS.
• Gdy budujesz spójne motywy jasny/ciemny przez przesunięcie jasności HSL.
• Gdy dokumentujesz palety marki dla developerów i marketingu.
Kiedy lepiej wybrać coś innego
• Gdy musisz zweryfikować kontrast WCAG — użyj testera kontrastu.
• Gdy potrzebujesz CMYK lub Pantone do druku — narzędzia drukarskie.
• Gdy generujesz pełne gradienty — generator gradientów CSS.
Teoria koloru w UI
Kolory dopełniające leżą naprzeciw na kole odcieni (180°) — wysoki kontrast, oszczędnie na CTA. Analogiczne odcienie (±30°) br brzmią harmonijnie na dashboardach. Neutralny chrome UI często to niskonasycone błękity lub szarości (hsl 220, 10%, 96%) zamiast czystego #EEE, który bywa ciepły/zimny na różnych ekranach. Ogranicz paletę marki do jednego primary hue, 2–3 neutrali i semantycznych zieleni/czerwieni statusu.
Dostępność zaczyna się przy konwersji
Piękny fiolet #7C3AED na białym może nie przejść kontrastu dla małego tekstu. Po wyborze kolorów tutaj przepuść pary foreground/background przez tester kontrastu. Preferuj korekty HSL: przyciemnij tekst lub rozjaśnij tło, zachowując odcień. Nie polegaj wyłącznie na kolorze przy błędach — dodaj ikony i etykiety (WCAG 1.4.1).
Najczęstsze pytania
Do czego służy HSL?
Regulacja jasności i nasycenia przy stabilnym odcieniu — np. primary, primary-hover, primary-muted z jednej wartości hue.
Skrót HEX #RGB?
#F53 rozwija się do #FF5533. Akceptujemy hex 3- lub 6-cyfrowy (opcjonalnie #).
sRGB vs display-P3?
Narzędzie używa sRGB, standardu web CSS. Szerokogamutowe ekrany mogą renderować nieco inaczej.
Alfa / przezroczystość?
8-cyfrowy HEX (#RRGGBBAA) i rgba() mogą być wspierane tam, gdzie UI ma pola alpha — sprawdź interfejs.
Dlaczego sumy RGB źle wyglądają w hex?
Każdy kanał to 0–255 → dwie cyfry hex. 255 = FF, nie sklejone „255”.
Czy dane są wysyłane na serwer?
Nie.
Czy narzędzie jest darmowe?
Tak.