Colour

Convert a colour between hex, RGB, HSL and oklch, and check the contrast against WCAG thresholds.

Runs in your browser — nothing you type here is sent anywhere.
foreground
background

Normal text — 16px regular.

Large text — 24px bold.

10.71:1
contrast ratio
AA normal
pass · needs 4.5
AA large
pass · needs 3
AAA normal
pass · needs 7
AAA large
pass · needs 4.5
foreground
hex#7dd3fc
rgbrgb(125, 211, 252)
hslhsl(199.4, 95.5%, 73.9%)
oklchoklch(82.76% 0.1013 230.32)
luminance0.5798
background
hex#0f172a
rgbrgb(15, 23, 42)
hslhsl(222.2, 47.4%, 11.2%)
oklchoklch(20.77% 0.0398 265.75)
luminance0.0088

Large text means 24px regular or 18.66px bold and up; everything smaller is judged as normal text. Accepts hex, rgb(), hsl() and the common colour keywords.

Two jobs that always happen together: getting the colour into the format the code wants, and confirming the text on it is readable. Contrast is the part that gets skipped, and it is the part with a legal dimension.

Enter a colour in any notation and get the rest, along with a contrast ratio against a chosen background and a clear pass or fail for AA and AAA at both normal and large text sizes. oklch is included because it is how modern palettes are built — lightness behaves the way your eye expects it to.

What people open it for

In the terminal

tools color

Every utility is also a command in the desktop's shell.

More design tools

Open the full desktop, with all 47 utilities