English Castellano Català

Color Palette Generator

Accessible palettes with WCAG contrast checking. Export as CSS, SCSS, or Tailwind.

Choose Your Base Color

Pick a color or enter a hex code. Press R for random color.

Keyboard: R = random, 1-6 = select harmony type, C = copy all

Color Harmony

Select the type of color harmony to generate:

Your Palette

WCAG Contrast Checker

Check text readability between your palette colors

Export Palette

About Color Harmonies

Color Theory Guide

  • Complementary: Two colors opposite on the color wheel. High contrast, vibrant look.
  • Analogous: Three colors next to each other. Harmonious, serene feel.
  • Triadic: Three colors evenly spaced. Balanced, vibrant palette.
  • Split Complementary: Base color + two adjacent to its complement. Less tension than complementary.
  • Tetradic: Four colors forming a rectangle. Rich, diverse palette.
  • Monochromatic: Various shades and tints of one color. Cohesive, elegant look.
Copied to clipboard!

More from Vidra

Social Media Sizes Meta Tags QR Codes

Frequently asked questions

How do I choose brand colors?

Start with one color that represents your brand personality, then generate complementary colors for contrast and hierarchy. This tool creates harmonious palettes from a single base color using color theory principles.

How many colors should a brand palette have?

Most effective brand palettes use 3-5 colors: a primary color, a secondary color, a neutral, and 1-2 accent colors. Too many colors create visual confusion; too few limit design flexibility.

Need a full brand, not just colors?

Identity, guidelines, and creative assets for brands that want to stand out.

See how we work