Convert a color between HEX, RGB and HSL notation — pick one with the color picker or type a value, and the other two formats update instantly. Useful for CSS work, matching brand colors, or moving a value out of a design tool into code.
Which formats are supported?
Convert colors instantly between HEX, RGB, and HSL notation. It's a quick helper for web design and CSS work, for matching brand colors, or for translating a value from a design tool into the format your code needs.
How to use the color converter
- Pick a color or enter a value — choose a color with the color picker, or type a HEX, RGB, or HSL value directly.
- Automatic conversion — the values in the other formats update instantly alongside it.
- Copy — grab the value you need with the "Copy" button next to each format.
How do HEX, RGB, and HSL differ?
HEX (e.g. #1a73e8) is a compact six-digit code common in CSS. RGB describes a color by its red, green, and blue channels (0–255). HSL uses hue, saturation, and lightness, which makes it easier to tweak a color by hand.
How do I read a HEX code?
HEX is written as #RRGGBB, with red, green, and blue each expressed as a two-digit hexadecimal value (00–FF, 0–255). For example, #FF0000 is red and #00FF00 is green. A three-digit shorthand (#RGB) is also used, which is the same as repeating each digit twice.
When should I use HSL?
It's intuitive when you rotate the hue alone to shift the tone, or adjust only saturation and lightness to create lighter and darker variants within the same color family. It's especially handy for fine-tuning colors by hand or building a palette in design work.
Where are the color values I enter sent?
Nowhere. All conversion happens entirely within your browser, so the values are never uploaded to a server, and it works offline too.