Tap a color for see how it looks as a foreground color and the contrast ratio.
What do these levels mean?

This tool follows the Web Content Accessibility Guidelines (WCAG), which are a series of recommendations for making the web more accessible.
Regarding colors, the standard defines two levels of contrast ratio: AA (minimum contrast) and AAA (enhanced contrast).
The level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text.
The level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text or bold text.

Purple

#4F277A rgb(79, 39, 122) hsl(269, 52%, 32%) oklch(37.2%, 34%, 302.366%)
#582C83 rgb(88, 44, 131) hsl(270, 50%, 34%) oklch(39.7%, 35.25%, 303.87%)
#5E308A rgb(94, 48, 138) hsl(271, 48%, 36%) oklch(41.5%, 36.25%, 304.289%)
#663491 rgb(102, 52, 145) hsl(272.28 47% 39%) oklch(43.58% 0.15 305.84)
#743DA1 rgb(116, 61, 161) hsl(273.02 45% 44%) oklch(47.67% 0.159 306.68)
#8246AF rgb(130, 70, 175) hsl(274.27 43% 48%) oklch(51.55% 0.165 307.99)
#9967BF rgb(153, 103, 191) hsl(274.1 41% 57.99999999999999%) oklch(60.21% 0.139 309)
#B794D1 rgb(183, 148, 209) hsl(274.42 40% 70%) oklch(72% 0.094 310.24)
#D3BFE3 rgb(211, 191, 227) hsl(273.34 39% 82%) oklch(83.27% 0.054 310.07)
#E9DFF1
#F0EAF6

Blue

#003C71
#105890
#1968A1
#2578B2
#2E85BE
#4995C6
#66A6CE
#8EBFDD
#B8D8EA
#DCECF5
#EDF5FA

Orange/Yellow

#EF6D00
#F57D00
#FB8D00
#FF9800
#FFA600
#FFB300
#FEC10D
#FECB2A
#FED650
#ffeaa6
#fff1c4

Green

#1B3C11
#1B6500
#498700
#5F9A00
#74AD00
#84BD00
#97C73E
#ABD064
#C4DD92
#DCEBBD
#F4F8EC

Gray

#000000
#1d1e1e
#393A3B
#57585A
#6A6B6E
#939496
#B2B4B6
#D6D8DA
#E7E8EA
#F0F1F4
#FFFFFF

Special

#C41E3D
#000000
#1a1221
#FFFFFF