How to Use

1
Select Harmony
Choose a color harmony rule like Analogous or Complementary to define the relationship between colors.
2
Choose Mood
Set the atmosphere with Mood Selector. Pick from Pastel, Vibrant, or Dark modes to match your brand's vibe.
3
Generate
Click Generate to create unique palettes. Lock the colors you like and regenerate the rest to find the perfect match.
4
Export
Copy individual Hex codes or click Export to get the full Tailwind CSS configuration.

Color Theory Guide

Understanding Harmony

Analogous
Colors that are next to each other on the color wheel. Creates a serene and comfortable design. Matches well with nature or calm themes.
Complementary
Colors that are opposite each other on the color wheel. Creates high contrast and high impact. Great for calls to action or highlighting.
Triadic
Three colors evenly spaced on the color wheel. Offers high contrast while retaining harmony. Vibrant and balanced.
Split-Comp
A variation of the complementary color scheme. Uses a base color and the two colors adjacent to its complement. Sharp contrast but less tension.
Monochromatic
Variations in lightness and saturation of a single color. Clean, elegant, and soothing. Hard to make ugly.
Random Chaos
Completely random colors without strict rules. Good for sparking unexpected inspiration or brainstorming.

Exploring Moods

Standard Mood
Balanced saturation and brightness. Suitable for general purpose web design and UI components.
Pastel Dreams
High brightness and low saturation. Soft, soothing, and baby-friendly. Perfect for lifestyle, weddings, or spring themes.
Neon Vibrant
High saturation and medium brightness. Energetic, punchy, and attention-grabbing. Ideal for tech, sports, or entertainment.
Dark Mode
Low brightness and desaturated tones. Deep, mysterious, and modern. Reduces eye strain and saves battery on OLED screens.
Vintage Retro
Desaturated and slightly warm tones. Nostalgic, classic, and timeless. Great for history, coffee shops, or artisan brands.

Choosing Colors That Work Together

Overview

Color choice can make or break a design. Random color combinations look chaotic; deliberate palettes built on color theory feel intentional and professional. This tool generates harmonious palettes from a single base color using established color theory relationships: complementary (opposite on the color wheel), analogous (adjacent), triadic (three evenly spaced), and tetradic (four). It also extracts palettes from uploaded images and shows hex/RGB/HSL values for direct use in CSS or design files.

How It Works

Color theory expressed mathematically: a color in HSL has hue (0–360°), saturation, and lightness. Complementary = base hue + 180°. Triadic = base + 120° and base + 240°. Analogous = base ± 30°. The tool computes these mathematically, then displays the resulting palette with copy-to-clipboard for each color. Image-based palettes use color quantization (k-means clustering) to find the most dominant colors in the uploaded image.

When to Use This

Designing UI for a website or app (primary, secondary, accent colors). Picking colors for a brand identity. Coordinating slide deck visuals. Choosing paint colors for a room (start from one wall, find complementary trim). Creating data visualization color schemes (categorical or sequential). Generating themes for graphics — Instagram posts, YouTube thumbnails, blog headers.

Frequently Asked Questions

What's the difference between complementary and analogous?

Complementary colors are opposite on the color wheel (blue + orange) — high contrast, visually striking. Analogous colors are next to each other (blue + blue-green + green) — calmer, more cohesive. Use complementary for accents, analogous for backgrounds.

How many colors should a design use?

60-30-10 rule: 60% dominant (background), 30% secondary, 10% accent. Most professional designs use 3–5 colors total. More than 5 starts to feel chaotic unless you're explicitly going for a vibrant playful look.

What's the WCAG contrast requirement?

For accessibility, text must have at least 4.5:1 contrast against its background (3:1 for large text). Black on white is 21:1. Dark gray on light gray often fails — check with a contrast tool before shipping.