Every color format, always in sync
Pick a color from the swatch or type a value in any format, and the HEX, RGB and HSL fields update together instantly — along with a live preview and copy-ready CSS strings. It's the quick reference for translating a color between the notations you use in design tools, CSS and code.
The three formats
- HEX — a six-digit code like #10B981, two digits each for red, green and blue. Compact and the most common in CSS.
- RGB — the same three channels as decimal numbers from 0 to 255, e.g. rgb(16, 185, 129).
- HSL — hue (0–360°), saturation and lightness (0–100%), which maps to how we naturally describe color.
When each is handy
Reach for HEX when copying between design apps and CSS, RGB when you need transparency with rgba() or per-channel control, and HSL when you want to build a palette — nudge the lightness for tints and shades, or rotate the hue for complementary colors, without touching three separate channels.
Frequently asked questions
How do I convert a HEX color to RGB?
A HEX color splits into three pairs of hexadecimal digits for red, green and blue. Each pair converts to a number from 0 to 255. For example #10B981 is red 16, green 185, blue 129, or rgb(16, 185, 129).
What is HSL and why use it?
HSL stands for hue, saturation and lightness. It describes color the way people think about it, which makes it easy to create tints and shades by adjusting lightness, or related colors by shifting the hue, without juggling three RGB channels.
Are the conversions exact?
HEX and RGB are exact equivalents. HSL values are rounded to whole numbers for readability, so converting to HSL and back can shift a channel by one, which is visually imperceptible.