About Hexroot

How Hexroot fits the image-to-palette category

Coolors.co, Color.adobe.com, Khroma, Swatchery, and HexPickr will all pull colors out of a photograph. Only Hexroot ships a paste-ready CSS :root{} block, a Tailwind v4 @theme token group, and a full pairwise WCAG 2.1 contrast matrix from the same screen, with no account and no upload. The category is crowded. That combination is not.

How browser-based palette extractors are normally built

The standard recipe is three steps. Read the image into an off-screen <canvas>, sample the pixel data, then run a quantization algorithm (k-means, median cut, or octree) to collapse that sample into a small set of dominant colors. Most tools in this space use the same MIT-licensed color-thief library Hexroot uses. What separates one extractor from another is what happens after the quantizer returns its 8 colors.

That's where the category fragments. Coolors locks SCSS, CSS, and code exports behind a Pro paywall. Adobe Color requires an Adobe ID and returns a fixed 5 swatches. Khroma gates the whole tool behind a sign-up wall before you see a single swatch. Swatchery treats single-image extraction as a side feature behind its curated discovery library. HexPickr is the closest analog in spirit: simple drag-and-drop with HEX output. But it stops at the swatch and doesn't generate contrast pairings or framework-native exports.

The three design choices that split this category

When we built Hexroot the design space came down to three forks, and each one cuts out a real slice of the market.

The first is where the pixels go. A server-side extractor can run a beefier quantizer and cache results, at the cost of uploading whatever the user dropped in. A browser-side extractor is bound to the user's CPU and the Canvas API's quirks, but the image never leaves the device. We picked browser-only. The Network tab in DevTools shows zero outbound requests when you drop a JPEG into Hexroot. Designers pulling colors out of unreleased brand work, or product screenshots under NDA, should not have to trust a third-party server to handle the file.

The second is what counts as the output. The thinnest useful answer is a row of HEX strings. The thickest is the full design-token surface a front-end engineer pastes into a codebase. Most tools stop somewhere in the middle and charge for the rest. Hexroot ships 4 export formats from the same palette: a CSS :root{} block with named custom properties, a Tailwind v3 extend.colors config, a Tailwind v4 @theme token block, and a JSON design-token file compatible with Style Dictionary and Token Studio. One Copy All button per tab.

:root {
  --color-primary: #6BA8E8;
  --color-2: #3D6FA3;
  --color-3: #E8C56B;
  --color-4: #A37D3D;
  --color-5: #E87B6B;
}

The Tailwind v4 @theme export maps those same 5 tokens into the new CSS-variable-first system:

@theme {
  --color-primary: #6BA8E8;
  --color-2: #3D6FA3;
  --color-3: #E8C56B;
  --color-4: #A37D3D;
  --color-5: #E87B6B;
}

The third is whether contrast pairing ships with the palette. A palette that looks great in the swatch grid can fail accessibility the moment you put text on it. Hexroot computes the WCAG 2.1 relative-luminance ratio for every ordered pair of colors and grades each combination as AAA (≥ 7.0), AA (≥ 4.5), AA Large (≥ 3.0), or Fail. For a 6-color palette that's 30 graded pairs, shown on the same screen as the swatches.

Q: Why grade contrast pairwise instead of just against white and black?

Because the colors get used against each other in real UI. A --color-accent over --color-surface matters more than --color-accent over #fff, and most palette tools only test against pure black or pure white.

What Coolors, Swatchery, HexPickr, and Adobe Color each do better

Hexroot isn't the right tool for every job. Here's the honest read on the rivals, and the specific feature each one gates or skips.

If you live inside Adobe's tools, Adobe Color belongs in your workflow. If you want a palette editor with harmony rules and color-blindness simulation, Coolors is worth the Pro tier. Hexroot competes on a narrower claim: drop a file, walk out with code that compiles.

The trade-offs you inherit with Hexroot

Choosing browser-only and free has costs worth naming.

The quantizer is color-thief's median-cut implementation. It's fast and good enough for most photographic input, but it's not as perceptually tuned as a server-side k-means run in Lab color space would be. On images with subtle gradient regions you may pull a slightly noisier palette than a paid tool with a heavier algorithm.

Hexroot doesn't save your palettes. No accounts, no history, no collections. If you want a palette later, copy the JSON token export and keep it in your repo. That's a real difference from Coolors and Adobe Color, both of which build their long-term value on the saved-library side of the product.

The contrast matrix grades pairs, not full UI scenarios. WCAG 2.1 ratios are computed against solid backgrounds; they don't model semi-transparent overlays, gradient text, or backdrop-filter blur. For those, you still need to spot-check in a real layout.

Q: Can I run Hexroot on a folder of images at once?

No. The tool is single-image by design. Batch extraction was the first feature we cut, because the WCAG matrix only makes sense per palette, and we'd rather ship one disciplined workflow than a batch endpoint that produces 100 ungraded swatch grids.

We'd switch back to Coolors the day we needed a harmony generator, and to Adobe Color the day we needed to push a palette into Illustrator without leaving the suite. For everything between “I have a hero image” and “I have a usable :root{} block with contrast ratings,” Hexroot is the shorter path.