Color Picker — HEX/RGB/HSL, Palettes & WCAG Contrast

A six-character (or three-character) hexadecimal value that encodes red, green, and blue channels. #RRGGBB — each pair is 00 to FF (0 to 255 in decimal). #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue. Shorthand #RGB doubles each digit — #F00 is the same as #FF0000.

RGB matches how screens physically render color (additive red+green+blue). HSL (hue, saturation, lightness) matches how humans think about color — pick a hue, then adjust how vivid and how light. For design work, HSL is usually more intuitive: shift the lightness slider to make a tint or shade of the same color. For code and color matching, RGB or HEX is more common.

Three rules: (1) Body text needs at least 4.5:1 contrast against its background (WCAG AA). (2) Large text (18pt+ or 14pt+ bold) needs at least 3:1 contrast. (3) Don't rely on color alone to convey meaning — pair color with text, icons, or patterns so color-blind users get the same information. Use this tool's Contrast tab to verify any combination before shipping.

WCAG 2.1 defines two levels. AA: 4.5:1 for normal text, 3:1 for large text. This is the legal/regulatory baseline in most jurisdictions. AAA: 7:1 for normal text, 4.5:1 for large text. This is the higher bar for content that must be accessible to users with low vision. Most consumer sites target AA; government, financial, and healthcare sites often aim for AAA on critical text.

Start with a base color (often the brand's primary). Generate three to five secondary colors using one of the relationships in this tool: analogous (calm, harmonious), complementary (high contrast, accent-friendly), or triadic (bold, multi-purpose). Then test the palette in real layouts — does the secondary stand out as a CTA but not fight the headline? Check every text-on-color combination for WCAG AA contrast before finalizing.