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.
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.
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.
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”.