Design Tool

Color Palette Generator

Pick a base color and instantly generate harmonious palettes — complementary, analogous, triadic, tints, and shades. Get HEX, RGB, and HSL values with a WCAG contrast checker and ready-to-copy CSS variables.

Generate Color Palette
Quick Presets click to load
Base Color pick or type hex
Pick or type any hex color
Palette Type
Palette click any swatch to copy hex
WCAG Contrast Checker — Base color vs White & Black
CSS Variables ready to paste

How to Use

1
Pick a base color using the color picker or type a hex value like #3b6fd4. You can also click any preset circle to load a popular brand or design color.
2
Choose a palette type — Tints & Shades gives you a scale from light to dark. Complementary, Analogous, Triadic, and Split-Complementary use color theory to generate harmonious combinations.
3
Click any swatch in the palette strip to copy its hex code instantly. The info cards below show HEX, RGB, and HSL for each color.
4
Copy the CSS variables — the output block is ready to paste directly into your stylesheet. The WCAG contrast checker tells you if your base color passes accessibility guidelines on white and black backgrounds.

Why Use This Tool

Choosing colors that work together is one of the hardest parts of UI design. This tool automates the math of color theory so you can build a complete, accessible palette from a single brand color in seconds.

🎨

5 Palette Types

Tints/shades, complementary, analogous, triadic, and split-complementary — all based on color theory.

♿

WCAG Contrast Check

Automatically checks whether your color meets AA and AAA accessibility standards against white and black.

📋

CSS Variables Output

Ready-to-paste CSS custom properties in HEX and HSL so you can use the palette immediately.

⚡

One-click Copy

Click any swatch to copy its hex, or copy the entire CSS variable block in one click.

Frequently Asked Questions

A complementary color is exactly opposite on the color wheel — 180° away in hue. Complementary pairs create maximum contrast and visual tension, making them useful for call-to-action buttons or highlights against a dominant brand color.
The WCAG (Web Content Accessibility Guidelines) contrast ratio measures how easy text is to read against a background. A ratio of at least 4.5:1 is required for normal text (AA standard), and 7:1 for AAA. Lower contrast makes text hard to read for users with visual impairments.
HSL stands for Hue, Saturation, Lightness. HSB (also called HSV) stands for Hue, Saturation, Brightness. Both describe colors similarly but the Lightness vs Brightness dimension behaves differently. CSS uses HSL, making it more relevant for web development. This tool outputs HSL values.
Tints are created by adding white to a color (lighter). Shades are created by adding black (darker). In UI design, tints are great for backgrounds and hover states, while shades work well for text, borders, and focus indicators. A full tint-to-shade scale from a single base color is the backbone of most design systems.

Related Tools

🔡

Base64 Decoder

Decode Base64-encoded strings instantly.
{ }

JSON Formatter

Prettify and validate JSON data.
🔗

URL Parser

Break down and analyze any URL structure.
.*

Regex Tester

Test regular expressions with live highlighting.