100% Free • Images Processed Locally • Zero Uploads
Color Picker & Palette Extractor
Pick a color for instant HEX, RGB, and HSL codes with a full shade scale — or drop in an image to extract its dominant palette.
Color Picker
Shades & Tints (click to copy)← tint · shade →
Extract Palette from Image
Click to upload or drag & drop
PNG, JPG, or WebP — processed locally
#3B82F6 · rgb(59, 130, 246)
Advertisement
Google AdSense Ad SlotHORIZONTAL (Auto-reserves space for 0 Cumulative Layout Shift)
HEX vs. RGB vs. HSL: Which Format Should You Use?
All three describe the same color, but each shines in a different context:
- HEX is the most compact and the lingua franca of CSS, design tools, and brand guidelines — ideal for copying and sharing exact values.
- RGB(A) is easiest when you need transparency — rgba(59, 130, 246, 0.4) for overlays and glass effects.
- HSL is the most human-readable. To darken a color you just lower the lightness value instead of guessing new channel numbers — exactly how the shade scale above is generated.
Building a Palette from a Photo or Logo
Extracting colors from imagery is the fastest way to create palettes that feel coherent. A logo gives you a defensible brand scale; a landscape photo gives you mood-matched accents. After extracting:
- Click a swatch to copy its HEX value, or use the ✎ button to load it into the picker.
- Pick the most saturated swatch as your accent and neutralize the rest for backgrounds and text.
- Check contrast: body text needs roughly a 4.5:1 ratio against its background (WCAG AA).
Frequently Asked Questions
Advertisement
Google AdSense Ad SlotRECTANGLE (Auto-reserves space for 0 Cumulative Layout Shift)