Konwerter HEX do HSL
Przelicz kolory CSS między formatami: HEX (#FF5733), RGB (255,87,51), HSL (hsl(11,100%,60%)), HSV i OKLCH. Obustronnie. Kopiuj gotowy kod CSS. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćKonwerter HEX ↔ HSL ↔ RGB ↔ OKLCH – wszystkie formaty kolorów CSS
Różne systemy kolorów CSS mają różne zastosowania: HEX jest popularny w designie, RGB potrzebny do nakładania przezroczystości, HSL intuicyjny przy modyfikacji jasności/nasycenia, OKLCH optymalny do generowania palet. Narzędzie konwertuje między wszystkimi formatami natychmiastowo.
Formaty kolorów CSS
HEX: #RRGGBB lub #RGB (skrót). Nowy: #RRGGBBAA (z alpha). RGB: rgb(R, G, B) lub rgba(R, G, B, A). HSL: hsl(H, S%, L%) – odcień 0-360°, nasycenie 0-100%, jasność 0-100%. OKLCH: oklch(L C H) – perceptualnie jednolity, CSS Level 4. HSV/HSB: używany w Photoshop i Figma. CMYK: druk (informacyjny – nie CSS native).
Matematyka konwersji HEX → RGB
HEX to pary cyfr szesnastkowych: #FF8C00 → R=0xFF=255, G=0x8C=140, B=0x00=0. JavaScript: parseInt("FF",16) = 255. Odwrotnie: (255).toString(16).padStart(2,"0") = "ff". Skrócony HEX (#RGB): każda cyfra powtórzona → #FAB = #FFAABB.
RGB → HSL – wzór
1. Normalizuj R,G,B do 0-1. 2. max = Math.max(r,g,b), min = Math.min(r,g,b). 3. L = (max+min)/2. 4. S: jeśli max==min → S=0 (szarość). Inaczej: S = (max-min)/(1-|2L-1|). 5. H: zależy od który kanał jest max. Wynik: hsl(H*60°, S*100%, L*100%).
Kiedy używać którego formatu
HEX: definicje kolorów w design systemach, komunikacja z projektantami. RGB(A): nakładanie kolorów z opacity, operacje matematyczne w JS. HSL: modyfikowanie odcienia, generowanie odcieni tło (np. hsl(220, 90%, 95%) = bardzo jasny niebieski). OKLCH (CSS 2024): palety, ciemny motyw, zapewnia perceptualną spójność.
Najczęstsze pytania
Co to jest oklch() i czym różni się od hsl()?
OKLCH (Lightness, Chroma, Hue): perceptualnie jednolity – zmiana L o 10 zawsze wygląda tak samo, niezależnie od koloru. HSL nie jest percepcyjnie jednolity – żółty o L=50% wygląda jaśniej niż fioletowy o L=50%. OKLCH jest rekomendowany do generowania palet i gradientów w CSS 2024.
Czy HEX może mieć kanał alpha (przezroczystość)?
Tak, #RRGGBBAA: np. #FF5733CC = pomarańczowy z 80% nieprzezroczystością (CC hex = 204/255 ≈ 0.8). Wsparcie: Chrome 62+, Firefox 49+, Safari 10+. IE: nie obsługuje. Alternatywa: rgba(255, 87, 51, 0.8).
Jak zmienić jasność koloru HSL w CSS?
hsl(220, 90%, 50%) – baza. Jaśniejszy: hsl(220, 90%, 70%). Ciemniejszy: hsl(220, 90%, 30%). W CSS variables: --color-base: 220, 90%; → color: hsl(var(--color-base), 50%). Pattern pozwala na łatwe generowanie wariantów w tym samym odcieniu.
Jak obliczyć kolor dopełniający (complementary) przez HSL?
Kolor dopełniający: H + 180° (mod 360). #FF5733 → HSL(11°, 100%, 60%) → dopełniający: H=191° → hsl(191, 100%, 60%) = cyjanowy. Triadyczne: H+120° i H+240°. Analogiczne: H±30°. Narzędzie automatycznie pokazuje dopełniające i inne harmonijne kolory.
Ile kolorów można reprezentować w HEX?
#RRGGBB: 256³ = 16 777 216 kolorów (16.7M). #RRGGBBAA: 256⁴ = 4 294 967 296 (4.3B z przezroczystością). Monitor sRGB: faktycznie wyświetla ok. 16.7M. Monitor P3 (szeroka gama): 68% więcej kolorów niż sRGB – CSS color(display-p3 ...) obsługuje je.
Powiązane narzędzia: generator nazw kolorów, blender kolorów HEX i sprawdzanie kontrastu kolorów.