Skip to content
Esc

Colour converter

In your browser

HEX, RGB, HSL and OKLCH, with a contrast check.

Try

Results

HEX
#2563EB
RGB
rgb(37 99 235)rgb(37, 99, 235)
HSL
hsl(221 83% 53%)hsl(221, 83%, 53%)
HWB
hwb(221 15% 8%)
OKLCH
oklch(0.54615 0.21521 262.88)
OKLab
oklab(0.54615 -0.02667 -0.21355)
Display P3
color(display-p3 0.213 0.383 0.889)

Contrast

5.17:1

The colour as text on the background.

  • PassAA, normal text4.5:1
  • PassAA, large text3:1
  • FailAAA, normal text7:1
  • PassAAA, large text4.5:1
  • PassUI components and graphics3:1

Sample text

Large text

About this tool

Runs in
your browser
Your input sent to our servers
Nothing
Kept on this device
nothing

More in the privacy policy.

How to use it

  1. 01Type or paste a colour in any CSS form, such as #2563EB, rgb(37 99 235), hsl(221 83% 53%) or oklch(0.55 0.2 263), or pick one. Or try one of the examples.
  2. 02Every format appears in the results: HEX, RGB, HSL, HWB, OKLCH, OKLab and Display P3. Copy any of them.
  3. 03Set a background to check contrast: the ratio, and whether it passes WCAG AA and AAA for text and for interface parts. Swap exchanges the two.

Related tools

Questions

Which colour formats can I type?

Hex with 3, 4, 6 or 8 digits (with or without #), rgb() and rgba(), hsl() and hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 …) and color(srgb …), and named colours such as rebeccapurple. It doesn’t read color-mix(), relative colours (rgb(from …)) or light-dark(), which depend on other values.

What is OKLCH?

A way of writing colours as lightness, chroma (colourfulness) and hue, where equal steps of lightness look equal to the eye, unlike HSL. That makes it easier to build palettes and keep contrast steady: #2563EB is oklch(0.54615 0.21521 262.88).

What does “outside sRGB” mean?

sRGB is the range of colours HEX, RGB and HSL can describe. Newer screens show more (Display P3), and OKLCH can describe colours beyond both. For a colour outside sRGB, HEX, RGB, HSL and HWB show the nearest colour inside it, the way browsers map it (CSS Color 4): pure Display P3 red, color(display-p3 1 0 0), becomes #FF0B0C.

What do the WCAG levels mean?

WCAG 2 compares the lightness of text and its background. AA asks for 4.5:1 for normal text and 3:1 for large text (24px, or 18.7px bold) and for interface parts such as borders and icons; AAA asks for 7:1 and 4.5:1. Black on white is 21.00:1; #767676 on white is 4.54:1, just enough for AA.

How is transparency handled?

A translucent text colour is laid over the background before measuring, as a browser would draw it. A translucent background is measured over white, and the results say so. HEX shows transparency as two more digits (#2563EB80 is about 50%).

Is anything sent anywhere?

No. It’s worked out in your browser. Nothing is sent to our servers, put into the page address or saved.