Generador de paletas de colores
Elige un color base y genera al instante armonías de la teoría del color – complementarios, análogos, triádicos, tetrádicos, complementario dividido y monocromáticos – como muestras en vivo que puedes copiar en HEX, RGB, HSL, variables CSS o una configuración de Tailwind.
Complementarios
El color base y su opuesto en el círculo (tono + 180°): la combinación de mayor contraste.
Análogos
El color base flanqueado por sus dos vecinos en el círculo (tono ± 30°): un esquema tranquilo y cohesivo.
Triádicos
Tres colores espaciados uniformemente 120° (tono, +120°, +240°): vibrantes pero equilibrados.
Tetrádicos (rectángulo)
Cuatro colores que forman un rectángulo en el círculo (tono, +90°, +180°, +270°): dos pares complementarios.
Complementario dividido
El color base más los dos colores a ambos lados de su complementario (tono +150° y +210°): un contraste fuerte que es más fácil de equilibrar.
Monocromáticos
Un solo tono representado como una rampa de luminosidad de claro a oscuro: una escala armoniosa sin esfuerzo.
Exportar paleta
Copia la armonía seleccionada como propiedades personalizadas de CSS listas para pegar o como una configuración de colores de Tailwind.
:root {
--color-1: #3498DB;
--color-2: #DB7633;
}Acerca del generador de paletas de colores
Un generador de paletas de colores convierte un único color base en un conjunto de colores que funcionan juntos, usando la geometría del círculo cromático. Las armonías de la teoría del color son simplemente relaciones definidas entre tonos: colores situados opuestos entre sí, uno al lado del otro, o repartidos de forma uniforme alrededor del círculo. Esta herramienta toma tu color base, lee su tono, saturación y luminosidad (HSL) y rota el tono en cantidades fijas para construir seis esquemas clásicos: complementarios (tono + 180°), análogos (tono ± 30°), triádicos (120° de separación), tetrádicos o rectángulo (90° de separación), complementario dividido (a ambos lados del complementario) y monocromáticos (un tono, luminosidad variada). Cada paleta se muestra como muestras en vivo para que veas las relaciones en lugar de solo leer números, y cada color viene con sus valores HEX, RGB y HSL listos para copiar. Cuando tengas un esquema que te guste, expórtalo como propiedades personalizadas de CSS o una configuración de colores de Tailwind e incorpóralo directamente a un proyecto. Está pensado para diseñadores, desarrolladores, ilustradores y cualquiera que elija colores para un sitio web, una marca, un gráfico, una presentación o un interior: una forma rápida de pasar de un color que te encanta a toda una paleta equilibrada.
Cómo usar este generador
- 1 Elige un color base con el selector de muestra, o escribe cualquier valor hex (por ejemplo #3498DB o #39F) en el campo.
- 2 Recorre las seis secciones de armonía – complementarios, análogos, triádicos, tetrádicos, complementario dividido y monocromáticos –, cada una mostrada como muestras de color en vivo.
- 3 Copia cualquier color individual en HEX con el botón de cada muestra; cada muestra también muestra los valores RGB y HSL correspondientes.
- 4 Elige una paleta y un formato en el cuadro de exportación para copiar propiedades personalizadas de CSS o una configuración de colores de Tailwind, y luego pégalos en tu proyecto.
Cómo funcionan las armonías de color (el círculo cromático)
Cada armonía es una rotación del tono del color base alrededor del círculo cromático de 360°, manteniendo iguales su saturación y su luminosidad. Trabajar en HSL (tono, saturación, luminosidad) lo facilita: solo cambia el tono. Complementarios – tono + 180°. Los dos colores quedan directamente opuestos, dando el contraste más fuerte. Análogos – tono − 30°, tono, tono + 30°. Colores vecinos que se mezclan con suavidad y resultan armoniosos. Triádicos – tono, tono + 120°, tono + 240°. Tres colores en los vértices de un triángulo equilátero: vívidos pero equilibrados. Tetrádicos (rectángulo) – tono, tono + 90°, tono + 180°, tono + 270°. Dos pares complementarios para un esquema rico de cuatro colores. Complementario dividido – tono, tono + 150°, tono + 210°. El color base con los dos tonos que flanquean su complementario: casi el contraste del complementario, pero más suave. Monocromáticos – un solo tono en varios niveles de luminosidad, desde tintes claros hasta sombras oscuras. Por ejemplo, el color base #3498DB tiene un tono de unos 204°. Su complementario es 204° + 180° = 24° (un naranja), sus compañeros triádicos están en 324° y 84°, y sus complementarios divididos en 354° y 54°. El cálculo se hace en HSL y se reconvierte a HEX para cada muestra.
Preguntas frecuentes
¿Qué es un color complementario?
Un color complementario es el color directamente opuesto a otro en el círculo cromático: una rotación de tono de 180°. El azul y el naranja, el rojo y el verde, y el amarillo y el morado son pares complementarios. Colocados uno junto al otro crean el mayor contraste posible, lo que hace que cada color parezca más intenso, por lo que los pares complementarios son populares para llamadas a la acción, acentos y todo lo que deba destacar. Este generador encuentra un complementario tomando el tono de tu color base y sumándole 180°.
¿Cómo se hace una paleta de colores?
Empieza con un color base que te guste y luego usa las relaciones de la teoría del color para derivar el resto en lugar de adivinar. Elige una armonía que se ajuste al ambiente: los esquemas análogos o monocromáticos resultan tranquilos y unificados, mientras que los complementarios, triádicos y de complementario dividido añaden contraste y energía. Mantén la saturación y la luminosidad coherentes para que los colores parezcan un conjunto, y limítate a un puñado de colores más neutros. Esta herramienta automatiza ese proceso: introduce un color base y genera seis paletas listas para copiar en HEX, RGB, HSL, variables CSS o una configuración de Tailwind.
¿Qué es un esquema de color triádico?
Un esquema de color triádico usa tres colores repartidos de forma uniforme alrededor del círculo cromático, a 120° de separación, por ejemplo rojo, azul y amarillo. Las paletas triádicas son vibrantes y llenas de contraste sin dejar de sentirse equilibradas, porque los tres tonos están a la misma distancia entre sí. Un enfoque común es dejar que un color domine y usar los otros dos como acentos. En este generador la paleta triádica es tu color base más los tonos a +120° y +240°.
¿Qué es un esquema de color análogo?
Un esquema de color análogo usa colores que están uno al lado del otro en el círculo, normalmente dentro de unos 30° del tono base, como el azul, el azul verdoso y el verde. Como los tonos están tan cerca, las paletas análogas se ven suaves, naturales y armoniosas, por eso aparecen tanto en la naturaleza (atardeceres, follaje, el océano). Tienen menos contraste que los esquemas complementarios, así que ayuda elegir un color dominante. Esta herramienta construye una paleta análoga a partir de los tonos a −30°, el color base y +30°.
Herramientas de diseño y color relacionadas
El generador de paletas combina de forma natural con el conversor de color para traducir cualquier muestra entre HEX, RGB, HSL, HSV y CMYK, el verificador de contraste para asegurarte de que tus colores sean legibles y accesibles según WCAG, el generador de gradientes CSS para fundir los colores de la paleta en fondos suaves, y la calculadora de relación de aspecto para el resto de tu flujo de trabajo de diseño.