How do you generate a color palette from an image and actually paste it into your code? Drop the image into a browser-only extractor, pick how many colors you want, and copy a :root { } block, a Tailwind @theme block, or a JSON token file straight to your clipboard. That is the workflow in Hexroot. It runs in under thirty seconds with no account, no server upload, and no paywall.
The rest of this post is the short version of why this workflow, which sounds obvious, is still annoying in 2026. And what Hexroot does differently for people who care about CSS variables, Tailwind v4, and WCAG contrast.
What is a color palette from an image, in developer terms?
A color palette from an image is a set of three to twelve dominant colors pulled out of a photo or mockup. Each one is rendered as a HEX, RGB, or HSL value you can drop into CSS, a Tailwind config, or a design-token file. For developers, the palette is only useful if it ships in a format you can paste into code. A row of swatches on a screen is nice. A :root { --color-1: #...; } block you can paste into globals.css is the part that saves time.
Hexroot extracts the palette using the canvas API inside your browser. The image is decoded locally via FileReader, passed through color-thief to pull dominant colors, and the result lands in a grid of swatches. No bytes leave your machine. You can verify this in the DevTools Network panel, which stays empty for the image during extraction.
How do I extract colors from an image into a Tailwind config?
Here is the part that most tools get wrong. You extract the palette, then you have to translate it into whatever the current Tailwind syntax is, then you paste it in the right place. Coolors gates this behind the $3/mo Pro tier. Adobe Color does not expose it at all. Swatchery ships a Tailwind export but has not caught up to v4.
Hexroot has a version toggle. Flip it to v3 and you get the classic theme.extend.colors object that pastes into tailwind.config.js. Flip it to v4 and you get a @theme block in CSS-native syntax that pastes into app.css:
@theme {
--color-palette-1: #1a2b3c;
--color-palette-2: #d4e5f6;
--color-palette-3: #ff7a59;
/* ... */
}The toggle is on the export panel, not buried in a settings drawer. Your choice persists through the session, so you can swap images without resetting. Tailwind v4 @theme syntax is still settling, so the Tailwind formatter in Hexroot lives in a single isolated utility module. If the spec changes next month, it is a one-file update.
How do I turn an image into CSS variables?
This is the one that gave the product its name. Hexroot = hex colors + CSS :root { }. Pick the CSS Variables tab in the export panel, and the output is a complete block:
:root {
--color-1: #1A2B3C;
--color-2: #D4E5F6;
--color-3: #FF7A59;
/* ... up to --color-12 */
}One Copy All button writes the whole block to your clipboard in a single action. No per-color copying. That matters because copying twelve hex values one at a time is the thing every color-tool review complains about, and it is the thing almost every competitor still makes you do. Hexroot ships the block as one object because that is how you actually use it.
If you need a naming convention that is semantic rather than positional, the :root block is a starting point you can rename in two keystrokes. Hexroot does not try to guess whether color three is your "primary" or your "accent" because the tool cannot know what you are building. What it can do is get you a valid, pasteable block in one click.
How do I check WCAG contrast across the whole palette?
The accessibility question is where the paid tools win and the free tools give up. Coolors does contrast checking on Pro. Adobe Color does it if you have an Adobe account. Swatchery does not do it at all. HexPickr does not do it. ImageColorPicker does single-pair contrast, but not pairwise across an extracted palette.
Hexroot computes every pairwise contrast ratio from the extracted palette using the WCAG 2.1 relative luminance formula. At twelve colors, that is sixty-six unique pairs. Each one shows a numeric ratio (two decimals) and a WCAG label: Fail, AA Large, AA, or AAA. The panel defaults to filtered (AA and above) with a "show all" toggle, because dumping sixty-six rows at you on first open would be overwhelming. An indicator tells you "M of T pairs compliant" so you get a read on the palette before you start picking text/background combinations.
No free competitor offers contrast pairings on extracted palettes. That is a gap you can verify yourself by opening every tool in the comparison table below and looking for it.
Is Hexroot really free? How does it make money?
Hexroot is free. No tiers, no upgrade path, no watermark. The site runs ads in a standard four-slot layout (banner-top, banner-bottom, two sidebar slots) once the ad network approval lands. That is it. If you hate ads, run a blocker. If you do not, they pay for the hosting.
What Hexroot will never do: require a signup, upload your image anywhere, or gate exports behind a "Pro" tier. Those are the things that pushed people toward Swatchery and HexPickr in the first place, and they are load-bearing in the product spec. The trust badge reads "Your image never leaves your browser" because you can verify it in DevTools every time you use the tool.
How does Hexroot compare to Coolors, Swatchery, and HexPickr?
| Capability | Coolors | Swatchery | HexPickr | Hexroot |
|---|---|---|---|---|
| Image extraction | Yes | Yes | Yes | Yes |
CSS :root Copy All | Pro | Per-format | Yes | Yes |
| Tailwind v3 | Pro | Yes | Yes | Yes |
Tailwind v4 @theme | No | No | Yes | Yes |
| JSON tokens | No | Yes | Yes | Yes |
| WCAG contrast on palette | Pro | No | No | Yes |
| No account required | Yes | Yes | Yes | Yes |
| Browser-only processing | No | Yes | Yes | Yes |
| Price | $3/mo Pro | Free | Free/Pro | Free |
Coolors is the one most people reach for first. It is polished, it has the biggest community palette library, and its image picker is secondary to random generation. If you want a giant library to browse, stay with Coolors. If you want image-first extraction with developer exports built in, Hexroot is lighter and faster to that goal.
Swatchery is the closest free competitor. Fifteen-plus export formats, browser-only, no paywall. The two gaps are no WCAG contrast checker and no Tailwind v4 @theme syntax. If those two features do not matter to you, Swatchery is solid. If they do, that is the Hexroot wedge.
HexPickr is Tailwind-first. Good for Tailwind-only developers; less friendly to designers who want a palette with readable exports. Hexroot ships the Tailwind exports HexPickr ships, plus the CSS :root flow, plus the contrast matrix, plus a UI that does not read as developer-only.
What image formats does Hexroot support?
JPEG, PNG, WebP, and GIF. Drag-and-drop or file picker. Either path runs the same extraction flow. Unsupported or corrupt files surface an inline error near the drop zone, and the previous palette (if one exists) stays visible so you do not lose your place.
No image URL input. That is deliberate. URL input means CORS headaches and opens a path where the tool fetches something on your behalf. The browser-only claim holds because the tool never touches the network for image data. Drop what you have. If it lives somewhere else, save it locally first.
How many colors can Hexroot extract?
Three to twelve, controlled by a slider. Move the slider, and extraction re-runs against the cached ImageData in under a second. Below three, the palette is too narrow to be useful. Above twelve, the contrast matrix gets noisy (remember, twelve colors is sixty-six pairs). If you need more than twelve, you are probably doing something Hexroot is not built for. Swatchery goes up to thirty if that is your use case.
The default is six, which is the sweet spot for most brand and UI palettes. It also matches the shape of the demo palette shown before you upload anything. The demo is there on purpose. You should be able to see what the output looks like before you commit to dropping an image.
Try it
Drop an image at appcrib.com/hexroot. Get your palette. Copy the :root block. Paste it into your stylesheet. If you care about Tailwind v4 or contrast pairs, flip the tabs. The differentiators are in the first viewport on purpose, not hidden in a secondary panel.
The tool exists because every other image-to-palette extractor either gates the parts developers need or ships without the accessibility checks designers need. Hexroot is both in the same free, no-upload, browser-only tool.