Tintes, sombras y tonos: tres operaciones diferentes

Empieza con definiciones operativas

CSS define colores, espacios de interpolación y algoritmos de mezcla, pero no concede a las palabras tinte, sombra o tono una función especial en el lenguaje. Las herramientas de diseño y los equipos pueden utilizar esas etiquetas de formas distintas. Por eso Color Atlas las trata como vocabulario del proyecto y publica junto al resultado el extremo exacto, el espacio, el peso y la regla de redondeo. Ese límite evita que una palabra familiar oculte un cálculo incompatible.

• Tinte: mezcla el color base hacia blanco opaco #FFFFFF.
• Sombra: mezcla el color base hacia negro opaco #000000.
• Tono: mezcla el color base hacia un neutro indicado explícitamente; esta guía usa #808080.
• Cantidad de mezcla: porcentaje aportado por el extremo blanco, negro o gris, no cantidad de base retenida.
• Resultado: valor HEX sRGB opaco de seis dígitos tras redondear cada canal al entero más cercano.

Un color base y tres escalas reproducibles

Usa Aurora Indigo #4F46E5, cuyos canales sRGB codificados son 79, 70 y 229. Para cada canal calcula resultado = round(base × (1 − p) + extremo × p), donde p es la proporción del extremo entre 0 y 1. Al 20%, el canal rojo de un tinte es round(79 × 0.8 + 255 × 0.2) = 114; el tinte completo es #726BEA. La misma fórmula con negro o #808080 produce las otras dos filas.

Estos valores describen la interpolación de canales en sRGB codificado; no pretenden modelar pintura, luz reflejada ni percepción humana. Mantener un alcance limitado resulta útil: un importador de base de datos, un script de compilación y un navegador pueden comparar los mismos canales enteros sin adivinar qué significaba «20% más claro».

Expresa el mismo contrato con color-mix()

CSS Color 5 define color-mix() como una función que mezcla los colores proporcionados en un espacio de interpolación elegido y en cantidades concretas. Indica el espacio aunque el valor predeterminado actual sea Oklab: la tabla anterior representa deliberadamente un cálculo por canales sRGB, por lo que el CSS equivalente usa in srgb. Con dos colores opacos cuyos porcentajes suman 100%, el primer porcentaje es la proporción de base y el segundo la del extremo.

:root {
  --aurora-indigo: #4F46E5;
  --aurora-tint-20: #726BEA;
  --aurora-shade-40: #2F2A89;
  --aurora-tone-40: #635DBD;
}

@supports (color: color-mix(in srgb, black, white)) {
  :root {
    --aurora-tint-20: color-mix(in srgb, var(--aurora-indigo) 80%, white 20%);
    --aurora-shade-40: color-mix(in srgb, var(--aurora-indigo) 60%, black 40%);
    --aurora-tone-40: color-mix(in srgb, var(--aurora-indigo) 60%, #808080 40%);
  }
}

• Escribe ambos porcentajes cuando el token sirva de documentación, aunque CSS pudiera inferir uno.
• Usa propiedades personalizadas HEX estáticas como fallback y sustitúyelas dentro de @supports cuando color-mix() esté disponible.
• No confundas un 20% del extremo con conservar el 20% de la base: generan posiciones opuestas en la escala.
• Cuando intervenga alpha, regístralo explícitamente porque la interpolación usa componentes premultiplicados y la opacidad final puede cambiar.
• Inspecciona el color resuelto; no presupongas que todos los espacios de interpolación se serializan con el mismo HEX.

El espacio de interpolación forma parte del resultado

Dos extremos y un porcentaje no determinan de forma única un color mezclado hasta que se conoce el espacio de interpolación. CSS Color 4 explica que cada espacio responde a objetivos diferentes. sRGB codificado sirve para interpolar canales de forma compatible con sistemas antiguos, pero no es lineal respecto a la luz ni perceptualmente uniforme. Oklab busca pasos perceptualmente más regulares. Oklch puede conservar chroma y exponer la elección del recorrido de tono. srgb-linear interpola valores lineales respecto a la intensidad luminosa.

• Usa in srgb al reproducir una fórmula RGB existente o una escala heredada almacenada.
• Considera in oklab cuando importen más los pasos perceptualmente regulares que la antigua aritmética HEX.
• Considera in oklch cuando controlar luminosidad perceptual, chroma y recorrido de tono sea parte del método.
• Usa in srgb-linear solo cuando la interpolación lineal respecto a la luz sea el contrato técnico previsto.
• Nunca compares resultados de dos espacios como si la única causa posible de la diferencia fuera un error de redondeo.

Cambiar la luminosidad HSL no es la misma operación

HSL representa un color sRGB mediante tono, saturación y luminosidad. Sumar veinte puntos porcentuales a la luminosidad HSL modifica una coordenada; no mezcla el color con un veinte por ciento de blanco en sRGB codificado. Ambas operaciones pueden producir colores visual y numéricamente diferentes. Del mismo modo, reducir la luminosidad HSL no equivale automáticamente a una sombra sRGB, y bajar la saturación no es lo mismo que mezclar con un gris neutro concreto.

• Di «aumentar la luminosidad HSL» cuando esa sea la transformación real.
• Di «mezclar 20% de blanco en sRGB» cuando uses interpolación de canales.
• No llames tinte a todo resultado más pálido si procede de opacidad sobre un fondo desconocido.
• No llames sombra a todo resultado más oscuro si procede de un modo de fusión, overlay o ajuste de exposición.
• No trates pasos iguales de luminosidad HSL como pasos iguales de luminosidad percibida; la especificación CSS señala expresamente las limitaciones perceptivas de HSL.
• Convierte y almacena el color final resuelto cuando importe la reproducción exacta entre herramientas.

La regla de nomenclatura es sencilla: describe la operación realizada, no solo el aspecto esperado. Una paleta puede contener variantes de luminosidad HSL, mezclas Oklab, overlays y tintes sRGB, pero sus metadatos deben mantener distinguibles esos métodos.

Cada paso generado necesita una nueva comprobación de contraste

Un color relacionado no es automáticamente adecuado para el mismo papel textual o de interfaz que su base. La mezcla cambia la luminancia relativa y el contraste se calcula con el primer plano y el fondo finalmente renderizados. Los ejemplos del 40% muestran claramente la dirección. Las relaciones se calculan con la fórmula de luminancia sRGB sin redondear y se muestran con dos decimales; para texto normal solo se recomienda el más fuerte entre negro y blanco.

Publica tokens de paleta que otro equipo pueda auditar

• Conserva un color base canónico revisado y un identificador estable.
• Identifica la operación, el color extremo, su porcentaje, el espacio de interpolación y el comportamiento alpha.
• Genera los valores con una única implementación determinista y rechaza nombres de token duplicados.
• Guarda canales exactos o precisión suficiente antes de formatear un HEX destinado a personas.
• Calcula el contraste de cada función de primer plano y fondo después de resolver el color final.
• Comprueba por separado los estados hover, active, focus, selected y disabled, y los temas claro y oscuro.
• Registra la especificación de origen y la versión del generador para que una migración posterior explique resultados distintos.
• Ofrece CSS listo para copiar y el método de cálculo junto a las muestras, en vez de publicar cuadrículas de color sin explicación.

Color Atlas sigue ese rastro de auditoría. PostgreSQL almacena los registros base y artículos revisados; la página SSR calcula colores relacionados desde el valor sRGB declarado y explica su metodología. Así, un tinte o una sombra sirve como entrada reproducible para diseño y no como otra página casi idéntica creada únicamente para una palabra clave.