Drop an image here, paste one with Ctrl+V or Cmd+V, or
Images stay in your browser. Nothing is uploaded.
Add an image to get its main color and palette. Then click, drag or use the arrow keys on the image to read any pixel. PNG, JPG, WEBP, GIF, SVG and BMP work.
How to use
Add an image
Drop an image on the box, paste a screenshot with Ctrl+V or Cmd+V, press Choose image, or paste an image address and press Load URL. Some sites block reading their images, in which case download and upload the file.
Adjust the palette
Drag Palette size from 2 to 16, choose an Order, and switch the codes between HEX, RGB and HSL.
Pick pixels and export
Click or drag on the image, or focus it and use the arrow keys and Enter, to pick exact pixels. Picked colors collect in a list. Copy them, or export them with the palette in the format you need.
Why Color Palette from Image
- Main color plus a 2 to 16 color palette.
- Upload, drag and drop, paste or load from a URL.
- Pixel picker with magnifier, keyboard control and history.
- Export as CSS, SCSS, Tailwind, JSON, SVG, PNG, ASE or PDF.
Tips for a clean palette, and ways to use it
The palette reflects every pixel in the image, so what you upload matters more than any setting. A few habits give cleaner results. Afterwards, check text and background pairs in the Color Contrast Checker before using the colors in a design.
- Crop to the part you care about. A product photo on a gray table will otherwise include the table.
- Avoid noisy or busy backgrounds, which add muddy in-between colors.
- Use a PNG for logos and flat graphics, since JPG compression adds stray shades around edges.
- Brand colors from a logo: set 2 to 4 colors, then click each shape to confirm the exact HEX.
- Moodboards: use 6 to 8 colors from a photo to capture its overall feel.
- Website themes: take the main color for backgrounds or headers and a brighter picked pixel as the accent for buttons.