Color Picker
Pick colors, extract from images, generate palettes, and check contrast. Supports HEX, RGB, HSL, HSV, and CMYK formats.
Image Color Extraction
Drop an image or click to upload
Dominant Colors
Add colors to your palette
Sample text at normal size (14px)
Sample Large Text
Contrast Ratio
21:1
AA Normal
Pass
AA Large
Pass
AAA Normal
Pass
AAA Large
Pass
90°
When to Use This Color Picker
Our free color picker tool helps designers and developers work with colors:
-
Web Design
Select perfect colors for websites and check contrast ratios to ensure accessibility compliance.
-
Brand Identity
Create harmonious color palettes for logos, marketing materials, and brand guidelines.
-
Image Color Matching
Extract colors from photos to match design elements with existing imagery.
-
CSS Development
Generate CSS gradients and export color palettes as CSS custom properties.
-
Accessibility Testing
Verify text and background color combinations meet WCAG AA and AAA standards.
How to Use Color Picker
Getting Started
- Click and drag on the color square to select saturation and brightness
- Use the hue slider to change the base color
- Adjust opacity with the alpha slider if needed
- Copy any color format by clicking the copy button next to it
Features
- Interactive color picker with real-time preview
- Extract colors from any image with eyedropper
- Generate harmonious color combinations automatically
- Build custom palettes and export as CSS or JSON
- Check WCAG color contrast for accessibility
- Create CSS gradients with visual editor
Keyboard Shortcuts
- Ctrl+C: Copy current HEX color
- Ctrl+V: Paste and apply color from clipboard
- 1-4: Switch between feature tabs
Tips
- Upload an image to extract its dominant colors automatically
- Use the contrast checker to ensure text readability
- Export your palette to CSS variables for easy use in projects