Color Converter: HEX, RGB, HSL and Contrast

Convert a colour between HEX, RGB and HSL notation and check whether text on it will be readable.

HEX
RGB
HSL
Contrast with white
Contrast with black

Runs entirely in your browser. Nothing you enter is sent anywhere.

How it works

HEX and RGB describe the same red, green and blue channels (0–255), in hexadecimal or decimal. HSL describes the colour as hue (0–360°), saturation and lightness, which makes it easier to create lighter or darker shades.

Contrast ratio follows the WCAG 2 formula using relative luminance. WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text.

Contrast = (L_lighter + 0.05) / (L_darker + 0.05)
L = 0.2126 R + 0.7152 G + 0.0722 B (linearised sRGB)

Worked example

CrimsonEdge red #DC2626 is rgb(220, 38, 38) and hsl(0, 72%, 51%). White text on it has a contrast ratio of 4.83:1, which passes WCAG AA for normal text.

Frequently asked questions

Can I enter a colour name or rgb()?

Yes. Type a HEX code (#dc2626 or #d22), rgb(220, 38, 38), hsl(0, 72%, 51%), or a CSS colour name such as teal.

What contrast ratio do I need?

WCAG AA: 4.5:1 for body text and 3:1 for large text (about 24 px, or 19 px bold). AAA: 7:1 and 4.5:1.

Related tools

JSON Formatter and Validator

Format, validate and minify JSON in your browser. Pinpoints the line and column of syntax errors and can sort keys, handy for API and MQTT payloads.

Base64 Encode and Decode Online

Encode text to Base64 or decode Base64 back to text, with full UTF-8 support and a URL-safe option. Runs locally, so data never leaves your browser.

Unix Timestamp Converter (Epoch to Date)

Convert Unix epoch timestamps in seconds or milliseconds to UTC, IST and your local time, or turn any date into a timestamp. Shows the current epoch.