Colour converter and contrast

Convert a colour between HEX, RGB, HSL, OKLCH and CSS names, and check two colours against WCAG contrast levels.

Processed on your device, never uploaded

Colour

Any colour

Type HEX, rgb(), hsl(), oklch() or a CSS colour name. "#777 on #fff" checks a pair.

#2F5F8FMedium blue

All formats

HEX: #2F5F8F
RGB: rgb(47, 95, 143)
HSL: hsl(210, 51%, 37%)
OKLCH: oklch(0.475 0.094 250.4)
Name: darkslateblueNearest CSS name, #483D8B

#2F5F8F (rgb(47, 95, 143)) on white is 6.66:1. Passes AA for all text. #2B5B8A would also pass AAA for normal text.

Processed on your device, never uploaded

Contrast

6.66:1

Background

#2F5F8F on #FFFFFF6.66:1Passes AA for all text

AA · normal textNeeds 4.5:1Pass

AA · large textNeeds 3:1Pass

AAA · normal textNeeds 7:1Fail

AAA · large textNeeds 4.5:1Pass

Large text means 24 px and up, or 19 px and up in bold.

Nearest colour that passes AAA for normal text#2B5B8A (7.08:1). Same hue and chroma, only the lightness changed, so it still looks like your colour.

Options

Copy as

Syntax

HEX letters

What it does

The colour converter shows a colour as HEX, RGB and HSL and checks whether text in that colour is readable on a background.

How to use it

1Type or pick a colour.
2Copy the format you need.
3Check the contrast against a background.

Questions

What contrast do I need?

4.5:1 for normal text, 3:1 for large text (WCAG AA).

Which format should I use in CSS?

Any of them. HEX is the most common.

Is it made on my device?

Yes.