Color Picker
developer
Select colors and get HEX, RGB, HSL, HSV, CMYK values. Pick colors from screen with eyedropper. Contrast ratio and color palette included.
Contrast Ratio
Custom color
#6B7280
vs#6B7280Custom4.34 : 1AA (Large)
vs#FFFFFFWhite21.00 : 1AAA
vs#000000Black1.00 : 1Fail
vs#FF0000Red5.25 : 1AA
vs#FFFF00Yellow19.56 : 1AAA
vs#008000Green4.09 : 1AA (Large)
vs#0000FFBlue2.44 : 1Fail
vs#000080Navy1.31 : 1Fail
vs#800080Purple2.23 : 1Fail
vs#808080Gray5.32 : 1AA
Color Palette
Saved Colors
Select colors to save them here
1. How to Use
- Use the color input or Eyedropper (main color) to select a color. Values update in real time.
- Copy HEX, RGB, RGBA, HSL, HSV, or CMYK values with the Copy buttons.
- Adjust alpha for transparency with the slider.
- Color Palette: Click Original, Complementary, Analogous, Triadic, Lighter, or Darker to apply.
- Contrast Ratio: Use Custom color picker or its Eyedropper to set a comparison color. Results show ratio and WCAG grade (Fail, AA Large, AA, AAA).
- Saved Colors: Selected colors are auto-saved (up to 20). Click to reuse. Use Clear to remove all.
2. How It Works
Color picker uses native HTML5 color input and the EyeDropper API when available.
Two Eyedroppers: one for the main color, one for the Contrast Ratio comparison color.
All conversions (RGB, HSL, HSV, CMYK) are computed in the browser.
Saved colors are stored in localStorage.
Contrast ratios follow WCAG 2.1. Fail (<3), AA Large (≥3), AA (≥4.5), AAA (≥7).
3. About Color Picker
Free online color picker for HEX, RGB, HSL, HSV, CMYK, and RGBA. Includes contrast ratio (vs 10 preset + custom), color palette (8 variants), and saved history.
4. Advantages
- Multiple format support (HEX, RGB, HSL, HSV, CMYK, RGBA).
- Two Eyedroppers: main color and contrast comparison.
- Contrast ratio with WCAG badges (10 preset colors + custom).
- Color palette (Complementary, Analogous, Triadic, Lighter, Darker).
- Auto-saved color history (localStorage).
5. Use Cases
- Web design: Pick and copy color codes.
- Accessibility: Check contrast ratios against common colors.
- Design: Explore complementary, analogous, and triadic colors.