Extract the color palette from an image for free
Get the dominant colors of a photo or illustration with their HEX and RGB codes, and take them to your project as CSS, SCSS, Tailwind or JSON variables.
Drag your images here or click to choose them
Use your Google Drive without giving up your privacy
Pick files from your Drive, process them here and save the result to any folder you like. Everything happens in your browser: ShiftAny has no servers of its own.
- Your Google Drive
- Your browserAll processing happens here
- Your Drive or your device
- Your files travel straight between Google and your browser. They never touch a server of ours, because we don’t have any.
- Processing runs on your device, exactly as it does with a file from your computer.
- The app can only access the files you pick and the ones it saves to your Drive. Never the rest.
- Access expires after one hour and is never stored. This browser only remembers your name and email so you can reconnect in one click; you can disconnect at any time.
- Processing
- In your browser
- Upload
- No upload to ShiftAny
- Account
- No sign-up
- Price
- Free
- Input
- JPG, PNG, WebP, GIF, BMP, AVIF, SVG
- Output
- HEX, RGB, CSS, SCSS, JSON
- Platform
- Web browser
How to use “Color Palette Generator”
- Add the photo, illustration or logo you want the palette from.
- Choose how many colors you want, from 5 to 8: they are sorted from most to least present.
- Copy each color’s HEX or RGB, or pick “Export as” CSS, SCSS, Tailwind or JSON.
Representative colors, not just frequent ones
The image is reduced to a 200 px sample and its colors are grouped with the same quantization algorithm our PNG compressor uses, which looks for the tones that most faithfully represent the whole instead of counting identical pixels. Each color comes with its share of the image and an approximate name (dark blue, light gray…) that also serves as a variable name: --color-dark-blue in CSS, $dark-blue in SCSS or classes such as bg-dark-blue in Tailwind. Transparent areas do not count.
Are my files uploaded?
No. ShiftAny Images processes your images directly on your device: this tool runs in your browser and never sends your files to any server.
Frequently asked questions
How is this different from the “Image Color Picker”?
The “Image Color Picker” gives you the exact code of the pixel you pick with the eyedropper. The palette sums up the whole image in a few representative colors, meant to carry its style over to a design or a website.
Can I change the variable names?
Names are generated from the color (blue, dark-blue, light-gray…) so the code works as soon as you paste it. You can rename them in your editor; if two colors are alike, the second one gets a number (blue-2).
Which Tailwind version should I pick?
Tailwind v4 defines colors in CSS with an @theme block; v3 and earlier, in tailwind.config.js. If your project has that configuration file, pick v3.