Generador de Paletas de Color - Crea Esquemas de Color Armoniosos

¿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 y 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:

$h' = (h + 180) \bmod 360$

donde h es el tono del color primario en grados y h′ es el nuevo tono. El paso mod devuelve a la rueda un resultado que supera una vuelta completa.

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.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

donde h es el tono del color primario.

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.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

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 %.

$l \pm 15, \qquad l \pm 30$

donde l es la luminosidad del color primario, expresada en puntos porcentuales.

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).

Debido a los límites de 5 % y 95 %, un color primario que ya sea muy claro o muy oscuro puede alcanzar el mismo límite dos veces. El negro, #000000, produce luminosidades de 15 % (#262626), 5 % (#0D0D0D), 30 % (#4D4D4D) y 5 % nuevamente (#0D0D0D), por lo que un color se repite.

Uso de la herramienta

1. Elige un color primario con el selector de color o escribe un código hexadecimal, como #3B82F6.
2. Elige un tipo de armonía: complementaria, análoga, triádica o monocromática.
3. Consulta la paleta generada. Cada muestra muestra su código hexadecimal en un botón.
4. Haz clic en ese botón para copiar el código hexadecimal o utiliza «Copiar todos los colores» para copiar toda la paleta de una vez.

Comprobación del contraste para la accesibilidad

Cada muestra de color presenta dos pequeños distintivos: uno para el contraste con blanco y otro para el contraste con negro. La herramienta calcula una relación de contraste mediante la fórmula de las WCAG (Pautas de Accesibilidad para el Contenido Web):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

donde C es la relación de contraste.

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 rojo, verde y azul del color. Un distintivo muestra «AA» cuando la relación es de 4,5 o superior, el mínimo de las WCAG para texto de tamaño normal. Muestra «!» cuando la relación es inferior a 4,5. Al pasar el cursor sobre un distintivo se muestra la relación exacta. El texto negro sobre un fondo blanco alcanza una relación de 21, el valor máximo posible.

La herramienta utiliza la misma regla de contraste para elegir el color del botón de copia de cada muestra. Compara el color de la muestra con el negro y con el blanco, y coloca el que ofrece mayor legibilidad. El cambio se produce con una luminancia relativa aproximada de 0,179, el punto en el que ambas relaciones son iguales.

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 escribe cada color generado como un código hexadecimal de seis dígitos precedido por el signo # (por ejemplo, #ff0000 para el rojo). Los códigos hexadecimales corresponden directamente a valores de rojo, verde y azul de 0 a 255 cada uno. El color primario se muestra exactamente como se introdujo, por lo que una abreviatura de tres dígitos, como #F00, conserva el formato corto. Los códigos de tres dígitos representan el mismo color que la forma de seis dígitos: cada dígito se duplica, de modo que #F00 equivale a #FF0000. HSL es una forma alternativa de describir los mismos colores mediante el tono, la saturación y la luminosidad, en lugar de las cantidades de rojo, verde y azul.