Enter HSL Values
Input or choose HSL values
See Results
View HEX and other formats
Copy or Use
Copy, save, or reuse your color
Choose a color visually, use sliders, or paste a value.
Quick Presets
#FF6347
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 is good for tweaking; hex is good for storing. After dialling in a color with hue, saturation, and lightness, this tool emits the canonical six-digit hex you can drop into design tokens, CSS custom properties, or API payloads. Saturation and lightness accept either bare numbers or percent-suffixed values.
Need to go the other direction? The same workbench can flip its output by switching the converter pair from the navigation links above.
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.
No. Saturation and lightness accept either bare numbers or percent-suffixed values.
Always the six-digit #RRGGBB form. Shorthand #RGB is not emitted to keep parsers safe.
Yes. Each value in the Results panel has its own copy button.