Colour Converter

Convert a colour between formats

Type a colour as HEX, RGB, HSL or a name and get it in every form, with a contrast check.

Type or pick a colour

ColourPicker

Use HEX (#f80, #ff8800), rgb(255 136 0), hsl(32 100% 50%) or a CSS colour name.

Copy it in any form

HEX
RGB
HSL
Nearest CSS name

Check the contrast

With white
With black

Normal text needs 4.5:1 and large text needs 3:1 (WCAG 2). A see-through colour is laid over white or black first.

This all happens on your device. Nothing you type or add is sent anywhere. Check it yourself

Which colour forms can I type?

HEX such as #f80, #ff8800 or #ff880080, rgb() or rgba() such as rgb(255 136 0 / 50%), hsl() or hsla() such as hsl(32 100% 50%), or a CSS colour name such as rebeccapurple. You can also use the colour picker.

How is the nearest CSS name chosen?

The tool compares your colour with all 148 CSS colour names and picks the closest one by eye, using a weighted distance in RGB. It says when the match is exact.

What do pass and fail mean for contrast?

They follow WCAG 2. Normal text needs a ratio of at least 4.5:1 and large text (about 24 px, or 19 px bold) needs at least 3:1. The ratio is cut to two decimals, never rounded up. A see-through colour is first laid over white or black.

Is my data uploaded anywhere?

No. Everything runs in your browser tab, and the page's security policy blocks it from sending data anywhere.

About this tool

Runs	In your browser. Your files stay on your device.
Reads	HEX (3, 4, 6 or 8 digits), rgb() and rgba(), hsl() and hsla(), and all 148 CSS colour names
Writes	HEX, RGB, HSL and the nearest CSS colour name
Contrast	WCAG 2 ratio against white and black: 4.5:1 for normal text, 3:1 for large text
Works offline	Yes, once the page has loaded
Licence	AGPL-3.0
Added	11 October 2026
Built by	Sapience Design
Source	tools/everyday/colour-converter

Report a problem

Convert a colour between formats

Type or pick a colour

Copy it in any form

Check the contrast

AI agent activity

Suggest a tool

Step 1 of 3 What should the tool do?

Step 2 of 3 Anything else?

Step 3 of 3 Want it sooner?

Thank you!