algorithm - Mezcla dos colores no opacos con el modo de mezcla de "tono"

colors blending

Question

Quiero implementar la mezcla de colores como se describe en la especificación de composición y mezcla de W3C . (Estoy haciendo esto en JavaScript, pero el lenguaje no debería importar para resolver mi problema).

En retrospectiva: durante la implementación de la respuesta a esta pregunta, me di cuenta de que esto probablemente sería un buen paquete independiente. En caso de que te interese puedes tomarlo desde las npm .

Funcionó bastante bien hasta ahora, pero quería llevar estos algoritmos un paso más allá y agregar soporte para canales alfa. Gracias a la especificación de composición SVG que proporcionó todas las fórmulas necesarias que no fueron demasiado difíciles.

Pero ahora me quedo con la implementación de los modos de mezcla que la especificación W3C describe como non-separable que son (como se conoce en Photoshop): tono , saturación , color y luminosidad .

Lamentablemente, los algoritmos no están disponibles en la especificación SVG y no tengo idea de cómo trabajar con ellos. Supongo que hay versiones modificadas de non-separable para trabajar con canales alfa que me faltan.

Para hacer que mi problema sea un poco más visual, mostraré lo que Photoshop me da para mezclar tonos en dos colores:

Esto es lo que también puedo reproducir con el algoritmo no alfa de la especificación W3C mencionada.

Lo que no puedo reproducir es el resultado que Photoshop me da cuando pongo un alfa inferior tanto en la fuente como en el color de fondo:

¿Alguien sabe cómo lograr ese resultado programáticamente?

Actualización 1: Se cambiaron las ilustraciones (agregando códigos HSVA y RGBA) para aclarar los colores utilizados.

Actualización 2: Para comprobar posibles soluciones, adjuntaré otros dos ejemplos de fusión generados por Photoshop:

Actualización 3: Resultó que, además de no tener idea de la combinación de colores, también estropeé la configuración de Photoshop , lo que dificultó aún más la tarea de resolver mi pregunta. Se corrigieron las imágenes de ejemplo para posibles futuros pases.

Answer 1

El tono alfa que tiene en su segunda imagen no representa la fórmula de composición de color alfa, sino que refleja la composición alfa de Porter Duff Source Over como se define aquí 9.1.4. Fuente sobre y utiliza la siguiente fórmula:

Si desea lograr ese tipo de mezcla, que no es la combinación correcta de tonos, puede usar la siguiente fórmula en javascript:

PDso = { // Ported Duff Source Over
r: ((S.r * S.a) + (B.r * B.a) * (1 - S.a)) / aR,
g: ((S.g * S.a) + (B.g * B.a) * (1 - S.a)) / aR,
b: ((S.b * S.a) + (B.b * B.a) * (1 - S.a)) / aR,
};
// where
// S : the source rgb
// B : the backdrop rgb
// aR : the union alpha (as + ab * (1 - as))

Modo de fusión de tonos con canal alfa

Aquí hay una captura de pantalla de la fuente de mezcla de matiz exacto sobre el fondo utilizando la fórmula de composición de color alfa que he creado en Photoshop:

El cuadrado del medio con las letras resaltadas en verde es la representación correcta de la mezcla. Aquí está la mezcla de tonos de CSS mezclada con el color de origen dentro del color de fondo, utilizando el nuevo modo de mix-blend-mode CSS ( ejecute el fragmento de código ):

.blends div {
width:140px;
height:140px;
}
.source {
mix-blend-mode: hue;
}
.backdrop.alpha {
background-color: rgba(141, 214, 214, .6);
isolation: isolate;
}
.source.alpha {
background-color: rgba(255, 213, 0, .6);
}

<div id="main">
<div class="blends alpha">
<div class="backdrop alpha">
<div class="source alpha"></div>
</div>
</div>
</div>

Si utiliza un selector de color, obtendrá casi los mismos valores ( 211, 214, 140 <> 210, 214, 140 ). Esto puede deberse a algoritmos ligeramente diferentes, oa diferentes métodos de redondeo, pero en realidad no importa. El hecho es que este es el resultado correcto cuando se combinan los colores alfa con el modo de fusión de tonos.

Entonces, ahora necesitamos que la fórmula tenga los valores de color adecuados para la composición de color alfa aplicada a nuestro modo de combinación de tonos. Busqué un poco y encontré todo dentro de la Gestión de documentos de Adobe - Formato de documento portátil - Parte 1: PDF 1.7 . Podemos encontrar la fórmula de composición de color en la página 328 después de los modos de fusión :

11.3.6 Interpretación de alfa

La fórmula de composición del color.

Esta es la fórmula que logré para obtener la combinación adecuada y más cercana a Photoshop para el modo de fusión de tonos con canal alfa. Lo escribí así en javascript:

var
Union = function(ab, as) {
return as + ab * (1 - as);
},
colourCompositingFormula = function(as, ab, ar, Cs, Cb, Bbs) {
return (1 - (as / ar)) * Cb + (as / ar) * Math.floor((1 - ab) * Cs + ab * Bbs);
},
aR = Union(B.a, S.a), //αr = Union(αb, αs) // Adobe PDF Format Part 1 - page 331
Ca = {
// Adobe PDF Format Part 1 - page 328
r: colourCompositingFormula(S.a, B.a, aR, S.r, B.r, C.r),
g: colourCompositingFormula(S.a, B.a, aR, S.g, B.g, C.g),
b: colourCompositingFormula(S.a, B.a, aR, S.b, B.b, C.b)
}
// where
// C : the hue blend mode result rgb
// S : the source rgb
// B : the backdrop rgb
// aR : the union alpha (as + ab * (1 - as))
// Ca : the final result

body {
padding:0;
margin:0;
}
iframe {
width: 100%;
height: 200px;
border:0;
padding:0;
margin:0;
}

<iframe src="http://zikro.gr/dbg/html/blending-modes/"></iframe>

Mi ejemplo de prueba se puede encontrar here . En el 2.5 Con Alfa (algoritmo de mezcla de tonos calculados) , puede ver el resultado final del modo de mezcla de tonos con alfa. Tiene valores ligeramente diferentes a los del resultado de Photoshop, pero obtuve el mismo resultado ( 202, 205, 118 ) en Fireworks, el tono que mezcla los colores de origen y fondo:

Todas las aplicaciones tienen sus propios algoritmos ligeramente diferentes y quizás la fórmula que he usado es bastante antigua y quizás haya una versión más nueva.

Answer 2

Empezando desde aqui

La mezcla de tonos crea un color con el tono del color de origen y la saturación y luminosidad del color de fondo.

Puedo encontrar algunas fórmulas, pero pueden ser basura, aunque reproducen completamente los números originales publicados:

h : hSource + deltaH * (1 - aSrouce) * aBackdrop * 0.41666666 = 50; 63

s : sBackdrop * 0.9 + deltaS * (1 - aBackdrop) * aSource * 0.20833333 = 45; 47.5

l : lBackdrop * 0.957142857 + deltaL * (1 - aBackdrop) * aSource * 0.77 = 67; 63.3

a: 1 - (1 - aSource) ^ 2 coincidencias siempre