Color Converter
Pick a color or enter a color code — HEX, RGB and HSL update automatically to show the same color.
How to use the color converter
- Use the color picker, or enter a HEX, RGB or HSL value directly.
- The other two formats update automatically to show exactly the same color.
- Press "Copy" next to the format you need.
What's the difference between HEX, RGB and HSL?
HEX (e.g. #2f6b4f) is the most common way to write colors in CSS and design tools — a base-16 code for red, green and blue.
RGB writes out the same three color components as numbers from 0–255 each, often easier to read and adjust by hand than HEX.
HSL (Hue/Saturation/Lightness) is often the most intuitive to adjust by hand: keep the hue fixed and change only the lightness for a lighter/darker variant of the same color.
Frequently asked questions
Why do some HEX codes only have 3 characters?
A shortened 3-character HEX code (e.g. #0f6) is a shorthand where each character is doubled (#0f6 becomes #00ff66) — useful when each color channel only needs one of 16 values.
Which format should I use in CSS?
All three are supported directly in modern CSS. HEX is the most compact and most common in design tools, RGB is often easiest to read, and HSL is useful when you want to create color variants (lighter/darker/more/less saturated) of the same base color.
Do you store the color I pick?
No. The conversion happens entirely in your own browser — nothing is sent to any server.