scriptiii
100% Client-Side

HEX · RGB · HSL · WCAG

Colour converter

Convert between HEX, RGB and HSL with alpha preserved, and check WCAG contrast against white and black before you ship the palette.

Hex, rgb(), rgba(), hsl() or hsla().

#2937aa

Conversion happens in this tab. Nothing about the colour, the palette or your device is transmitted.

Short answer: type a colour or pick one, and HEX, RGB and HSL appear together with the alpha channel intact. The contrast table then says whether that colour is legible as text on white and on black, at normal and large sizes.

Why the same colour has three spellings

HEX is compact and what design tools export. RGB maps to what the screen draws. HSL maps to how people adjust a colour — hue for the family, saturation for intensity, lightness for tint and shade. Editing a brand colour is usually easier in HSL; shipping it is usually easier in HEX. Converting between them is arithmetic, not judgement, so the numbers here are exact to the rounding shown.

Alpha is a channel, not a footnote

Two colours with the same RGB and different alpha look completely different over a background, which is why this tool keeps the fourth channel and prints it as 8-digit hex andrgba(). Flattening alpha to 1 would silently change the colour a designer sees.

Colour questions

Which colour formats are accepted?

Hex with 3, 4, 6 or 8 digits (#abc, #abcd, #aabbcc, #aabbccdd), rgb() and rgba() in both comma and space syntax, and hsl()/hsla(). Alpha is preserved rather than dropped, so a translucent colour stays translucent.

Why does the result show 8-digit hex?

Because the alpha channel is part of the colour. An 8-digit hex is #RRGGBBAA; when alpha is fully opaque the short form is offered separately so you can copy the six-digit value your CSS probably expects.

How is contrast calculated?

With the WCAG 2.x relative-luminance formula: each channel is linearised, weighted 0.2126/0.7152/0.0722, then compared as (lighter + 0.05) / (darker + 0.05). That is the same maths an accessibility audit uses, so the 4.5:1 and 3:1 thresholds here match a real report.

Why give two verdicts, on white and on black?

A colour can pass as text on black and fail on white. Reporting a single "pass" would hide which background it was measured against, so each verdict names its background. Large text (18.66 px bold, or 24 px) has the lower 3:1 threshold.

Are named CSS colours supported?

Not expanded here. "tomato" is a keyword from a fixed list, not a colour model, and guessing at partial names is how a converter produces the wrong colour confidently. Paste the hex instead.

Related tools

Base64 encoder and decoderFor data URLs and inline assets.JSON formatterCheck a design-token file.Text diffCompare two token sets.All developer toolsEvery tool in the developer group.