HEX, RGB & HSL Color Converter
Convert colors between HEX, RGB, and HSL formats at once, with a live swatch preview.
How this tool works
Choose the input format
HEX, RGB, or HSL - selected explicitly, matching how the value was given to you.
Enter the color value
A 3- or 6-digit hex code, an rgb() value, or an hsl() value.
See the live swatch
A color preview updates immediately so you can confirm it looks right.
Copy any format
HEX, RGB, and HSL all appear at once, each with its own copy button.
Quick facts
- Category
- Converters
- Best for
- Translating a designer's HSL spec into CSS-ready hex
About this tool
Enter a color in HEX (3 or 6 digits), RGB, or HSL format and see it instantly converted into all three representations at once, alongside a live color swatch so you can visually confirm the value looks right before copying it into your CSS. Each input format is validated against its own rules - HEX must be exactly 3 or 6 hexadecimal digits, RGB channels must fall between 0 and 255, and HSL’s saturation and lightness must be valid percentages with hue between 0 and 360 - so an out-of-range value is caught with a specific message rather than silently clamped or misread. Handy for translating a designer’s HSL spec into the HEX value a codebase expects, or checking what a given HEX color actually looks like. Runs entirely client-side.
Why use this tool
All three formats at once
See HEX, RGB, and HSL together instead of converting one pair at a time.
Live visual confirmation
The color swatch updates immediately so you can catch a wrong value before it ships in CSS.
Per-format validation
Each input format is checked against its own valid range, with a specific error if something’s off.
Built for design handoff
Makes it easy to translate a designer’s HSL spec into the HEX value your codebase actually uses.
Frequently asked questions
HEX accepts 3-digit shorthand (like #38F) or full 6-digit values (like #3B82F6), with or without the leading "#". RGB expects the standard rgb(r, g, b) syntax with each channel from 0-255 (an optional alpha value is accepted but ignored). HSL expects hsl(h, s%, l%) with hue from 0-360 and saturation/lightness as percentages from 0-100.
HSL describes color the way a person naturally thinks about it - hue (which color), saturation (how vivid), and lightness (how light or dark) - which makes it much easier to create a palette of related colors by adjusting just one value, like darkening a brand color by lowering lightness while keeping hue and saturation fixed. HEX and RGB describe the same colors but in terms of red/green/blue channel mixing, which doesn’t map intuitively onto "make this darker" or "make this less saturated."
Explore more free tools
Formatters, converters, validators, and generators - all free and running entirely in your browser.
Browse more tools