Color Palette Generator

Pick a base color and get a harmonious palette instantly using color theory rules. Copy HEX, RGB and CSS values.

Instant result Runs in browser

Tip: Click any color swatch to copy its HEX code.

Color Info

HEX #3B82F6
RGB —
HSL —

Color Harmony Guide

Complementary180°
Analogous ±30–60°
Triadic 3 × 120°
Split 150° + 210°
Tetradic 4 × 90°
Monochromatic L: 15–85%

How to use?

  1. 1
    Pick a base colorUse the color picker or type a HEX code (#RRGGBB) directly.
  2. 2
    Choose a harmony typeSelect complementary, analogous, triadic, or another rule; the palette updates instantly.
  3. 3
    Copy the colorsClick any swatch to copy its HEX, or grab all colors as CSS custom properties.

FAQ

What is a complementary color?
It is the color directly opposite on the color wheel (180°). Together they create high contrast and visual tension — ideal for attention-grabbing accents and CTA buttons. Examples: blue–orange, red–green.
Why do analogous colors look harmonious?
Adjacent colors on the wheel (±30–60°) frequently appear together in nature, so the brain perceives them as calm and natural. They are widely used in backgrounds, logos, and UI design.
When should I use a monochromatic palette?
Light and dark variations of the same hue create a consistent, sophisticated look. Ideal for minimalist designs, corporate identities, and dark/light theme transitions.

How to Create a Color Palette

Color theory studies how colors interact. By mapping positions on the color wheel, we can identify harmonious relationships used by designers worldwide.

Six Color Harmony Types

  • Complementary: Opposite on the wheel (180°). High contrast, dynamic.
  • Analogous: Adjacent colors (±30–60°). Natural, calming.
  • Triadic: Three evenly spaced colors (120°). Vibrant, balanced.
  • Split-Complementary: Both sides of the complement. Less tension than complementary.
  • Tetradic: Four colors at 90° intervals. Rich, complex palettes.
  • Monochromatic: Same hue, varied lightness. Elegant, consistent.

Using in CSS

The "Copy CSS Variables" button generates --color-1: #hex; custom properties. Paste them into your :root block and reference them anywhere with var(--color-1).

Comments