Saltar al contenido
🛠️
Whiz Tools

Generador de Paletas de Color - Crea Esquemas de Color Armoniosos

Generador gratuito de paletas de color crea hermosos esquemas de color complementarios, análogos, triádicos y monocromáticos al instante. Elige un color primario y genera paletas armoniosas para diseño web, gráficos y proyectos de branding.

Generador Simple de Paleta de Colores

Seleccionar tipo de armonía

Paleta Generada

Seleccione un color y un tipo de armonía para generar una paleta

Sobre Armonías de Color

Las armonías de color son combinaciones de colores agradables a la vista. Crean un sentido de orden y equilibrio en el diseño.

Tipos de Armonía

  • Complementario: Colores opuestos en la rueda de color, creando alto contraste y apariencias vibrantes.
  • Análogo: Colores adyacentes en la rueda de color, creando un diseño sereno y cómodo.
  • Tríadico: Tres colores distribuidos uniformemente alrededor de la rueda de color, ofreciendo un fuerte contraste visual mientras se mantiene la armonía.
  • Monocromático: Diferentes tonos, matices y tintes de un solo color, creando un aspecto cohesivo con variaciones sutiles.
Calculadora de carga...
📚

Documentación

¿Qué es un generador de paletas de colores?

Un generador de paletas de colores es una herramienta que crea un conjunto de colores que combinan entre sí a partir de un color inicial, llamado color primario. Este generador toma un color primario y un tipo de armonía, y calcula el resto de la paleta mediante reglas de la teoría del color. Admite cuatro tipos de armonía: complementaria, análoga, triádica y monocromática.

Cómo crea una paleta la herramienta

La herramienta convierte el color primario de un código hexadecimal (como #3B82F6) al modelo de color HSL. HSL describe un color con tres valores:

  • Tono: la posición del color en una rueda cromática de 360 grados (0° es rojo, 120° es verde, 240° es azul).
  • Saturación: la intensidad del color, desde 0 % (gris) hasta 100 % (color puro).
  • Luminosidad: la cercanía del color al negro o al blanco, desde 0 % (negro) hasta 100 % (blanco).

Cada tipo de armonía modifica el tono, la luminosidad o ambos, y después convierte el resultado nuevamente a un código hexadecimal.

Cómo calcular colores complementarios

La fórmula:

1new_hue = (original_hue + 180) mod 360
2

La saturación y la luminosidad permanecen iguales.

Ejemplo resuelto: El azul puro, #0000FF, tiene un tono de 240°, una saturación de 100 % y una luminosidad de 50 %. Al sumar 180° se obtiene un tono de 60°. Al convertir nuevamente el tono 60° a hexadecimal, con la misma saturación y luminosidad, se obtiene #FFFF00, un amarillo. Por tanto, esta herramienta combina el azul con el amarillo, no con el naranja.

Esto puede resultar confuso porque en las clases de arte a menudo se enseña una rueda cromática diferente, la rueda de pigmentos RYB (rojo-amarillo-azul), en la que el opuesto del azul es el naranja. Esta herramienta funciona con la rueda HSL basada en RGB que utilizan las pantallas, por lo que sus pares complementarios difieren de los de la rueda de mezcla de pinturas.

Cómo calcular colores análogos

Los colores análogos se sitúan cerca del color primario en la rueda. La herramienta genera dos tonos a 30° y otros dos tonos a 60° del tono primario, todos con la misma saturación y luminosidad.

1hue ± 30°  and  hue ± 60°
2

Ejemplo resuelto: El azul, #0000FF (tono 240°), produce el tono 270° (#8000FF), el tono 210° (#0080FF), el tono 300° (#FF00FF) y el tono 180° (#00FFFF). Junto con el color primario, la paleta contiene cinco colores.

Cómo calcular colores triádicos

Los colores triádicos están separados 120° en la rueda y forman un trío uniformemente espaciado con el color primario.

1hue + 120°  and  hue + 240°
2

Ejemplo resuelto: El rojo, #FF0000 (tono 0°), produce el tono 120° (#00FF00, verde) y el tono 240° (#0000FF, azul). El conjunto de tres colores está formado por rojo, verde y azul, los mismos tres tonos utilizados como colores primarios en las pantallas digitales.

Cómo calcular colores monocromáticos

Los colores monocromáticos mantienen el mismo tono y saturación, y solo cambian la luminosidad. La herramienta modifica la luminosidad en 15 y 30 puntos porcentuales en cada dirección, con un límite entre 5 % y 95 %.

1lightness ± 15  and  lightness ± 30
2

Ejemplo resuelto: El azul, #0000FF (luminosidad 50 %), produce una luminosidad de 65 % (#4D4DFF), una luminosidad de 35 % (#0000B3), una luminosidad de 80 % (#9999FF) y una luminosidad de 20 % (#000066).

Uso de la herramienta

  1. Elija un color primario con el selector de color o escriba un código hexadecimal, como #3B82F6.
  2. Elija un tipo de armonía: complementaria, análoga, triádica o monocromática.
  3. Lea la paleta generada. Cada muestra de color indica su código hexadecimal.
  4. Haga clic en una muestra para copiar su código hexadecimal, o use «Copiar todos los colores» para copiar la paleta completa de una vez.

Comprobación del contraste para la accesibilidad

Cada muestra de color presenta dos pequeñas insignias: una para el contraste con el blanco y otra para el contraste con el negro. La herramienta calcula una relación de contraste con la fórmula de las WCAG (Web Content Accessibility Guidelines, pautas de accesibilidad para el contenido web):

1contrast ratio = (L1 + 0.05) / (L2 + 0.05)
2

L1 es la luminancia relativa del color más claro y L2 es la luminancia relativa del color más oscuro. La luminancia se obtiene de los valores de rojo, verde y azul del color. Una insignia indica «AA» cuando la relación es de 4,5 o más, que es el mínimo de 4,5:1 del nivel AA de las WCAG para texto de tamaño normal. De lo contrario, muestra «!». El texto negro sobre fondo blanco obtiene una relación de 21, el valor máximo posible.

Preguntas frecuentes

¿Qué es un generador de paletas de colores? Es una herramienta que produce un conjunto de colores que combinan entre sí, a partir de un color primario y una regla de armonía elegida.

¿Por qué esta herramienta combina el azul con el amarillo en lugar del naranja en los colores complementarios? La herramienta gira el tono 180° en la rueda HSL, que se basa en la forma en que las pantallas mezclan la luz roja, verde y azul. La rueda de pintura roja-amarilla-azul que se enseña en las clases de arte produce pares complementarios diferentes porque mezcla pigmentos en lugar de luz.

¿Cuántos colores produce cada tipo de armonía? La armonía complementaria produce 2 colores en total, incluido el primario. La triádica produce 3. La análoga produce 5. La monocromática produce 5.

¿Qué modelo de color utiliza internamente la herramienta? HSL (tono, saturación y luminosidad). Convierte el código hexadecimal de entrada a HSL, realiza los cálculos y convierte el resultado nuevamente a hexadecimal.

¿Comprueba la herramienta si los colores son accesibles? Sí. Cada muestra indica si tiene suficiente contraste con el blanco y con el negro para cumplir el estándar WCAG AA para texto normal, que exige una relación de al menos 4,5.

¿Puedo utilizar más de un tipo de armonía en un proyecto? Sí. Muchos diseños combinan tipos de armonía; por ejemplo, un conjunto análogo para los colores principales y un color complementario para un botón o un elemento destacado.

Formatos de color

La herramienta muestra los colores como códigos hexadecimales, códigos de seis dígitos precedidos por el signo # (por ejemplo, #FF0000 para el rojo). Los códigos hexadecimales se asignan directamente a valores de rojo, verde y azul de 0 a 255 cada uno. HSL es una forma alternativa de describir los mismos colores usando tono, saturación y luminosidad en lugar de cantidades de rojo, verde y azul.

Referencias

  1. World Wide Web Consortium (W3C). Web Content Accessibility Guidelines (WCAG) 2.2. WCAG 2,2 — relación de contraste (L1 + 0,05) / (L2 + 0,05), relaciones de 1 a 21 y el mínimo de 4,5:1 para texto normal (criterio de éxito 1.4.3, nivel AA).
  2. World Wide Web Consortium (W3C). CSS Color Module Level 4. CSS Color Module Level 4 — en HSL, el tono de 0° es rojo, el de 120° es verde y el de 240° es azul.