← All Tools
HSL To HEX Picker Converter🔒 100% local
Convert HSL, RGB, HSV, Hex colors. Privacy-first, no server uploads, no tracking.
Converts an HSL triple such as 120, 100%, 50% (the hsl() wrapper is optional) into hex, rgb() and hsl() forms, reports the WCAG contrast ratio against white and black with the text colour to use on top, and lists four harmony hues. The HSL-to-RGB conversion and the contrast maths run in the page, and nothing is stored afterwards.
How to use it
- Type the hue, then saturation and lightness with percent signs: 120, 100%, 50%.
- Press Process.
- The first line is the hex. Use the WCAG line to pick a readable text colour for that background.
Worked example
120, 100%, 50%becomes#00FF00
====
RGB: rgb(0, 255, 0)
HSL: hsl(120, 100%, 50%)
CSS: color: #00FF00; /* short: #0F0 */
WCAG contrast: vs white = 1.37:1 | vs black = 15.30:1
→ Use #000000 text on this background (AA: 15.30:1, passes)
Complementary hsl(300, 100%, 50%)
Analogous hsl(150, 100%, 50%), hsl(90, 100%, 50%)
Triadic hsl(240, 100%, 50%), hsl(0, 100%, 50%)hsl(210, 50%, 40%)becomes#336699
====
RGB: rgb(51, 102, 153)
HSL: hsl(210, 50%, 40%)
CSS: color: #336699; /* short: #369 */
WCAG contrast: vs white = 6.00:1 | vs black = 3.50:1
→ Use #FFFFFF text on this background (AA: 6.00:1, passes)
Complementary hsl(30, 50%, 40%)
Analogous hsl(240, 50%, 40%), hsl(180, 50%, 40%)
Triadic hsl(330, 50%, 40%), hsl(90, 50%, 40%)When to use it
- You picked a colour in HSL because you wanted to control lightness, and a brand guide or a design tool needs the hex.
- You are about to ship a button and want to know whether black or white text will stay readable on the background.
- You need the complementary or triadic hues of an existing brand colour without opening a colour-wheel app.
What it does not do
- The input shape is narrow: integer degrees, then two percentages. CSS Color 4 space-separated syntax such as hsl(210 50% 40%) is rejected, and so is a hue written in turns or radians.
- There is no alpha channel, so rgba, hsla and eight-digit hex are never produced, and the contrast ratio is reported only against pure white and black.
- The harmony hues keep your saturation and lightness and just rotate the hue by 180, 30 or 120 degrees - a mechanical offset, not a colour-theory recommendation.