Design utilities that don't waste your time.
Color, contrast, type, gradients, and favicons. The small tools designers and front-end developers reach for every week, finally done well.
Designers don't do math.
Developers don't have taste.
Both ship bad design.
Most design failures on the web aren't failures of taste. They're failures of math that nobody told the designer about and the developer never bothered to learn. A Figma mockup ships with body copy at 3.8:1 contrast because the swatch looked elegant on a retina display at full brightness. Nobody opens it in a kitchen at noon.
The dead-zone proof
Two gradients from hot pink to cyan. Same endpoints on both. The first interpolates in sRGB, which is how almost every free gradient tool still works. That's why its middle goes grey. The second interpolates in OKLCH, the perceptual color space that's shipped in every major browser since 2023. It stays saturated the whole way across.
sRGB: what most free tools output
OKLCH: what the browser can already do
sRGB is a file format, not a perceptual model. You can interpolate between two colors in sRGB and produce a muddy grey stripe in the middle that nobody meant. Any time you've seen a gradient go visibly dead in the middle, that's the reason. The fix has existed in CSS for two years. Barely any color tools default to it.
Contrast math has the same shape. WCAG 2.2 is descended from research that treated every combination of foreground and background the same. APCA doesn't. Light text on a dark hero scores one way under WCAG and another under APCA, and APCA is usually closer to what your eyes will tell you. Designers who ship dark mode without running both checks ship broken dark mode.
Where the two tribes miss each other
What designers miss
Picks colors by taste, not by contrast
A palette that looks elegant on a 5K retina display at 80% brightness fails on a six-year-old laptop in a kitchen at noon. Contrast isn't something to measure after the fact. It's the first spec.
Specifies fonts that fall apart at 14px
Display faces look crisp on the headline slide and turn to mush in the body paragraph. The fix is boring: test every face at 14px and 16px before you put it on a handoff board.
Treats dark mode as a filter
You can't invert a light-mode palette into a dark-mode palette. Shadows go from softening the surface to carving holes in it. Contrast ratios flip. Dark mode is a second design, not a toggle.
Hands off favicons as one 512px PNG
Modern favicons want half a dozen things. An SVG that flips in dark mode. An iOS touch icon. A web manifest. A fallback ICO for the browsers still asking for one. What ends up in the repo is usually a single PNG and a ticket to fix it someday.
What developers miss
Ships the framework defaults
Tailwind's stock palette is a starting point, not a brand. When every site on the internet uses the same slate and indigo, that's why. The defaults are tuned for demos, not products.
Uses #999 on #fff because it 'looks subtle'
That's 2.85:1. It's WCAG large-text only. On body copy it's failing. The habit of reaching for grey text to make something feel understated is how readable pages turn into squinting exercises.
Never heard of APCA
WCAG 2.2 came out of research in the 90s and treats light-on-dark the same as dark-on-light. APCA models how the eye actually handles those two cases and often disagrees. If you ship light text on a dark hero, you want to know.
Interpolates gradients in sRGB
The classic grey dead-zone between pink and cyan isn't a CSS bug. It's the interpolation model. OKLCH has shipped in every major browser for two years and barely any tools default to it.
Accessibility is a math problem with a known answer. The answer keeps getting ignored because the math is boring, and because nobody wants to tell the senior designer their favorite shade of grey is illegal on body text.
Do the math anyway.
Why fast iteration changes what you ship
The browser doesn't need to round-trip anywhere to do any of this. Gradients render locally. Contrast math is a four-line calculation. Font previews are just CSS. The legacy tools were built on a server-plus-form-submit model and nobody updated them. When the feedback loop collapses to a few milliseconds, you stop defending your first guess. You try six variations because trying is free.
That's the whole argument for building these small tools. A contrast checker that recomputes on keystroke catches more failing pairs than one that makes you click Submit. A gradient picker that shows OKLCH vs sRGB side by side makes the case on its own. A font-pairing tool that renders the actual pair at body size in real time makes the pair either work or very obviously not work. The argument happens on the page.
The tools in this category are the boring ones. Small, obsessive about a specific slice of the stack, useless to anyone not actually shipping to a browser. They don't demo well in a deck. They don't need to. Open the tab, get the number, paste the output. The catalog keeps growing because there's always another small thing somebody ships a bad version of.
Design Tools
Contrast ratio, instantly clear.
Paste two colors and Ratia tells you whether body copy clears WCAG 2.2 at 4.5:1 and how APCA scores the same pair. Modern research says the WCAG numbers lie about light text on dark backgrounds, so you want both. When a pair fails, Ratia walks a suggestion along the closest axis of your brand color until it passes, instead of making you guess a replacement. Everything happens client-side, so your unreleased palette never hits a log.
Try it 02CSS gradients with Tailwind output and OKLCH color quality.
CSS gradients built on OKLCH instead of sRGB. If you've ever seen a gradient with a grey dead-zone in the middle, that's sRGB interpolation giving up. Graduo hands you a visual builder with perceptually uniform color stops, then spits out CSS and Tailwind-compatible output you can paste straight into a component. Linear, radial, conic, plus the animated CSS variants. The preview updates on every drag. Nothing uploads.
Try it 03Convert colors instantly. Copy in one click.
HEX, RGB, HSL, and CMYK, all four formats updating as you type in any of them. Round-trip accuracy matters more than it sounds: copy out HSL, paste it back in, and it should land on the same HEX you started with. Hextly respects that. A session history remembers every color you touched so you can walk backwards when you lose a shade you liked. One click to copy any format. Works on a phone.
Try it 04Font pairings that explain themselves.
Most font-pairing tools throw up a wall of Google Fonts combinations without telling you why anything works. TypeDuo explains. This serif pairs with this sans because the x-heights match within 4%. The stroke contrast lines up. One of the two is a neutral workhorse. The other is the voice. Filter by mood, by weight, by x-height, by category. Preview at actual body size, not a display headline. Copy the CSS and ship the page.
Try it 05Your favicon set, dark-mode ready, in 90 seconds.
Most favicon generators ship the same dozen files they shipped in 2012. Favset does the modern set. A single SVG with media-aware dark mode variants at the core. The iOS touch icons Apple validates against. The web manifest Android actually wants. A fallback ICO for the browsers still asking for one. Upload never happens because generation runs in the browser with canvas. Paste the rel=icon snippet into your head tag and you're done.
Try it 06Drop an image, paste a :root.
Coolors gates CSS and Tailwind exports behind a Pro tier. Swatchery is free but doesn't check contrast and doesn't know about Tailwind v4's @theme syntax. Hexroot extracts a 3-to-12 color palette from any image you drop on it, entirely in the browser, and ships the outputs you actually need: a :root{} variables block, Tailwind v3 config or v4 @theme, JSON design tokens that fit Style Dictionary and Figma, and a WCAG 2.1 pairings matrix that tells you which combinations clear AA or AAA. Per-swatch HEX, RGB, and HSL with one-click copy. Nothing uploads.
Try itExplore more categories
See all 32 tools.