Pick colors and convert between HEX, RGB, HSL and CSS formats.
Colors get represented differently depending on where you're working — a designer might specify HSL, a developer writing CSS might need HEX or an RGB value, and print work uses entirely different systems altogether. This tool lets you pick or enter a color once and instantly see it expressed in HEX, RGB, HSL, and as a ready-to-use CSS variable, along with a set of lighter and darker shades generated automatically.
What's the difference between HEX, RGB, and HSL?
HEX and RGB both describe a color by its red, green, and blue components, just in different notations. HSL describes color by hue, saturation, and lightness instead, which many people find more intuitive for adjusting a color's brightness or intensity without changing its underlying hue.
How are the shade variations calculated?
Each shade blends your chosen color toward white (for lighter shades) or black (for darker shades) by a set percentage, giving you a consistent palette derived from a single base color.
Can I use the CSS variable output directly in my stylesheet?
Yes — it's formatted as a valid CSS custom property declaration that you can paste directly into a :root selector or any other CSS rule.