Color Picker

About Color Picker

Choosing the right colors is critical for user interface design, brand identity, and web accessibility. This color picker lets you visually select any color and instantly see its representation in HEX, RGB, HSL, and HWB formats, along with WCAG contrast ratios against black and white text. An accessible color picker that shows contrast ratios is essential for meeting WCAG 2.1 AA compliance, which requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text.

Color Formats and Accessibility Reference

HEX codes (#RRGGBB) are the most compact color format for CSS and remain the most widely used. RGB (Red, Green, Blue) defines colors as a mix of three channels from 0-255. HSL (Hue, Saturation, Lightness) is more intuitive for humans -- hue is a degree on the color wheel (0-360), saturation controls color intensity, and lightness controls brightness. HWB (Hue, Whiteness, Blackness), added in CSS Color Level 4, is the most human-intuitive model, describing colors by their hue plus how much white and black are mixed in.

For web accessibility, WCAG defines three levels of contrast compliance: Level A (minimum), Level AA (standard requirement for most websites and apps), and Level AAA (enhanced). AA requires 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). AAA requires 7:1 for normal text and 4.5:1 for large text. Shades are created by mixing a color with black (darkening), while tints are created by mixing with white (lightening). Both are essential for creating cohesive design systems with multiple variants of a brand color.