Which colour formats are accepted?

Three, four, six and eight digit HEX with or without the hash, rgb and rgba, hsl and hsla, and the standard CSS named colours. Values are parsed leniently, so extra whitespace or a missing hash will not stop it.

How is alpha handled?

It is preserved across all formats. An eight-digit HEX carries alpha in its final two digits, and rgba and hsla take it as a fourth value between 0 and 1. The preview swatch renders over a checkerboard so partial transparency is visible.

What contrast ratio do I need?

WCAG AA asks for at least 4.5 to 1 for normal body text and 3 to 1 for large text, roughly 24 pixels or 19 pixels bold and above. AAA raises those to 7 to 1 and 4.5 to 1. Interface components and meaningful graphics need at least 3 to 1 against what surrounds them.

Why convert to HSL at all?

Because it makes deliberate adjustment easy. Lightening a colour, desaturating it, or finding a complementary hue are each a single number change in HSL, where the same operation in HEX is trial and error. It is the natural format for deriving a palette from one base colour.

Calculators & testers

Color Converter — HEX, RGB & HSL

Convert between HEX, RGB and HSL with a live preview.

Colour

Any HEX, RGB, HSL or named colour

Pick

#1B365D

Formats

HEX: #1B365D
RGB: rgb(27, 54, 93)
HSL: hsl(215, 55%, 24%)
CSS variable channels: 27 54 93

Contrast (WCAG 2.1)

Against white

12.12:1 AAA

Sample body text

AA textAA largeAAA text

Against black

1.73:1 Fail

Sample body text

AA textAA largeAAA text

AA needs 4.5:1 for body text and 3:1 for large text (roughly 24px, or 19px bold). AAA needs 7:1 and 4.5:1. Interface components and meaningful graphics need at least 3:1 against their surroundings.

Lightness ramp

The same hue and saturation at seven lightness values — the quickest way to derive a usable palette from one brand colour. This is what HSL is good for.

About this tool

The same colour can be written several ways, and each notation is convenient for something different. HEX is compact and what design tools hand you. RGB maps directly to how a screen produces colour and is what you need when working with canvas or image data. HSL describes colour the way people think about it, as a hue with a saturation and a lightness, which makes it far easier to adjust deliberately.

That last point is the practical reason to convert. Making a colour ten percent lighter, or finding a muted version of an accent, is guesswork in HEX and arithmetic in RGB, but in HSL it is a single number. Converting to HSL, changing the lightness, and converting back is the everyday workflow for building out a palette from one starting colour.

This converter accepts any of the three formats, in the shorthand and longhand variants you will actually encounter, and shows all of them at once alongside a live swatch. Alpha is supported throughout, so eight-digit HEX, rgba and hsla all round-trip correctly.

It also reports the contrast ratio of your colour against white and against black, with the corresponding WCAG rating. This is included because it is the check most often skipped. A brand colour that looks fine in a design mock frequently fails to reach the 4.5 to 1 ratio that normal-size body text needs, and finding that out at build time is much cheaper than finding out in an accessibility audit. The two ratios also tell you immediately whether to put white or black text on the colour.

How to use it

Type a colour in any format, or pick one with the colour input.
Read the equivalent HEX, RGB and HSL values.
Check the contrast ratios against white and black if the colour will sit behind text.

Frequently asked questions

Which colour formats are accepted?: Three, four, six and eight digit HEX with or without the hash, rgb and rgba, hsl and hsla, and the standard CSS named colours. Values are parsed leniently, so extra whitespace or a missing hash will not stop it.
How is alpha handled?: It is preserved across all formats. An eight-digit HEX carries alpha in its final two digits, and rgba and hsla take it as a fourth value between 0 and 1. The preview swatch renders over a checkerboard so partial transparency is visible.
What contrast ratio do I need?: WCAG AA asks for at least 4.5 to 1 for normal body text and 3 to 1 for large text, roughly 24 pixels or 19 pixels bold and above. AAA raises those to 7 to 1 and 4.5 to 1. Interface components and meaningful graphics need at least 3 to 1 against what surrounds them.
Why convert to HSL at all?: Because it makes deliberate adjustment easy. Lightening a colour, desaturating it, or finding a complementary hue are each a single number change in HSL, where the same operation in HEX is trial and error. It is the natural format for deriving a palette from one base colour.