Advanced Color Picker

Professional color selection tool with harmony generation, shade variations, and WCAG accessibility testing.

Color Selection

Choose your primary color using the picker or enter a hex code

255, 0, 0
0, 100, 50

Shades & Tints

Explore lighter tints and darker shades of your selected color. Click any shade to use it as your primary color.

💡 Tip: Shades are created by mixing your color with white (tints) and black (shades)

Color Harmonies

Discover professionally balanced color combinations based on color theory principles

analogous

Colors next to each other on the color wheel - creates harmony and unity

complementary

Opposite colors on the wheel - creates high contrast and visual interest

triadic

Three colors evenly spaced - creates vibrant and balanced palettes

tetradic

Four colors in two complementary pairs - offers rich color variety

Accessibility Contrast Checker

Ensure your color combinations meet WCAG accessibility standards for readability

This is how normal text (14px) looks with these colors

The quick brown fox jumps over the lazy dog

Large Text Sample

Contrast Ratio4.00:1
WCAG AA (Minimum)
Normal Text (≥4.5:1)✗ Fail
Large Text (≥3:1)✓ Pass
WCAG AAA (Enhanced)
Normal Text (≥7:1)✗ Fail
Large Text (≥4.5:1)✗ Fail

About WCAG Standards: Large text is defined as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. AA is the minimum recommended level for web content. AAA provides enhanced contrast for users with visual impairments.

How to Use This Color Picker

🎨 Selecting Colors

  • • Click the color picker to open the interactive selector
  • • Drag on the color canvas to adjust saturation and lightness
  • • Use the hue slider to change the base color
  • • Enter hex codes directly for precise color selection
  • • Press ESC to close the picker modal

🌈 Color Harmonies

  • • Analogous: Colors next to each other - calming and harmonious
  • • Complementary: Opposite colors - high contrast and energy
  • • Triadic: Three evenly spaced colors - vibrant and balanced
  • • Tetradic: Four colors - rich and diverse palettes

♿ Accessibility Testing

  • • Test text and background color combinations
  • • Ensure WCAG AA compliance (4.5:1 for normal text)
  • • Aim for AAA when possible (7:1 for normal text)
  • • Large text has lower requirements (18pt+ or 14pt+ bold)

💡 Pro Tips

  • • Use shades for hover states and UI variations
  • • Click any harmony color to make it your primary
  • • Test your colors in both light and dark modes
  • • Copy colors with one click for easy pasting