Color picker from image or screen.
Find the color that caught your eye. Get its HEX, RGB, and HSL codes, build a palette, and make something with it.
Screen picking depends on your browser. You can also upload a picture or paste a screenshot with Ctrl+V / ⌘V.
Images are processed on your device. No image upload to a server.
Pick from a picture
Drop an image here
or choose one above.
Your selected color
Edit any code to convert it. RGB: 0–255. HSL: hue 0–360°, saturation and lightness 0–100%.
Recently picked
Your color palette
Extract colors from a logo or photo, or add your own. Click a swatch to select it.
Saved palettes stay in this browser on this device. Images are never saved.
Find colors that work together
Explore color-wheel relationships, then adjust the suggestions to suit your design.
Your selected color stays unchanged. Suggestions use a perceptual color wheel with varied lightness. Adjust any companion using its color control.
These are mathematical possibilities. An artist’s eye is recommended to judge balance, mood, and context. Fine-tune your palette and check text contrast before using it.
Tints and shades generator
Make lighter and darker versions by mixing your selected color with white or black.
Lighter Selected color Darker
Color contrast checker
Test the two colors shown below: one for text and one for the background. Select each color from your current palette using the menus below. Recent colors are also available, or you can enter a HEX code or choose a custom color. Results update for this pair; the checker does not scan your screen automatically.
#293438
#FFFFFF
Good ideas deserve
to be seen.
This is a preview of regular body text. Readable color combinations help more people enjoy your work.
Large text preview · regular body text previewChecks use opaque sRGB colors. AA needs 4.5:1 for normal text or 3:1 for large text. Large text is at least 24px, or about 18.7px when bold. About WCAG contrast
How to get a HEX color from an image
- Choose your source. Upload a photo or logo, paste a screenshot, or open the screen eyedropper in a supported browser.
- Pick a pixel. Click the image to identify its color. Use the zoom and magnified preview for smaller details.
- Copy or keep it. Copy HEX, RGB, or HSL, add the color to your palette, or download a palette image.
Color picker questions
Can I pick a color from another app?
Yes, when your desktop browser supports the screen EyeDropper API. Choose “Pick from screen,” move to the pixel you want, and click. Press Escape to cancel. If the button is unavailable, take a screenshot and upload or paste it here.
How do I find a color from a screenshot?
Copy the screenshot, then paste it with Ctrl+V or ⌘V, or use “Paste image.” You can also save and upload it. Click a pixel to get its HEX color code. A screenshot records displayed colors, which can differ from an original design file.
Can I extract a whole palette from an image?
Yes. The image palette generator finds five to eight main color groups. An image with fewer distinct colors may return fewer swatches. Transparent pixels are excluded. Palette colors are representative averages; clicking the image samples its pixel directly.
How do HEX, RGB, and HSL conversion work?
All three describe the same sRGB color. HEX uses six hexadecimal digits, RGB uses red, green, and blue values from 0 to 255, and HSL uses hue, saturation, and lightness. Edit any of the three fields to update the others. Short three-digit HEX codes are also accepted.
Are my images uploaded or my palettes stored online?
No. Your image stays in the browser. Palettes are saved on this device only when you choose “Save palette.” Download a PNG or copy CSS variables to reuse your colors elsewhere.