Pick colors from images, convert between HEX, RGB, HSL, CMYK. Generate palettes and check accessibility contrast.
#7C5CFC
Medium Slate Blue
Red124
Green92
Blue252
Alpha100%
🖼️
Drop image or click to upload
Hover over any pixel to pick its color
Supports JPG, PNG, GIF, WebP
#000000rgb(0,0,0)
🎨 Extracted Colors (click to use)
🕐 Recent Colors
Pick colors to see history...
🔄 Color Formats (click to copy)
HEX
#7C5CFC
Copied!
RGB
rgb(124, 92, 252)
Copied!
HSL
hsl(253°, 96%, 67%)
Copied!
HSV
hsv(253°, 63%, 99%)
Copied!
CMYK
cmyk(51%, 63%, 0%, 1%)
Copied!
CSS Variable
--color: #7C5CFC;
Copied!
RGBA
rgba(124, 92, 252, 1)
Copied!
HSLA
hsla(253°, 96%, 67%, 1)
Copied!
🌈 Color Harmonies
♿ Contrast Checker (WCAG Accessibility)
Text Color
Background Color
Sample Heading Text
The quick brown fox jumps over the lazy dog
4.5:1
🌈 CSS Gradient Generator
→
About Color Tools
How does the image color picker work? ▼
Upload any image and hover your mouse over it. The tool reads the pixel color at your cursor position in real-time using HTML5 Canvas. Click any pixel to use that color, or the tool automatically extracts a palette of dominant colors from the image.
What is the difference between RGB and HEX? ▼
HEX and RGB represent the same colors differently. RGB uses decimal numbers like rgb(255,0,0) while HEX uses hexadecimal like #FF0000. HEX is shorter and common in CSS/HTML, while RGB is useful for color manipulation in code.
What is WCAG contrast ratio? ▼
WCAG defines minimum contrast for readable text. AA level needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1. Meeting these ensures accessibility for users with visual impairments.