HSL Color Picker

HEX code —

CSS hsl(): —
RGB: —
HSV / HSB: —
CMYK (naive): —
Readable text colour: —

Move the hue, saturation and lightness sliders and the picker converts the colour to HEX, RGB, HSV and CMYK straight away. For example, hsl(210, 50%, 40%) becomes RGB 51, 102, 153, which is #336699. It also suggests black or white text by WCAG contrast ratio and lists the same hue from 10% to 90% lightness.

About this tool

HSL describes a colour the way designers think about it: which hue, how vivid, how light. That makes it easy to build a palette by keeping one hue and moving lightness, but most design files, brand guides and older CSS still expect a HEX or RGB code. This picker takes the three HSL values from sliders or typed numbers and returns the HEX code, the rgb() and hsl() strings ready to paste into a stylesheet, the HSV value used by many graphics editors, and a naive CMYK split. A table lists nine shades of the same hue and saturation, from 10% to 90% lightness, for hover states and borders. One limit: the CMYK figures are a straight arithmetic conversion with no printer colour profile, so treat them as a starting point, not a press-ready value.

How to use it

Set the hue
Drag the hue slider or type a degree from 0 to 360. Red sits at 0, green at 120 and blue at 240.
Adjust saturation and lightness
Lower saturation towards grey, and move lightness between black at 0% and white at 100%.
Copy the code you need
Read the HEX code at the top and the rgb(), hsl(), HSV and CMYK strings below it.
Pick a related shade
Use the table of lightness steps to find lighter or darker versions of the same colour.

Examples

Pure red

Hue: 0
Saturation: 100
Lightness: 50

Result HEX code: #FF0000
CSS hsl(): hsl(0, 100%, 50%)
RGB: rgb(255, 0, 0)
HSV / HSB: hsv(0, 100%, 100%)
CMYK (naive): cmyk(0%, 100%, 100%, 0%)
Readable text colour: Black text (5.25:1)

C = (1 − |2 × 0.5 − 1|) × 1 = 1
X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 0
m = L − C ÷ 2 = 0
RGB = round((channel + m) × 255) = 255, 0, 0 → #FF0000

Hue 0 at full saturation and 50% lightness is the most vivid red a screen can show, #FF0000.

The CSS keyword green

Hue: 120
Saturation: 100
Lightness: 25

Result HEX code: #008000
CSS hsl(): hsl(120, 100%, 25%)
RGB: rgb(0, 128, 0)
HSV / HSB: hsv(120, 100%, 50%)
CMYK (naive): cmyk(100%, 0%, 100%, 50%)
Readable text colour: White text (5.14:1)

C = (1 − |2 × 0.25 − 1|) × 1 = 0.5
X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 0
m = L − C ÷ 2 = 0
RGB = round((channel + m) × 255) = 0, 128, 0 → #008000

Halving the lightness of pure green gives the darker #008000 that CSS calls green.

A muted blue

Hue: 210
Saturation: 50
Lightness: 40

Result HEX code: #336699
CSS hsl(): hsl(210, 50%, 40%)
RGB: rgb(51, 102, 153)
HSV / HSB: hsv(210, 67%, 60%)
CMYK (naive): cmyk(67%, 33%, 0%, 40%)
Readable text colour: White text (6:1)

C = (1 − |2 × 0.4 − 1|) × 0.5 = 0.4
X = C × (1 − |(H ÷ 60) mod 2 − 1|) = 0.2
m = L − C ÷ 2 = 0.2
RGB = round((channel + m) × 255) = 51, 102, 153 → #336699

hsl(210, 50%, 40%) works out by hand to RGB 51, 102, 153, the web-safe #336699.

How it is calculated

C = (1 − |2L − 1|) × S; X = C × (1 − |(H ÷ 60) mod 2 − 1|); m = L − C ÷ 2; RGB = (R′ + m, G′ + m, B′ + m) × 255

H: Hue in degrees, 0 to 360
S, L: Saturation and lightness as fractions from 0 to 1
C: Chroma, the colourfulness of the result
X: The second-largest component inside the hue's 60° sector
m: The amount added to every channel to match lightness

This is the conversion given in the CSS Color specification. The hue picks one of six 60° sectors, which decides which of R′, G′ and B′ take C, X and 0. Adding m and multiplying by 255 gives the 8-bit channels, which are rounded and written as two hexadecimal digits each. HSV, CMYK and the WCAG contrast ratio are then derived from those rounded RGB values.

When not to use it

Use a colour-managed editor for print work, because this CMYK has no ICC profile.
Use OKLCH or LCH when shades must look evenly spaced, since HSL lightness is not perceptual.
Use a contrast checker with your real text and background pair for accessibility sign-off.

Common mistakes

Expecting yellow and blue at 50% lightness to look equally bright; HSL ignores perceived brightness.
Confusing HSL lightness with HSV value, which describe different things for the same colour.
Pasting the CMYK numbers straight into a print job without a proof.

Frequently asked questions

What is the difference between HSL and HSV?

Both share the same hue, but HSL places the pure colour at 50% lightness, with 100% always white, while HSV places it at 100% value. Pure red is hsl(0, 100%, 50%) and hsv(0, 100%, 100%). Photoshop and many pickers use HSV (called HSB), while CSS uses HSL.

Why does the hue slider do nothing at times?

When saturation is 0% the colour is a grey, and when lightness is 0% or 100% it is black or white. In all three cases the hue has no visible effect, so the HEX code stays the same as you move it.

Can I use the hsl() value directly in CSS?

Yes. The comma-separated hsl(210, 50%, 40%) form works in every browser. Modern CSS also accepts the space-separated hsl(210 50% 40%) syntax, which gives the same colour.

How is the suggested text colour chosen?

The picker computes the colour's relative luminance as defined in WCAG 2, then the contrast ratio against white and against black. It suggests whichever is higher. A ratio of at least 4.5:1 meets WCAG AA for normal body text.

Why does a HEX code converted back to HSL give slightly different numbers?

Each RGB channel is stored as a whole number from 0 to 255, so some HSL values land between two possible codes. Converting the rounded HEX back can shift hue or saturation by a fraction of a unit, while the colour on screen stays identical.

How do I build a palette from one colour?

Keep the hue and saturation fixed and step the lightness. The table does this in 10% steps, which gives tints for backgrounds near 90% and shades for text or borders near 20% to 30%.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 12). HSL Color Picker. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/design/color-converters-and-codes/hsl-color-picker/

MLA

Tools Directory Editorial Team. “HSL Color Picker.” Tools Directory, 12 Oct. 2026, https://tools.milunir.com/design/color-converters-and-codes/hsl-color-picker/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “HSL Color Picker.” Tools Directory. Last modified October 12, 2026. Accessed October 26, 2026. https://tools.milunir.com/design/color-converters-and-codes/hsl-color-picker/.

Link

<a href="https://tools.milunir.com/design/color-converters-and-codes/hsl-color-picker/">HSL Color Picker – Tools Directory</a>