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.

← All guides