Color Palette Generator

SeriousCode Color Palette Generator creates harmonious color schemes using 6 modes (complementary, analogous, triadic, split-complementary, tetradic, monochromatic). Each palette includes 9-step shade scales, WCAG contrast checking, and export as CSS custom properties, SCSS variables, Tailwind config, or JSON — all free in your browser.

Base Color

Harmony

Palette Colors

Shades & Tints

Contrast Checker

Foreground

Background

Contrast Ratio: 3.64:1

WCAG Level: AA Large

Large Text (18px+)

Normal Text (16px) — The quick brown fox jumps over the lazy dog.

Small Text (12px) — 0123456789 ABCDEF abcdef

Export

:root {
  --color-1: #3c83f6;
  --color-1-100: #e7f0fe;
  --color-1-200: #b1cefb;
  --color-1-300: #7bacf9;
  --color-1-400: #4186f6;
  --color-1-500: #0b64f4;
  --color-1-600: #094ebe;
  --color-1-700: #063888;
  --color-1-800: #04204e;
  --color-1-900: #010a18;
  --color-2: #f6af3c;
  --color-2-100: #fef5e7;
  --color-2-200: #fbdfb1;
  --color-2-300: #f9c97b;
  --color-2-400: #f6b141;
  --color-2-500: #f49b0b;
  --color-2-600: #be7909;
  --color-2-700: #885706;
  --color-2-800: #4e3104;
  --color-2-900: #180f01;
}

कोई सुझाव है?

नया टूल अनुरोध करें या सुधार सुझाएं — हमारे Slack समुदाय में शामिल हों!

Slack पर फीडबैक दें

What is a Color Palette Generator?

A color palette generator creates harmonious color combinations based on color theory principles. It uses the color wheel to calculate complementary, analogous, triadic, and other harmony relationships from a base color. Our tool generates complete shade scales for each color, checks WCAG accessibility contrast ratios, and exports palettes in developer-friendly formats including CSS custom properties, SCSS variables, and Tailwind CSS configuration — all running entirely in your browser.

How to Use the Color Palette Generator

Pick a base color using the color picker or enter a hex value directly
Select a harmony mode: Complementary, Analogous, Triadic, Split-Complementary, Tetradic, or Monochromatic
View the generated palette with all harmony colors and their shade scales
Use the contrast checker to verify text readability against WCAG AA/AAA standards
Click any color swatch to copy its hex value to clipboard
Export the entire palette as CSS, SCSS, Tailwind config, or JSON for your project

Frequently Asked Questions

What color harmony modes are available?

Six modes are available: Complementary (opposite on color wheel), Analogous (adjacent colors), Triadic (three evenly spaced), Split-Complementary (base + two adjacent to complement), Tetradic (four colors forming a rectangle), and Monochromatic (variations of lightness from a single hue).

What is WCAG contrast checking?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text. AA level requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text. Our tool calculates these ratios for any foreground/background combination from your palette.

What export formats are supported?

You can export palettes as CSS custom properties (var(--color-1)), SCSS variables ($color-1), Tailwind CSS configuration (ready to paste into tailwind.config.js), or plain JSON. Each format includes the base colors and all shade steps.

How are the shade scales generated?

Each color in the palette gets 9 shade steps ranging from very light (near white) to very dark (near black), generated by varying the lightness value in HSL color space while keeping the hue and saturation constant. This gives you a complete design-system-ready scale.

Can I use a specific hex color as the starting point?

Yes! You can either use the color picker or type any hex value directly into the input field. The palette will regenerate instantly based on your chosen base color and harmony mode. You can also click Randomize for inspiration.