Cálculo de color
La mezcla de colores digital y la opacidad, explicadas
Aprende cómo se mezclan los colores en pantalla, cómo la composición alfa cambia el resultado visible y cómo crear escalas de transición útiles.
Publicado Actualizado
La mezcla digital combina valores de luz emitida; no es el mismo proceso que mezclar pintura física. Una mezcla sRGB simple interpola los canales rojo, verde y azul entre dos extremos.
En una mezcla al 50 %, el coral #FF7F50 y el verde azulado #008080 aportan lo mismo. Prueba la pareja en el mezclador de colores online y compara sus transiciones de cinco y diez pasos.
Esto resulta útil para tareas como «mezclar dos colores»: crear el punto medio de un degradado, construir escalas para gráficos, suavizar un acento de marca o generar una transición entre estados de éxito y advertencia.
Qué cambia el alfa
El alfa describe la cobertura, de totalmente transparente a totalmente opaco. El color visible final también depende del fondo:
.veil {
background: rgb(255 127 80 / 50%);
}Esa declaración se ve más clara sobre blanco y más oscura sobre negro. La calculadora de opacidad muestra tanto el valor transparente codificado como el resultado compuesto.
El Hex de ocho dígitos guarda el alfa en la última pareja. Por ejemplo, #FF7F5080 es aproximadamente un coral al 50 %. RGBA y HSLA expresan la misma idea de forma más explícita.
Una regla rápida para el Hex alfa: 1A es aproximadamente un 10 %, 40 un 25 %, 80 un 50 %, BF un 75 % y FF es totalmente opaco. Usa la calculadora cuando necesites valores de opacidad exactos.
Crea transiciones con un propósito
Una escala generada es un punto de partida, no un sistema de diseño completo. Comprueba el contraste en cada paso, asegúrate de que los valores contiguos se distinguen y considera una interpolación perceptual como OKLCH cuando la uniformidad visual importe. La interpolación sRGB sigue siendo útil para coincidir con los flujos habituales de navegadores y herramientas gráficas.
Para entender la notación de cada resultado, lee Hex, RGB o HSL.