Generador de paletas de colores: complementarias, triádicas y análogas

Generar una secuencia de tonos o una armonía

Introduce green como Color base, selecciona el esquema de tintes y sombras monocromáticos e indica cuatro tintes y cuatro sombras. El formulario devuelve cuatro colores más oscuros, el original y cuatro más claros: nueve colores en total. Las muestras y el resultado principal de la paleta presentan los códigos en el mismo orden.

En este ejemplo, green es la palabra CSS #008000. El nombre lime, cuyo código es #00FF00, parte de otro verde y produce una secuencia diferente. El conversor de colores permite inspeccionar cada código y sus representaciones RGB, HSL y otras cuando necesitas trabajar con un único color.

El ejemplo predeterminado del formulario es una tríada azul. Para reproducir las tablas de verdes siguientes, cambia expresamente el color base y el esquema. Restablecer los valores iniciales recupera aquella tríada; no conserva la última secuencia monocromática que hayas calculado.

Leer los cuatro pasos a cada lado del verde

La tabla utiliza el color base green y cuatro pasos por lado. Sombra 4 es el color generado más oscuro y Tinte 4, el más claro. El color base permanece en el centro. Los códigos describen las mezclas obtenidas con esos ajustes, sin asignar un nombre CSS propio a cada paso.

Con n pasos a cada lado se obtienen 2n + 1 colores. El control admite un entero entre uno y diez, de modo que el total va de tres a veintiuno. Los extremos de la secuencia no pasan automáticamente a negro puro y blanco puro: las proporciones de mezcla se detienen antes de esos límites.

Con cuatro pasos, las fracciones son un quinto, dos quintos, tres quintos y cuatro quintos. Cada sombra multiplica el canal original por 1 − t. Cada tinte utiliza canal + t × (255 − canal). Al formar el código de ocho bits se redondean los empates hacia arriba.

Para el canal verde original de 128, la sombra más oscura utiliza 128/5 = 25,6. El redondeo produce 26, que se escribe 1A en hexadecimal. De ahí procede #001A00 en la primera fila. El mismo procedimiento se aplica por separado a los tres canales.

Las mezclas operan directamente sobre los canales sRGB codificados. Pasos numéricos iguales no garantizan incrementos iguales de luminosidad percibida. Comprueba las muestras en su uso real cuando necesites que una escala parezca uniformemente espaciada.

Comparar cinco armonías del mismo color base

Para obtener una armonía, cambia el esquema en lugar de aumentar la cuenta de tintes. Los ejemplos siguientes parten de green. Los esquemas análogo y complementario dividido utilizan la separación inicial de 30°. El color original no tiene por qué ser la primera muestra de un conjunto análogo.

El complementario gira el tono 180 grados. La tríada utiliza el tono inicial y los desplazamientos de 120 y 240 grados. El esquema tetrádico cuadrado utiliza intervalos de noventa grados. El análogo toma un tono a cada lado del original y el complementario dividido, uno a cada lado del opuesto.

Estos esquemas conservan la saturación y la luminosidad HSL del color base. La descripción de HSL del W3C explica esa representación numérica. Los nombres de armonías se aplican aquí al círculo HSL basado en RGB; una rueda de pigmentos puede emplear otras relaciones.

Utilizar cada control en el esquema adecuado

El control Separación aparece en los esquemas análogo y complementario dividido. Admite de uno a noventa grados. En el análogo mide la distancia a cada tono vecino; en el dividido mide la distancia a cada lado del tono opuesto. No modifica el tono original, su saturación ni su luminosidad.

El control de tintes y sombras aparece en el esquema monocromático. Su cuenta corresponde a cada lado, sin incluir el color base. Selecciona primero el esquema y después modifica los controles visibles para él. Una cuenta guardada en un control oculto no convierte una tríada de tres colores en una secuencia más larga.

El círculo de tonos acompaña a las armonías. En el modo monocromático se muestran las muestras sin ese círculo, porque cambia la mezcla de los canales hacia negro o blanco. La salida de tonos informa de los ángulos y la salida de colores indica cuántas entradas se han devuelto realmente.

Revisar grises, transparencia y colores fuera de gama

El color base admite nombres CSS, HEX y los formatos numéricos indicados en la ayuda. Si se reconoce un alfa, se ignora la transparencia y se muestra un aviso. La paleta resultante es opaca. Cuando una entrada requiere recorte a sRGB, revisa también ese aviso para saber qué color se utilizó como punto de partida.

Un gris tiene saturación cero. Girar su tono puede devolver varias veces el mismo código y la herramienta explica esa repetición. Para crear una secuencia de grises más claros y oscuros, utiliza el modo monocromático. Una tríada gris con códigos repetidos no representa tres grises visualmente distintos.

Trasladar los códigos a un diseño

Asigna cada código por separado a una propiedad de texto, fondo o borde. La lista de la paleta contiene varios colores; no es un único valor válido para una propiedad que recibe un solo color. Conserva el orden si las posiciones de la escala tienen un significado en tu diseño.

Comprueba las parejas concretas con el comprobador de contraste. El generador no asigna aprobaciones de contraste a la paleta completa. Para reproducir el cálculo, guarda el color base, el esquema y la separación o el número de pasos que corresponda, y revisa esos ajustes al abrir un enlace compartido.