Convert colors between HEX, RGB, and HSL

Move a color between the notations designers and developers actually use.

By The DevFixPro Editorial Team · independent editorial research project

Private by design. Every tool linked below runs 100% in your browser — your code, text, and tokens never leave your device.

Design gave you HEX, the code wants RGB

A handoff arrives as #1f2937 but your style or canvas call needs rgb(31, 41, 55), or you want HSL so you can lighten a hue by rotating one number. Converting by hand invites an off-by-one that nobody notices until the shade is wrong.

Convert in every direction

The Color Converter translates between HEX, RGB, and HSL instantly and parses rgb() and hsl() strings too. Type one notation, read the other two, and copy the exact form your context needs.

When the value is a number, not a color

If you are converting the numeric components themselves — say, a hex channel to decimal — the Number Base Converter handles the hex-to-decimal step. For colors, though, the converter above does the whole translation for you.

Where it helps

  • Matching a design token to a CSS or canvas value.
  • Shifting lightness in HSL without recomputing by hand.
  • Sanity-checking a color copied from dev tools.

Frequently Asked Questions

Which format should I store a color in?

Store whichever the codebase already uses, since consistency matters more than the format itself. Convert only at the boundary where a design tool and the code disagree, and keep one canonical form in the source.

Why does changing lightness in HSL look different from scaling RGB?

Because HSL separates the hue and saturation from how light or dark the color is. Adjusting lightness moves toward white or black predictably, whereas scaling three channels independently shifts the hue as well.

Is a three digit hex value the same as a six digit one?

It is shorthand where each digit is doubled, so a short form like abc expands to aabbcc. Both describe the same color, and a converter confirms the equivalence when you are comparing values from different sources.

← All guides

Related tools from our network

A focused set of free calculators and guides across related topics — no account required.