AK
appkiro.comEnter HEX Values
Input or choose HEX values
See Results
View HSL and other formats
Copy or Use
Copy, save, or reuse your color
Choose a color visually, use sliders, or paste a value.
Quick Presets
hsl(9, 100%, 64%)
tomato
PreviewOriginal
rgb(255, 99, 71)
Lighten 20%
rgb(255, 130, 108)
Darken 20%
rgb(204, 79, 57)
Complementary
rgb(71, 227, 255)
Aa
With White Text
Aa
With Black Text
Other Formats
Color Palette
Did you know?
You can pick a color from your screen in browsers that support the EyeDropper API.
HSL describes a color through hue, saturation, and lightness, which is more intuitive than raw channel values when you want to nudge a color brighter or less vivid. The tool first parses your hex code into sRGB, then derives the standard CSS hsl() representation. It is most useful when porting brand hex codes into design systems where lightness ramps drive variants.
Pure greys collapse hue to 0 because hue is undefined when saturation is zero. Saturation and lightness are reported as integer percentages.
Need more notations? Open the Color Converter for HEX, RGB, HSL, LAB, OKLAB, and OKLCH, or use the Color Contrast Checker to validate foreground/background pairs before shipping.
Hue is undefined when saturation is zero, so the converter reports 0 to keep the hsl() string parsable.
Yes. Both are returned as integer percentages so the output is a valid CSS hsl() value.
Yes. #abc is expanded to #aabbcc before being converted.