Category · 24 tools
Palette generators, gradient makers and theme tools to get colour right without guessing.
24 shown
A color-wheel tool for building harmonies, extracting palettes from images and simulating color-blindness.
The classic color wheel for building harmonies and checking color-blind safety. Free, reliable, and it speaks every color model.
Visit ↗An open-source contrast-based generator that builds accessible palettes from target contrast ratios.
Generates accessible palettes from target contrast ratios and exports design tokens. The pick when accessibility drives your color system, not the other way around.
Visit ↗A color-tools platform for building palettes, extracting colors from images and exporting in many spaces.
A grab-bag of palette tools with exports in every space including OKLCH. A solid utility belt when the simple tools run out.
Visit ↗A curated gallery of hand-picked four-color palettes organised by theme and popularity.
A bottomless gallery of hand-picked four-color palettes to copy. Inspiration, not a generator — great for a quick starting point.
Visit ↗A palette generator that builds accessible scales using customisable hue, saturation and luminosity curves.
Lyft's tool for building color scales from hue/saturation/luminosity curves. For designers who want to engineer an accessible system, not just pick swatches.
Visit ↗A color encyclopedia with conversions, schemes and details for any color.
Paste a hex and get everything about it — conversions, schemes, blindness simulation. The reference page for understanding a single color.
Visit ↗A generator that builds palettes and CSS gradients from a single anchor color.
Feed it one color, get palettes and ready-made CSS gradients. Fast when you have a brand color and need everything around it.
Visit ↗A fast color palette generator with scheme exploration, image extraction and contrast checking.
The fast palette generator everyone starts with — hit spacebar, lock what you like. Free and frictionless; Pro adds extras you mostly won't need.
Visit ↗A free generator for creating linear and radial CSS gradient backgrounds with copyable code.
A dead-simple linear/radial gradient maker with copy-paste CSS. Bookmark it for the five-second gradient.
Visit ↗A color inspiration site that applies curated palettes to a live mock layout with assigned UI roles.
Shows palettes applied to a real layout with each color's UI role labelled. Brilliant for learning which color goes where.
Visit ↗A machine-learning palette generator that assigns schemes to layout roles for brands, sites and graphics.
ML-generated schemes assigned to layout roles, with contrast and creativity controls. Surprisingly good for brand and site color in one shot.
Visit ↗Ready-made Tailwind gradient classes you can paste straight into your markup. A time-saver if you live in Tailwind.
Visit ↗An AI color tool that learns your taste from chosen colors and generates personalised combinations.
An AI tool that learns your taste and generates combos you'll actually like, with contrast ratings. A fun way to escape the same five palettes.
Visit ↗Google's tool for generating Material Design 3 color themes with dynamic color and code export.
Google's generator for Material 3 themes with dynamic color and token export. Essential if you're building on Material; overkill if you're not.
Visit ↗A WebGL tool for creating warped mesh gradients by adding and dragging color points.
WebGL mesh-gradient maker — drag color points into organic, modern backgrounds. The source of those soft multi-color hero gradients you keep seeing.
Visit ↗A color picker and converter for the OKLCH color space, by Evil Martians.
The picker for OKLCH — the perceptual color space that makes consistent, accessible palettes far easier. Where modern CSS color is heading; worth learning now.
Visit ↗An open-source color scheme optimised for UI like text, backgrounds and borders.
A carefully-built open-source palette designed specifically for UI work. A safe, accessible set of colors when you don't want to invent your own.
Visit ↗A color-scheme designer on the RYB wheel with mono, triad, tetrad and other harmony modes.
The old-school RYB color-wheel designer with every harmony mode and a live preview. Dated UI, but still a precise way to reason about color theory.
Visit ↗A tool that previews chosen colors and fonts on a full mock marketing page instead of flat swatches.
Previews your palette and fonts on a real mock page instead of dead swatches — the only honest way to judge a scheme. I open this for every project.
Visit ↗A tool for generating smooth, layered, realistic CSS box-shadows.
Generates the soft, layered box-shadows that actually look real, instead of one harsh blur. A tiny tool that instantly makes cards look more designed.
Visit ↗An open-source Tailwind palette generator and API that builds scales from a single hex value.
Open-source Tailwind palette generator with OKLCH output and a fetchable API. Cleaner, more perceptual scales than the eyeballed approach.
Visit ↗A Tailwind CSS color generator that produces full 50–950 shade scales from a hex or HSL input.
Generates full Tailwind 50–950 scales from one color, ready to paste into your config. Indispensable if you theme with Tailwind.
Visit ↗A community collection of ready-made gradients with copyable CSS.
A big, browsable library of ready-made gradients with copy-paste CSS. The quick grab when you need a nice gradient and don't want to fiddle.
Visit ↗A browser tool that calculates the WCAG contrast ratio between two colors and flags AA/AAA pass or fail.
The no-nonsense WCAG contrast checker you bookmark forever. Paste two colors, get a pass/fail — done.
Visit ↗