← Back to the lab

Palette Generator

Free accessible color palette generator: pick a hue and harmony, get full tone scales with live WCAG AA/AAA contrast checks and one-click fixes.

What it does

  • Color harmonies: complementary, analogous, split-complementary, triad, square, compound and monochrome
  • Seven tones per swatch with live AA/AAA contrast dots for your text colors
  • Click a failing tone to nudge it to the closest passing lightness
  • Export the whole palette as JSON or CSS custom properties

FAQ

What makes a color palette accessible?

Text and background pairs need enough contrast: 4.5:1 for normal text and 3:1 for large text under WCAG AA, or 7:1 and 4.5:1 for AAA. The generator checks every tone against your text colors as you edit.

Can I use the palette in code?

Yes. Copy every tone as CSS custom properties or JSON and paste it into your design tokens or stylesheet.

More free tools

  • Contrast Checker — Paste two colors, see the WCAG ratio, and fix a failing pair with a single click.
  • Image → Palette — Drop in an image, pull out its dominant colors, and see which pairs are safe to use together.
  • Color Blindness Simulator — See a palette through protanopia, deuteranopia, tritanopia and achromatopsia — and catch colors that collapse.
  • Type Scale Generator — Pick a base size and a ratio, get a full type scale with live preview, fluid clamp() and tokens to copy.
  • Gradient & Mesh Generator — Linear, radial, conic or blobby mesh gradients — drag the points, shuffle the colors, copy the CSS.
  • Component States Explorer — Buttons, inputs and cards in every state — hover, focus, pressed, disabled, error — side by side with contrast checks.
  • Design Token Converter — Paste W3C tokens, Tokens Studio or Figma Variables JSON and get CSS, SCSS, Tailwind v4 or SwiftUI — aliases included.
  • Motion & Easing Playground — Drag cubic-bezier handles, tune a real spring, watch them race, and export motion tokens as CSS linear(), Framer Motion or SwiftUI.
  • Auto-Trim — Drop in PNGs and get them back without the empty transparent edges — in bulk, in your browser, as one ZIP.
  • Text Expansion Stress Test — See how a UI breaks in German, Spanish or pseudo-localized text — and which CSS fixes make it survive translation.
  • Mini A11y Audit — Paste HTML and find missing alt text and labels, unnamed buttons, heading jumps, tiny tap targets and low contrast.
  • Multi-size Preview — One message laid out across social and display-ad sizes, with platform safe zones and a draggable focal point. Export every PNG.