Generador de tonos y paletas de color

Cómo funciona

Escriba un solo color en el panel izquierdo — #2F6FED, rgb(47, 111, 237) o hsl(220, 84%, 56%) se reconocen por igual; si escribe varios colores, cada línea produce su propia paleta. Después elija qué quiere. La opción de tonos claros y oscuros mantiene fijos el matiz y la saturación y solo mueve la luminosidad, del 90 % al 10 %; con 7 colores, #2F6FED se convierte en una escalera de siete peldaños que va de #D0DFFB en el extremo claro a #04132F en el oscuro. La opción complementaria cruza el círculo cromático 180 grados y entrega el color de acento; la análoga reparte los vecinos en ±30 grados, y la triádica trae tres colores separados 120 grados. Cada línea muestra lado a lado los equivalentes HEX, RGB y HSL, y los cuadros bajo la salida pintan cada color en vivo con su misma etiqueta HEX. Si el tono claro será fondo y el oscuro texto, no decida sin medir su legibilidad con el comprobador de contraste.

Esta herramienta también se busca como tonos de un color, tono claro y oscuro de un color, color complementario, tonos hex.

¿Qué es Tono claro (tint)?

Un tint es la versión aclarada de un color. En pintura se obtiene añadiendo blanco; en pantalla, subiendo el valor de luminosidad del modelo HSL. Los dos métodos no dan el mismo resultado: añadir blanco baja la saturación y deslava el color, mientras que subir solo la luminosidad conserva su identidad. En una interfaz, los tonos claros se usan sobre todo en superficies que deben quedarse en segundo plano — fondos, la fila seleccionada de una lista, un botón desactivado.

¿Qué es Tono oscuro (shade)?

Un shade es la versión oscurecida de un color y funciona al revés que el tint: añadir negro en pintura, bajar la luminosidad en pantalla. En una interfaz, los tonos oscuros sirven donde algo debe resaltar — el estado de un botón que se oscurece al pasar el cursor, un color de texto legible sobre fondo claro, los bordes. La única precaución en el extremo oscuro: por debajo del 10 % de luminosidad, los distintos tonos dejan de distinguirse entre sí.

¿Qué es Luminosidad (lightness)?

La luminosidad es el tercer componente del modelo HSL y sitúa el color entre el negro y el blanco con un porcentaje: 0 % es negro puro, 100 % blanco puro, y 50 % el punto medio donde el color se ve más saturado. Toda la producción de tonos claros y oscuros de esta herramienta se hace moviendo ese único número. Cuando la luminosidad toca el 0 % o el 100 %, el matiz y la saturación pierden su sentido — por eso la escalera se mantiene entre el 90 % y el 10 %.

¿Qué es Color complementario?

El color complementario es el que está exactamente enfrente en el círculo cromático, a 180 grados: el naranja para el azul, el verde para el rojo. Puestos lado a lado, dos complementarios se refuerzan mutuamente todo lo posible; por eso el complementario es el candidato natural a color de acento. Por la misma razón, cansa la vista y crea sensación de vibración en superficies grandes — es más seguro hacerlo el color de un solo botón que el fondo de la página.

¿Qué diferencia hay entre la armonía análoga y la triádica?

Las dos construyen la paleta girando sobre el círculo cromático; lo único que cambia es cuánto giran. La armonía análoga se queda en un arco estrecho de ±30 grados: sus colores parecen de la misma familia y dan una superficie tranquila y coherente — ideal para fondos y rellenos. La triádica divide el círculo en tres partes iguales de 120 grados: los colores se separan con claridad unos de otros, y por eso se prefiere cuando tres series deben mantenerse distintas en un mismo gráfico. En resumen: la análoga construye unidad, la triádica construye distinción.

¿Por qué la escalera de tonos se construye sobre la luminosidad?

Hay dos formas comunes de aclarar un color: mezclarlo con blanco o subir el valor de luminosidad en HSL. Mezclar con blanco también baja la saturación: el color palidece mientras se aclara, y un color de marca se va al gris en uno o dos pasos.

Esta herramienta mantiene fijos el matiz y la saturación y solo mueve la luminosidad. El resultado es una escalera de pasos regulares que se queda en la misma familia del extremo claro al oscuro — exactamente lo que pide un tema de interfaz.

Una advertencia: en los extremos muy claros y muy oscuros, el ojo distingue menos las diferencias. En una escalera de 10 peldaños, dos colores vecinos de los extremos pueden parecer pegados — no es un fallo, es el comportamiento natural del ojo.

¿Qué armonía usar en cada caso?

Las cuatro opciones no sirven para lo mismo; cuál elegir depende del papel que el color va a cumplir en la interfaz.

• Tonos claros y oscuros → tema monocromo, estados de botón, bordes y capas de fondo
• Complementario → un único acento que debe llamar la atención (insignia de aviso, botón de llamada)
• Análogo → fondos y rellenos tranquilos que parecen de la misma familia
• Triádico → tres series que deben distinguirse dentro de un mismo gráfico

Preguntas frecuentes

¿Qué significan tint y shade?

El tint es la versión aclarada de un color; el shade, su versión oscurecida. Esta herramienta produce ambos en una misma escalera: las líneas de arriba son los tonos claros y las de abajo, los oscuros.

Si pego el valor HSL generado en mi CSS, ¿obtengo el mismo color?

Casi. Los valores HSL se redondean a enteros para que sean legibles, mientras que el HEX sale del cálculo sin redondear; entre ambos puede haber una diferencia de una unidad, invisible al ojo. Si necesita una coincidencia exacta, use el valor HEX.

¿Cuántos peldaños necesita una escalera?

Para una interfaz pequeña bastan 5. Si colorea por separado los estados normal, al pasar el cursor, pulsado y desactivado de un botón, 7 resultan más cómodos; para un design system completo, 10 dan el margen necesario.

¿Mis colores se envían a algún servidor?

No. La generación ocurre por completo dentro de su navegador; los códigos de color que escribe no se transmiten a ningún servidor ni a terceros.