Genere tintes de color

Esta herramienta mezcla el color hexadecimal indicado con blanco en incrementos porcentuales iguales y devuelve valores HEX y RGB precisos para cada tinte. El cálculo es determinista: el mismo color y número de pasos siempre producen la misma paleta. Úsela para preparar estados de interfaz, fondos, gráficos, ilustraciones o tokens de diseño que necesiten una progresión clara desde el color original hasta el blanco.

Elija un color base y una cantidad útil de pasos

Comience con un color base hexadecimal de tres o seis dígitos, como #36c o #3366cc. La forma corta se expande antes del cálculo, por lo que ambos ejemplos representan exactamente el mismo color y producen resultados idénticos. Después, elija entre uno y veinte pasos. La cantidad indica el número de tintes generados, sin incluir el color base original e incluyendo el blanco puro como resultado final. Cuatro pasos mezclan, por tanto, el color base con blanco al 25%, 50%, 75% y 100%. Una cantidad pequeña funciona bien para una jerarquía compacta de interfaz, mientras que una mayor ofrece opciones más precisas para visualización de datos, ilustración o exploración de tokens. El resultado informa por separado la base normalizada y cada tinte generado, para distinguir claramente el valor proporcionado de los valores calculados. Como la progresión siempre termina en blanco, las muestras adyacentes presentan cambios iguales en el porcentaje de mezcla, aunque sus diferencias visibles varíen según el color base y la pantalla.

Comprenda la fórmula de mezcla determinista

Cada canal rojo, verde y azul se mezcla de forma independiente hacia 255, el valor de canal del blanco. Para el tinte número k de una paleta de n pasos, la herramienta calcula base + (255 − base) × k/n y redondea el canal al entero más cercano. Aplicar la misma proporción a los tres canales conserva la relación con el color original mientras reduce progresivamente su distancia al blanco. La respuesta incluye un índice desde uno, el porcentaje exacto de mezcla con blanco, el valor HEX normalizado en minúsculas, los números de cada canal y una cadena RGB. Se trata de interpolación sRGB directa; no modifica la luminosidad HSL, no realiza mezcla óptica con corrección gamma ni intenta igualación perceptual. Esta diferencia importa al comparar el resultado con programas gráficos que ofrecen varios espacios de mezcla. La fórmula es deliberadamente sencilla, documentada y estable, por lo que resulta adecuada para scripts de compilación, instantáneas, generación automática de tokens y sistemas donde la repetibilidad importa más que el ajuste visual subjetivo.

Aplique la paleta con seguridad en un sistema de diseño

Considere los valores generados como una escala inicial coherente y pruébelos después en su contexto real. Los tintes claros sirven para filas seleccionadas, fondos de avisos, bordes sutiles, rellenos de gráficos, superficies al pasar el cursor y zonas decorativas, pero una paleta matemáticamente regular no garantiza por sí sola un contraste accesible. Compruebe el texto y los iconos de primer plano sobre cada tinte elegido conforme a los requisitos de contraste aplicables a su producto. Conserve el color base como token separado y nombre los valores generados según su función o porcentaje de mezcla, como brand-tint-25 o info-background, en lugar de depender solo de la posición en la lista. Los nombres porcentuales siguen siendo comprensibles si otra paleta utiliza una cantidad diferente de pasos. En flujos automatizados, guarde directamente los valores HEX devueltos y conserve junto a ellos el color de entrada y el número de pasos para poder reproducir la paleta. Los colores no válidos, formatos hexadecimales con alfa, cantidades fraccionarias y valores fuera del intervalo permitido se rechazan, evitando que cambios accidentales de tokens pasen inadvertidos.