Color Picker and Contrast Checker

Move between HEX, RGB, and HSL

HEX and RGB describe the red, green, and blue channels used by screens. HSL expresses the same color as hue, saturation, and lightness, which can be easier to adjust systematically. The formats describe color differently but can resolve to the same visible output.

Check text contrast before shipping

Contrast compares the relative luminance of the text and its background. Under WCAG 2.2, Level AA calls for a ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA calls for 7:1 and 4.5:1 respectively. Treat thresholds as a starting check, then review the real interface at its final size and weight.

Color should not carry meaning alone

Pair status colors with labels, icons, patterns, or position so the message remains clear for people with color vision differences. Test hover, focus, active, disabled, error, and success states in both light and dark themes; the resting component alone is not enough.