Convert between hex, RGB, and HSL — and check WCAG contrast ratios.
Pure sRGB arithmetic in this tab.
Foreground color
#hex, rgb(), or hsl()
Background color
#hex, rgb(), or hsl()
Foreground
Hex
#333333
RGB
rgb(51, 51, 51)
HSL
hsl(0, 0%, 20%)
Background
Hex
#ffffff
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
WCAG 2.1 contrast
Contrast ratio
12.63:1
AA normal text (≥ 4.5:1)
Pass
AAA normal text (≥ 7:1)
Pass
AA large text (≥ 3:1)
Pass
AAA large text (≥ 4.5:1)
Pass
sRGB arithmetic and WCAG 2.1 relative-luminance contrast, computed in this tab. A translucent foreground is blended over the background first; a translucent background counts as opaque, since what sits behind it isn’t known.