What is color harmony?

Color harmony refers to colors that look pleasing together based on their positions on the color wheel. Common harmony schemes include complementary (opposite colors), analogous (adjacent colors), triadic (evenly spaced), and monochromatic (same hue, different lightness).

What is a complementary color?

A complementary color is the color directly opposite another on the color wheel — 180° away in hue. Complementary pairs create maximum contrast and are used to make designs pop. For example, the complement of blue is orange.

What is an analogous color scheme?

An analogous color scheme uses three colors that are adjacent to each other on the color wheel (typically ±30°). These schemes feel harmonious and natural, and are common in nature. They work well for backgrounds and gradients.

What is a triadic color scheme?

A triadic scheme uses three colors evenly spaced around the color wheel (120° apart). It creates vibrant, high-contrast palettes that maintain balance. Good for designs that need energy and variety.

What is a monochromatic color palette?

A monochromatic palette uses a single hue at different lightness and saturation levels. It looks clean and professional, and is common in minimalist design systems. All colors naturally work together since they share the same underlying hue.

What are shades and tints?

Shades are created by adding black to a color (decreasing lightness), making it darker. Tints are created by adding white (increasing lightness), making it lighter. Design systems like Tailwind CSS use numbered scales (100–900) to represent these gradations.

Herramienta Gratuita

Generador de Color Theme

Genera paletas de colores complementarias, análogas, triádicas y monocromáticas a partir de cualquier color hex. Exporta a Tailwind, variables CSS, SCSS, Material UI y más.

Elige un Color Base

Color Hex

RGB

0, 82, 204

HSL

216°, 100%, 40%

Presets rápidos

Esquemas de Armonía de Color

Two colors opposite on the color wheel — high contrast, bold pairings.

#0052CC

0,82,204

216°,100%,40%

#CC7A00

204,122,0

36°,100%,40%

Sombras y Matices

Mismo matiz del más claro al más oscuro — útil para escalas de sistema de diseño.

#E5F0FF

229,240,255

215°,100%,95%

#B3D1FF

179,209,255

216°,100%,85%

#80B3FF

128,179,255

216°,100%,75%

#3385FF

51,133,255

216°,100%,60%

#005CE6

0,92,230

216°,100%,45%

#003D99

0,61,153

216°,100%,30%

#002966

0,41,102

216°,100%,20%

#001433

0,20,51

216°,100%,10%

Exportación de Framework

Exporta tu escala de color lista para pegar en tu proyecto.

Nombre del color:Se utiliza en nombres de variables/clases

brand-colors.css

@import "tailwindcss";

@theme {
  --color-brand-50: #F0F6FF;
  --color-brand-100: #DCEAFE;
  --color-brand-200: #B4D1FD;
  --color-brand-300: #74AAFB;
  --color-brand-400: #2E80FA;
  --color-brand-500: #065FE5;
  --color-brand-600: #054AB3;
  --color-brand-700: #033886;
  --color-brand-800: #02275E;
  --color-brand-900: #02193C;
  --color-brand-950: #010E23;
  --color-brand: #0052CC;
}

Escala generada (11 steps)

100

200

300

400

500

600

700

800

900

950

Todos los Esquemas de un Vistazo

Complementary

Analogous

Triadic

Split-Complementary

Tetradic

Monochromatic

Armonía de color explicada

Los esquemas de armonía de color derivan de las relaciones entre colores en la rueda de colores. Los colores complementarios son opuestos entre sí y crean alto contraste. Los colores análogos están adyacentes y se sienten cohesivos. Los esquemas triádicos utilizan tres colores espaciados uniformemente para un equilibrio vibrante.

Exportación del sistema de diseño

La pestaña Framework Export genera una escala de color lista para pegar en Tailwind CSS v3/v4, Material UI, Chakra UI, shadcn/ui, propiedades CSS personalizadas y variables SCSS.

Cómo usar

Ingresa o elige un color hex.
Explora los esquemas de armonía — Complementario, Análogo, Triádico, etc.
Cambia a Exportación de Framework para descargar o copiar la escala para tu sistema de diseño.

Todos los cálculos de color ocurren en tu navegador — nada se envía a ningún servidor.

Preguntas Frecuentes

¿Qué formatos de color son compatibles?: La entrada acepta hex (#RRGGBB o #RGB). La salida muestra hex, RGB y HSL para cada muestra.
¿Puedo exportar a Tailwind CSS?: Sí. La sección Framework Export genera escalas de color de Tailwind v3 y v4, además de variables CSS, SCSS, Material UI, Chakra UI y formatos shadcn/ui.
¿Es la herramienta gratuita?: Sí, completamente gratuita sin requerimiento de registro.

Herramientas Relacionadas

Color Contrast

Check WCAG AA and AAA color contrast ratios for web accessibility

Color Converter

Convert colors between HEX, RGB, HSL, HSV, and CSS named colors instantly

CSS Gradient Generator

Build linear, radial, and conic CSS gradients visually — drag color stops, share via URL