Hex Hsl Converter
Fast, accurate and free online hex hsl converter tool running directly in your browser.
-
1Enter data
Enter content, paste text or load a file from disk. -
2Click the button
The tool will immediately process your data in the browser. -
3Get the result
Copy the finished text or save the file to your device.
return "Result ready in 0.1s";
}
Rate this tool:
Related tools
Other tools you may find usefulHEX ↔ HSL ↔ RGB ↔ OKLCH converter – all CSS color formats
Different CSS color systems have different applications: HEX is popular in design, RGB is needed for applying transparency, HSL is intuitive for modifying brightness/saturation, OKLCH is optimal for generating palettes. The tool converts between all formats instantly.
CSS color formats
HEX: #RRGGBB or #RGB (abbreviation). New: #RRGGBBAA (with alpha). RGB: rgb(R, G, B) or rgba(R, G, B, A). HSL: hsl(H, S%, L%) – hue 0-360°, saturation 0-100%, brightness 0-100%. OKLCH: oklch(L C H) – perceptually uniform, CSS Level 4. HSV/HSB: used in Photoshop and Figma. CMYK: print (informational – not CSS native).
Conversion Mathematics HEX → RGB
HEX is pairs of hexadecimal digits: #FF8C00 → R=0xFF=255, G=0x8C=140, B=0x00=0. JavaScript: parseInt("FF",16) = 255. Conversely: (255).toString(16).padStart(2,"0") = "ff". Abbreviated HEX (#RGB): each digit repeated → #FAB = #FFAABB.
RGB → HSL – pattern
1. Normalize R,G,B is 0-1. 2. max = Math.max(r,g,b), min = Math.min(r,g,b). 3. L = (max+min)/2. 4. S: if max==min → S=0 (gray). Otherwise: S = (max-min)/(1-|2L-1|). 5. H: depends on which channel is max. Result: hsl(H*60°, S*100%, L*100%).
When to use which format
HEX: color definitions in design systems, communication with designers. RGB(A): color overlay with opacity, mathematical operations in JS. HSL: modify hue, generate background hues (e.g. hsl(220, 90%, 95%) = very light blue). OKLCH (CSS 2024): palettes, dark theme, provides perceptual consistency.
FAQ
What is oklch() and how is it different from hsl()?
OKLCH (Lightness, Chroma, Hue): Perceptually uniform - a change of L by 10 always looks the same, regardless of color. HSL is not perceptually uniform - yellow with L=50% looks brighter than purple with L=50%. OKLCH is recommended for generating palettes and gradients in CSS 2024.
Can HEX have an alpha channel (transparency)?
Yes, #RRGGBBAA: e.g. #FF5733CC = orange with 80% opacity (CC hex = 204/255 ≈ 0.8). Support: Chrome 62+, Firefox 49+, Safari 10+. IE: not supported. Alternative: rgba(255, 87, 51, 0.8).
How to change HSL color brightness in CSS?
hsl(220, 90%, 50%) – base. Brighter: hsl(220, 90%, 70%). Darker: hsl(220, 90%, 30%). In CSS variables: --color-base: 220, 90%; → color: hsl(var(--color-base), 50%). Pattern allows you to easily generate variants in the same shade.
How to calculate complementary color via HSL?
Complementary color: H + 180° (mod 360). #FF5733 → HSL(11°, 100%, 60%) → complementary: H=191° → hsl(191, 100%, 60%) = cyan. Triadic: H+120° and H+240°. Analogous: H±30°. The tool automatically shows complementary and other harmonious colors.
How many colors can be represented in HEX?
#RRGGBB: 256³ = 16,777,216 colors (16.7M). #RRGGBBAA: 256⁴ = 4,294,967,296 (4.3B with transparency). sRGB monitor: actually displays approx. 16.7M. P3 monitor (wide gamut): 68% more colors than sRGB - CSS color(display-p3 ...) supports them.
Related Tools: Color Name Generator, HEX Color Blender, and Color Contrast Checker.