Color code converter
Convert a color between HEX, RGB, and HSL formats.
The color code converter parses a color entered as a hex code, rgb() value, or hsl() value, and displays all three equivalent representations at once, along with a preview swatch — handy whenever a design tool or piece of code needs a color in a specific format.
HEX: #ff6b4a
RGB: rgb(255, 107, 74)
HSL: hsl(11, 100%, 65%)
How to use
- Type a color as a hex code (#ff6b4a), rgb() value, or hsl() value.
- All three formats update to show the same color.
Common use scenarios
- Converting a hex color from a design file into the rgb() or hsl() format a piece of code expects.
- Checking what a color actually looks like from just its code.
- Converting between formats when moving a color between different tools.
- Fine-tuning a color's lightness or saturation using HSL, then getting the equivalent hex.
✓Content & verification reviewed: 2026-08-27
How we verify Color code converter
How to confirm the converted values represent the exact same color.
All three formats always describe the identical color
Hex, RGB, and HSL are just three different ways of writing down the same color — converting between them never changes what the color actually is, only how it's expressed.
The preview swatch is the fastest way to sanity-check the input
If the swatch doesn't look like the color you expected, double-check your input for a typo — a single wrong digit in a hex code can produce a very different color.
Only opaque colors are supported — no alpha/transparency
This tool works with fully opaque hex/rgb/hsl values; it doesn't parse or preserve an alpha channel (like rgba() or a hex code with an alpha component).
Before you rely on the result
- The preview swatch visually matches the color you intended to convert.
- You've copied the specific format (hex, rgb, or hsl) your target tool or code actually expects.
- You're aware this doesn't handle transparency/alpha values.
- You've double-checked for typos if the result doesn't look like the color you expected.
Who this is for
- Designers and developers converting a color between hex, rgb, and hsl.
- Anyone checking what a color code actually looks like.
- People moving a color value between different design tools.
- Anyone adjusting a color's lightness or saturation via HSL.
Real-world examples
Converting a design color to code
A developer takes a hex color from a design file and converts it to the rgb() format their CSS-in-JS code expects.
Checking a color before using it
Someone pastes in a hex code from documentation to preview what the color actually looks like before committing to it.
Adjusting lightness via HSL
A designer converts a base color to HSL, mentally adjusts the lightness value, and converts back to get a lighter or darker variant's hex code.
Limitations
- Doesn't support named CSS colors (e.g. "tomato") or alpha transparency — only opaque hex/rgb/hsl values.
Frequently asked questions
Do hex, RGB, and HSL ever represent slightly different colors?
No — for the same color, all three are exact equivalents. Any visible difference means one of the values has a typo or was entered incorrectly.
Can I convert a named CSS color like "tomato"?
Not directly — this tool parses hex, rgb(), and hsl() input only, not named CSS colors.
Does this support transparency?
No — only opaque colors are supported. Alpha/transparency values (like in rgba()) aren't parsed or preserved.
Why did my input get rejected?
Check that your hex code is exactly 6 hex digits, or that your rgb()/hsl() value uses the expected comma-separated format shown in the placeholder.
🔒 Runs in your browser — nothing is uploaded. Results are for reference only; see the disclaimer. Last updated: 2026-08-27
Subscribe for updates
New tools and tips, straight to your inbox. No spam, unsubscribe anytime.