How do I generate a color palette?

Select a base color on the color wheel and choose the scheme type: complementary, analogous, triadic, or monochromatic. The tool automatically generates the corresponding harmonious colors.

What color formats can I copy?

You can copy each color as HEX (#RRGGBB), RGB (rgb(r,g,b)), or HSL (hsl(h,s%,l%)). All formats are standard in web design and CSS.

What is a complementary color scheme?

A complementary scheme uses opposite colors on the color wheel (e.g. blue and orange). It creates high contrast and is ideal for elements that need to stand out, like call-to-action buttons.

Can I use this tool for web design?

Yes. The generated HEX and RGB values can be used directly in CSS, Tailwind, Figma, Adobe XD, and other design or development tools.

Color Palette Generator

Create matching color schemes and copy HEX/RGB codes for your creative projects.

base_color_hex

Tipo de Armonía de Color

Paleta Armoniosa (Haz clic para copiar)

Color Theory, Harmonic Palettes, and Web Accessibility (WCAG 2.1) Guide

Design beautiful, accessible color palettes for websites, brand identities, and mobile UI/UX layouts. Master classical color harmony schemes and contrast benchmarks to ensure readability for everyone.

The 4 Primary Color Harmony Systems

1. Complementary Harmonies

Positioned exactly 180° opposite on the 360° color wheel (such as Royal Blue and Vibrant Amber). Creates powerful visual contrast tailored for call-to-action (CTA) buttons and key metrics.

2. Analogous Harmonies

Adjacent colors spaced 30° to 60° apart (such as Forest Green, Teal, and Navy). Imparts serene, cohesive nature-inspired branding palettes.

3. Triadic Palettes

Three tones spaced 120° apart forming an equilateral triangle. Delivers vibrant, balanced color relationships popular in games, modern SaaS, and editorial designs.

4. Monochromatic Shades

Variations in saturation and lightness originating from a single base hue. Forms the foundation of modern minimalist clean UI designs.

WCAG 2.1 Contrast Ratio Standards

WCAG Standard	Body Text (< 18pt)	Large Text (≥ 18pt or 14pt Bold)
Level AA (Legal Requirement)	Minimum 4.5:1 ratio	Minimum 3.0:1 ratio
Level AAA (Enhanced Accessibility)	Minimum 7.0:1 ratio	Minimum 4.5:1 ratio

Color Models Explained: HEX, RGB, and HSL

HEX (#RRGGBB): Base-16 hexadecimal alphanumeric codes used ubiquitously across HTML markup and CSS style sheets.
RGB (rgb(R, G, B)): Standard additive color space representing red, green, and blue values from 0 to 255.
HSL (hsl(H, S%, L%)): Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). Ideal for generating programmatic dark and light UI component themes.

Frequently Asked Questions

How do I export my palette to Figma or CSS?: Click directly on any generated swatch to copy its HEX value to your clipboard, allowing immediate pasting into CSS custom properties or design token files.
What is the 60-30-10 UI design rule?: A classic design ratio: 60% dominant neutral background tone, 30% secondary structural color (cards, sidebars), and 10% high-contrast accent color for interactive CTAs.