Color Palette Generator - Designer Tool

🎨 Generated Palette

☀️ Shades & Tints

TINTS (Lighter)

SHADES (Darker)

✏️ Text Design Preview

ON LIGHT BACKGROUND

Heading Text

Body text looks like this on white background.

ON DARK BACKGROUND

Heading Text

Body text on dark background preview.

🔤 Font Combination Preview

Outfit Bold - Modern Sans

Great for headings

Playfair Display - Elegant Serif

Perfect for luxury brands

Roboto - Clean & Professional

Best for body text

🌈 Gradient Generator

COLOR 1

COLOR 2

DIRECTION

background: linear-gradient(to right, #8b5cf6, #ec4899);

♿ WCAG Contrast Checker

TEXT COLOR

BACKGROUND

Sample Text Preview

Regular body text for readability testing

CONTRAST RATIO

4.5:1

WCAG STATUS

AA Pass

AA Normal: ✅ Pass

AA Large: ✅ Pass

AAA Normal: ❌ Fail

AAA Large: ✅ Pass

⭐ Popular Color Schemes

💾 Your Saved Palettes

No saved palettes yet. Click "Save" to save current palette.

Color Palette Tool

Pick a Color

🎯 Color Harmony

⚡ Quick Colors

🎨 Generated Palette

☀️ Shades & Tints

✏️ Text Design Preview

Heading Text

Heading Text

🔤 Font Combination Preview

🌈 Gradient Generator

♿ WCAG Contrast Checker

⭐ Popular Color Schemes

💾 Your Saved Palettes