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.
Nine tools, one rule. The math decides, not the swatch.
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.
Which tool for which job
Nine tools overlap on purpose. Three touch palettes, two build gradients, two score contrast. Find the row that matches the job in front of you and open that one.
Check one color pair for contrast
Scores the pair against WCAG 2.2 and APCA at the same time. When it fails, Ratia walks the failing color along the closest axis of your brand color until it passes, so the fix still looks like your brand.
Build a palette from scratch
Hit space for a fresh palette with WCAG AA/AAA ratios and APCA Lc values scored on every relevant pair, then export CSS variables or Tailwind v4 @theme. The stock framework palette stops being the path of least resistance.
Pull a palette out of an image
Extracts 3 to 12 colors and hands back a :root variables block, Tailwind v3 or v4 output, JSON design tokens, and a WCAG pairings matrix for the swatches it found.
Set a background gradient
Interpolates in OKLCH so the middle never goes grey. Linear, radial, and conic, with CSS and Tailwind-compatible output on every drag.
Put a gradient on headline text
Sixty curated Google Fonts loaded on demand, plus the full production snippet: background-clip: text, the text-fill-color reset, and the @import line for the font.
Convert between color formats
HEX, RGB, HSL, and CMYK updating as you type in any of them, round-trip accurate, with a session history for the shade you lost three edits ago.
Pair a heading face with a body face
Curated pairings with the reasoning spelled out, x-heights matched within 4%, previewed at actual body size instead of on a display headline.
Ship the favicon set
The modern package from one source image: an SVG that flips in dark mode, the iOS touch icon, the web manifest Android wants, and a fallback ICO for the browsers still asking.
Check a photo's composition
Golden spiral, phi grid, golden triangle, and rule-of-thirds overlays on any image you drop in, non-destructive, downloadable as a full-resolution composite.
Two contrast standards, one pair of eyes
WCAG 2.2 contrast is a ratio between two luminance values, and for body copy the passing score is 4.5:1. The formula descends from research done in the 1990s and treats every combination of foreground and background the same, which is where it starts to lie. Light text on a dark background scores identically to its inverse, even though your eyes handle the two cases differently. APCA models that polarity, and it often disagrees with WCAG 2.2 on exactly the pairs designers love: pale grey text over a dark hero.
The classic casualty is #999 on #fff. It reads as tasteful restraint on the designer's display and computes to 2.85:1, nowhere near the 4.5:1 that body copy needs. The habit of reaching for grey to make text feel understated is how readable pages turn into squinting exercises, and no amount of taste overrides the arithmetic.
In this toolkit, Ratia runs both standards on a single pair. Shadl scores whole palettes with WCAG 2.1 AA/AAA ratios plus an APCA Lc value on every relevant pair. Hexroot builds a WCAG 2.1 pairings matrix for the palettes it pulls out of images. Where two numbers disagree, trust the stricter one.
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
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.
None of this needs a server. Contrast is a four-line calculation, gradients render locally, and a tool that recomputes on every keystroke catches more failing pairs than one that makes you click Submit. When a variation costs nothing to try, you stop defending the first swatch you picked, and that habit does more for a design than any single feature here. Nothing on this page uploads a pixel or asks for an account.
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 it 07Hit space. Get colors that actually pass.
Coolors invented the spacebar workflow but parks contrast checking on a separate page. InclusiveColors put WCAG and APCA on every pair through a Lch curve editor that intimidates the casual user. Shadl is the version where speed and rigor are the same feature. Land on the page, hit space, see five swatches with WCAG ratios and APCA Lc values scored against every relevant pair. When a pair fails, plain-language coaching tells you which color to nudge and by how much — no silent red X. Export to CSS custom properties, Tailwind v4 @theme (OKLCH), or Tailwind v3 config in one click. URL state is the database; nothing to sign up for and no upgrade prompt, ever. Free, forever.
Try it 08CSS text gradients with real fonts and real color science.
Every other text-gradient tool ships with Inter, system serif, and a shrug. GradText hands you sixty curated Google Fonts loaded on demand, OKLCH color stops that stay luminous through the middle of a transition (no sRGB grey dead-zone), and a live preview you can edit to match your actual headline. The output is the full production snippet — background, background-clip: text, -webkit-text-fill-color: transparent, plus the @import line for the font. Paste it into your stylesheet and ship.
Try it 09Every composition guide, on any photo, in your browser.
Free composition tools online each do one thing. One draws a golden spiral. Another forces a destructive crop. A third lives behind a browser extension. Compov puts all four guides — golden spiral, phi grid, golden triangle, and rule of thirds — over any photo you drop in, without cropping it and without asking you to download or register anything. Drag the overlay where you want it, tune opacity and color, then download a clean composite at full resolution. The spiral is built from real phi-scaled arcs, not a decorative approximation, so it holds up against Lightroom and PhiMatrix. Everything runs in the browser; your image never leaves your machine.
Try itExplore more categories
See all 43 tools.