html color picker

Color Picker

Pick a color and get HEX, RGB, and HSL instantly, a shade/tint strip, and a WCAG contrast check for white and black text.

Runs fully in your browser · nothing is sent anywhere

How the numbers are calculated

HEX/RGB/HSL are the same color in three notations — editing any field recomputes the other two and re-renders everything below.
The shade/tint strip holds hue and saturation fixed and steps lightness from 95% down to 5%, so it always includes both a near-white tint and a near-black shade of your current color.
Contrast ratios use the WCAG 2.x relative-luminance formula (0.2126·R + 0.7152·G + 0.0722·B on gamma-corrected channels), the same math browsers and design tools like Figma use — not a simplified brightness estimate.
AA requires 4.5:1 for normal text or 3:1 for large text (18pt+, or 14pt+ bold). AAA requires 7:1 normal / 4.5:1 large. Both are checked and shown separately since a color can pass for large text and fail for normal text.