Color Palette Generator

Generate harmonious color schemes, Tailwind CSS shade scales (50-950), and check WCAG contrast accessibility.

18.1:1 1.2:1

#ecedfd

14.8:1 1.4:1

100

#d5d6fb

10.0:1 2.1:1

200

#abacf7

5.9:1 3.6:1

300

#777af3

3.4:1 6.2:1

400

#4447ee

4.7:1 4.5:1

500

#6366f1

2.7:1 7.7:1

600

#2b2fec

2.1:1 10.1:1

700

#1317d1

1.6:1 12.9:1

800

#0f12a2

1.3:1 15.9:1

900

#0a0d73

Tailwind CSS Color Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
      '50': '#ecedfd',
      '100': '#d5d6fb',
      '200': '#abacf7',
      '300': '#777af3',
      '400': '#4447ee',
      '500': '#6366f1',
      '600': '#2b2fec',
      '700': '#1317d1',
      '800': '#0f12a2',
      '900': '#0a0d73',
        }
      }
    }
  }
}

About Color Harmonies & Contrast

The KoolToolz Color Palette Generator calculates mathematically balanced color harmonies using the HSL color wheel and produces production-ready Tailwind CSS shade scales with built-in accessibility contrast metrics.

WCAG 2.1 Accessibility Badges

4.5:1 — Minimum contrast required for normal body text (WCAG AA).
3.0:1 — Minimum contrast required for large text (18pt+) and UI controls.
7.0:1 — High contrast requirement for enhanced accessibility (WCAG AAA).

Palette Types

Complementary: Colors opposite on the color wheel (180°).
Analogous: Colors situated immediately adjacent on the color wheel (±30°).
Triadic: Three evenly spaced colors (120° apart).
Tailwind Scale: Full 50 through 950 light-to-dark tints and shades.

Color Palette Generator

About Color Harmonies & Contrast

WCAG 2.1 Accessibility Badges

Palette Types

Rate this tool