DarnlyColor palette from image: the main colors in one click
Drop a screenshot, logo or photo and get its 5 to 8 main colors. Click any color to copy it, or grab the CSS variables and Tailwind snippet. It runs in your browser, so nothing is uploaded.
More free tools
How it works
- Drop in a screenshot, logo or photo. You can also paste one straight from your clipboard.
- We pick out its main colors, biggest first. Choose how many you want, from 5 to 8.
- Click a color to copy its hex code, or copy the CSS variables or Tailwind snippet and paste it into your project. You can also hand the snippet to your AI coding agent and say “use these colors”.
Questions
Is my image uploaded anywhere?
No. Everything happens in your browser. Your image never leaves your computer.
How are the colors picked?
We look at every pixel, group the ones that look alike, and show the biggest groups. Small accent colors still get a slot when they’re clearly different, so a logo’s one bright detail isn’t lost. See-through areas are ignored.
Which Tailwind version do I have?
If your project has a tailwind.config.js or tailwind.config.ts file, pick v3. If your CSS file starts with @import "tailwindcss"; and there’s no config file, pick v4. Not sure? Ask your AI coding agent.
How do I give these colors to my AI coding agent?
Copy the CSS variables or the Tailwind snippet and paste it into Claude Code, Codex or Cursor with a line like “Use these as the site’s brand colors.” The names (--color-1 and so on) are easy to rename later.
Why do I get fewer colors than I asked for?
Some images only have a few clearly different colors, like a two-color logo. We don’t invent near-duplicates just to fill the row.