Overview
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.
Best for: Translating a designer's HSL spec into CSS-ready hex
How to use this tool
- 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.
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."