Skip to main content
DevToys
Converters

Color converter & contrast

Convert HEX/RGB/HSL and check WCAG ratios

Colour value
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91.2%, 59.8%)
OKLCHoklch(62.31% 0.188 259.81)
Contrast ratio (WCAG)
Sample text

3.68:1

✕ AA normal✓ AA large✕ AAA normal✕ AAA large
How to use / Notes

How to use

  1. Enter a colour as HEX, RGB or HSL.
  2. Read the value automatically converted to the other notations.
  3. Check the WCAG contrast ratio for the foreground/background pair.

Notes

  • Aim for 4.5:1 for body text and 3:1 for large text (WCAG AA).
  • Colours with alpha have an effective contrast that depends on the backdrop.