ImageSmith

ImageSmith / Color palette generator

Color palette generator

Start from one brand color and get a full palette: harmony colors, a tint scale, tinted neutrals and a contrast check for every text pairing.

Harmony

Brand tint scale (same hue, lightness only)

Tinted neutrals

Contrast check

  • Body text on page18.33:1 · AA pass
  • Brand text on page3.91:1 · large text only
  • White text on brand button3.91:1 · large text only
  • Dark text on brand button4.68:1 · AA pass
  • Muted text on page7.02:1 · AA pass
  • Light text on dark section18.33:1 · AA pass

Export

:root {
  --brand: #c2621d; /* oklch(0.60 0.144 51) */
  --accent: #038cba; /* oklch(0.60 0.120 231) */
  --brand-50: #fef3ec;
  --brand-200: #feddca;
  --brand-300: #fdb992;
  --brand-400: #f28d4f;
  --brand-500: #cf6e2d;
  --brand-600: #ac5105;
  --brand-700: #853e06;
  --brand-800: #652e03;
  --brand-900: #442008;
  --brand-1000: #2b0f00;
  --neutral-1: #fef7f2;
  --neutral-2: #e4dcd8;
  --neutral-3: #a49d99;
  --neutral-4: #5a5450;
  --neutral-5: #26201d;
  --neutral-6: #110c09;
}

The color wheel, explained

Opposite hues (180° apart). Maximum tension, so one should dominate and the other become the call-to-action color. Think of the orange button on a blue site.

The wheel is drawn in OKLCH at one lightness, so every segment looks equally bright. That's why it looks calmer than the rainbow wheels in most apps, and why it's a fairer guide.

Questions people ask

How does this color palette generator work?

You pick one brand color. It converts it to OKLCH, a color space where equal steps look equally different to the eye, then rotates the hue for the harmony you choose and builds a light-to-dark tint scale by changing lightness only. Every text pairing is checked against WCAG 2 contrast.

What is WCAG contrast and why does it matter?

WCAG 2 (the W3C accessibility standard) asks for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text and icons. Below that, many people, including anyone reading a phone in sunlight, struggle to read it. The badges show AA pass or fail for each pairing.

Why OKLCH instead of HSL?

In HSL, yellow at 50% lightness looks far brighter than blue at 50% lightness. OKLCH is perceptually uniform, so tints at the same L value look equally light across hues. That makes balanced palettes much easier.

How many colors should a brand have?

Most small brands work well with one main brand color, one accent for buttons and highlights, and a tinted neutral scale for text and backgrounds. Designers often use the 60-30-10 rule: 60% neutral, 30% secondary, 10% accent.

Can I export the palette?

Yes: copy CSS custom properties (hex with the OKLCH value as a comment), or copy any single hex code by clicking the swatch. Your last palette is remembered in this browser.

Keep going