About this tool
This color converter translates between HEX, RGB and HSL in both directions, with a live swatch preview and a picker. HEX (e.g. #3B82F6) is common in CSS, RGB maps directly to red/green/blue channels, and HSL describes color by hue/saturation/lightness — handy for tweaking brightness or building palettes.
Edit any one format and the other two update in sync, with the actual color shown instantly. All conversion runs locally in your browser, so designers and frontend devs can switch between notations quickly.
How to use
- Pick a color with the picker, or type a value in any format.
- See the other two formats update in sync.
- To make it lighter or darker, adjusting HSL lightness is most intuitive.
- Click copy on the format you need.
- Paste the value into your CSS, design tool or code.
When to use it
- Turning a design-file color into CSS-ready HEX.
- Using HSL to nudge a theme color lighter or darker for shade ramps.
- Checking that the same color matches between design tool and code.
- Deriving HEX from RGB values, or the other way around.
- Quickly trying different saturation/lightness to judge the look.
FAQ
What is the difference between HSL and RGB, and which should I use?
RGB mixes red/green/blue channels; HSL describes hue/saturation/lightness. HSL is easier for adjusting brightness and finding shades in a hue; RGB suits hardware and pixel data.
Does it support colors with transparency (alpha)?
The core conversion targets opaque colors. Transparency is usually expressed as RGBA/HSLA or 8-digit HEX, which you can add after converting.
Are 3-digit HEX shorthands like #f00 recognized?
The 3-digit shorthand expands each digit (#f00 = #ff0000). It is parsed as the full six-digit value before converting.