Hex, RGB & HSL Color Converter
Enter a HEX or RGB color, then fine-tune it with HSL sliders.
#0ea5e9rgb(14, 165, 233)hsl(199, 89%, 48%)Convert a color, then adjust it with HSL
Enter a color as a HEX code like #0ea5e9, as RGB values in the R, G, and B boxes, or pick one with the color picker. The same color appears as HSL on the three sliders: hue (the color itself, 0 to 360 degrees around the color wheel), saturation (how vivid it is, 0 to 100 percent), and lightness (how light or dark, 0 to 100 percent).
Move a slider and every field updates together, so you can nudge a brand color a little lighter for a hover state, or less saturated for a background, and copy the result straight into your CSS as HEX, RGB, or HSL.
Why HSL is easier to adjust
Making a color lighter in HEX or RGB means changing three numbers at once. In HSL you only move lightness, and the hue stays put. Keep in mind that lightness changes contrast: after adjusting a text or background color, check it with the WCAG contrast checker. To explore hues visually, try the HSL color wheel.
Frequently asked questions
How do I convert a hex color to HSL?
Type or paste the hex code, like #0ea5e9, into the HEX field. The HSL values appear on the sliders and in the results, ready to copy as hsl(199, 89%, 48%).
How do I make a color lighter or darker?
Move the Lightness slider. Hue and saturation stay the same, so you get a lighter or darker version of the same color. Copy the new HEX, RGB, or HSL value when it looks right.
Can I enter RGB values instead of hex?
Yes. Type into the R, G, and B boxes (0 to 255 each), or paste a value like rgb(14, 165, 233) into the HEX field.
What is the difference between RGB and HSL?
RGB mixes red, green, and blue light. HSL describes the same color as hue (the color angle, 0 to 360), saturation (how vivid), and lightness (how light or dark), which is easier to adjust by eye.
Related tools
Practical utilities for everyday web development work.