Color Code Converter

Converts colour codes between HEX, RGB and HSL — paste any one form and read the other two. #1a73e8, rgb(26, 115, 232) and hsl(214, 82%, 51%) are the same colour in three notations, and different tools insist on different ones.

How to use

1. Paste or type a colour in any notation — HEX with or without the #.
2. Read the same colour in the other notations, with a live swatch.
3. Copy the form your stylesheet, design tool or framework wants.
4. To make a colour lighter, darker or greyer, adjust the HSL numbers — that is what they are for.

When you actually need this

• Translating a designer's HEX into the rgb() or hsl() a stylesheet convention requires.
• Turning a brand colour into HSL to derive hover and disabled variants systematically.
• Converting an rgba() from browser devtools into HEX for a config file.
• Unifying a codebase where colours arrived in three notations over the years.

Three notations, one job each

All three encode the same sRGB colour. HEX is the compact interchange form — two hex digits each for red, green, blue. RGB exposes the channels, useful when code computes colours or adds alpha. HSL is the human-oriented one: hue picks the colour, saturation its purity, lightness its brightness — so "same blue, 10% lighter" is a single-number edit in HSL but an opaque three-channel change in RGB. That makes HSL the right notation for building palettes and state variants; convert back to HEX when you ship. Shorthand HEX like #fff expands each digit doubled — #ffffff.

Related tools

FAQ

Which colour formats does Color Code Converter support?

HEX in three, six and eight digit forms, RGB and RGBA, and HSL and HSLA. Values are converted through a common internal representation, so round-tripping between formats does not drift.

What contrast ratio do I need to pass accessibility checks?

WCAG 2.1 level AA requires 4.5 to 1 for normal body text and 3 to 1 for large text, which means 18.66 pixels bold or 24 pixels regular and above. Level AAA raises those to 7 to 1 and 4.5 to 1 respectively.

Can I paste the output straight into CSS?

Yes. The generated values are valid CSS colour syntax and can be pasted into a stylesheet, a design token file or a component's inline style without any editing.