javascript - darken - select color js
Mezcla de dos colores "naturalmente" en javascript (8)
¿Qué hay de convertir RGB a CMYK usando this y luego:
// CMYK colors
colorA = [2, 90, 94, 0];
colorB = [4, 0, 80, 0];
colorMixC = (colorA[0] + colorB[0]) / 2;
colorMixM = (colorA[1] + colorB[1]) / 2;
colorMixY = (colorA[2] + colorB[2]) / 2;
colorMixK = (colorA[3] + colorB[3]) / 2;
Y finalmente convierta CMYK a RGB usando this
El problema: quiero mezclar dos colores en javascript y obtener el color del resultado. Hay muchas preguntas similares en SO, sin embargo, no encuentro nada que realmente funcione correctamente. Sé que mezclar dos pinturas de diferentes colores (pigmentos) y luces dará resultados muy diferentes ( http://en.wikipedia.org/wiki/Color_mixing ).
Estas son las preguntas y soluciones sugeridas que ya he visto, y traté de implementar:
1: mezcla de dos vectores de color RGB para obtener resultados
Por lo tanto, mezclar colores en RGB. Lo implementé, y en algunos casos funciona en algunos casos, no.
Ejemplo de trabajo: mezclar red con yellow -> orange . ¡Estupendo!
http://jsbin.com/afomim/1/edit
Ejemplo que no funciona: mezclar blue con yellow -> gray . ¡No muy bien! :) http://jsbin.com/afomim/5/edit
Sé que en RGB mezclar blue con yellow nunca volverá green , y entiendo por qué.
No encontraremos la respuesta aquí, sigamos adelante.
2: Adición de colores (colores) juntos como pintura (azul + amarillo = verde, etc.)
Tratemos de trabajar con los valores CMYK como se sugiere en esta discusión. Mezclar cyan con yellow da green :
http://jsbin.com/igaveg/1/edit
pero mezclar blue con yellow da como resultado black .
http://jsbin.com/igaveg/2/edit -> ¡No funciona!
3: ¿Cómo mezclar colores "naturalmente" con C #?
Una pregunta muy similar. La respuesta más votada sugiere la conversión de colores a LAB, y esta solución parece prometedora.
Así que convertí mis colores a LAB. ¡El algoritmo de conversión es correcto, lo probé!
http://jsbin.com/oxefox/1/edit
Ahora tengo los dos colores en LAB, ¿pero cómo mezclarlos?
NOTA Sé que probablemente no encontraré un algo que mezcle blue con yellow y le dará el green perfecto, pero espero que pueda generar algo similar al verde :)
Ahora que tiene sus dos colores en formato LAB (o L * a * b *), puede promediarlos juntos.
L(result) = L(first color) + L(second color) / 2
A(result) = A(first color) + A(second color) / 2
B(result) = B(first color) + B(second color) / 2
Usted ya sabía esto, ¿verdad? porque esto es lo que estabas haciendo con tus colores RGB originales para promediarlos.
Con los colores CIELAB tiene tres coordenadas para cada uno de sus dos colores en el espacio de color LAB. (Por cierto, excelente trabajo para llegar tan lejos). Lo que funcionará mejor y será más fácil de implementar para usted es encontrar el punto medio tridimensional de un segmento de línea imaginaria que une los dos puntos en el espacio LAB. Puede hacerlo fácilmente simplemente promediando cada uno de los componentes de sus dos colores: el promedio de L , el promedio de a y el promedio de b . A continuación, conviértalo de nuevo en espacio RGB invirtiendo la transformación (asegúrese de que el espacio de iluminación se mantenga igual en ambos sentidos).
Su nuevo color puede estar fuera del espacio de color RGB. Puede decidir recortar al color visible más cercano en este caso. (Los azules son especialmente vulnerables a esto).
De hecho, me encontré con el mismo problema al intentar mezclar 2 colores RGB. Estas 2 funciones funcionaron para mí:
//colorChannelA and colorChannelB are ints ranging from 0 to 255
function colorChannelMixer(colorChannelA, colorChannelB, amountToMix){
var channelA = colorChannelA*amountToMix;
var channelB = colorChannelB*(1-amountToMix);
return parseInt(channelA+channelB);
}
//rgbA and rgbB are arrays, amountToMix ranges from 0.0 to 1.0
//example (red): rgbA = [255,0,0]
function colorMixer(rgbA, rgbB, amountToMix){
var r = colorChannelMixer(rgbA[0],rgbB[0],amountToMix);
var g = colorChannelMixer(rgbA[1],rgbB[1],amountToMix);
var b = colorChannelMixer(rgbA[2],rgbB[2],amountToMix);
return "rgb("+r+","+g+","+b+")";
}
Para mezclar rojo ([255,0,0]) con azul ([0,0,255]) de manera uniforme, puede llamar
colorMixer([255,0,0], [0,0,255], 0.5);//returns "rgb(127,0,127)" (purple)
Esto puede ayudar, aunque primero debe convertir cada valor de color en una matriz. Si usa Fabric.js para trabajar con elementos canvas, esto se vuelve realmente fácil. Solo llama
var rgbA = new fabric.Color(yourColor);
var rgbB = new fabric.Color(yourSecondColor);
luego llame
colorMixer(rgbA.getSource(),rgbB.getSource(),0.5);
Espero que estas funciones ayuden.
Dediqué 3-4 días a esta pregunta. Es un problema realmente complejo.
Esto es lo que puedes hacer si quieres mezclar dos colores "naturalmente":
Mezclar CMYK: no es la solución perfecta, pero si necesita una solución ahora, y no quiere pasar meses aprendiendo sobre el tema, experimentando y codificando, puede consultar esto: https://github.com/AndreasSoiron/Color_mixer
Implementando la teoría de Kubelka-Munk. Pasé mucho tiempo leyendo sobre ello y tratando de entenderlo. Este debería ser el camino a seguir si desea una solución profesional, pero necesita 6 parámetros (como reflectancia, absorción, etc.) para cada color que desee mezclar. Tener R, G, B no es suficiente. Implementar la teoría no es difícil, pero obtener los parámetros que necesita sobre cada color parece ser la parte que falta. Si descubres cómo hacerlo, házmelo saber :)
Experimental: puedes hacer algo que los desarrolladores de la aplicación ipad: fiftythree.com/paper han hecho. Seleccionó manualmente 100 pares de colores populares y probó cómo se deben combinar. Aprenda más sobre esto here .
Personalmente implementaré la mezcla CMYK por el momento, y tal vez más tarde, si tengo tiempo, trataré de hacer algo como los chicos de Fiftythree. Veremos :)
El modelo de color RYB podría ser una opción adecuada para los cálculos de mezcla de colores. Según Wikipedia , se usa principalmente en la educación de arte y diseño, particularmente pintura.
Para mezclar 2 colores, uno convierte ambos colores de RGB a RYB, mezcla los colores agregando cada componente de color y convierte el color resultante de RYB a RGB.
Lo he intentado con la herramienta de mezcla de colores en línea , y los resultados son
0000FF ( azul ) mezclado con # FFFF00 ( amarillo ) da # 008000 ( verde oscuro ),
FF0000 ( rojo ) mezclado con # FFFF00 ( amarillo ) da # FFA000 ( naranja ).
Entonces este método produce exactamente los resultados que esperaba.
Lamentablemente, no pude encontrar una referencia con la fórmula "lista para usar" para convertir de RGB a RYB y volver a RGB.
El artículo Paint Inspired Color Mixing and Compositing for Visualisation - Gossett y Chen describen la idea general del modelo de color RYB en la sección "2 LOGRO DE MEZCLA INTUITIVA DEL COLOR".
De acuerdo con ese documento, la conversión de RYB a RGB se realiza por interpolación trilineal .
La parte difícil es la conversión de RGB a RYB, porque requiere la inversión de la interpolación trilineal. Consulte Conversión entre espacios de color RGB y RYB para obtener más información.
Incluso si esta respuesta no proporciona una fórmula completa para el cálculo, espero que brinde algunas ideas sobre cómo proceder.
Este es un buen artículo que escribí sobre la mezcla de colores en el espacio de color CIE-LCh, que produce una mezcla que conserva el tono, la saturación y la luminancia de una manera consistente con la percepción de su ojo.
Necesita usar el modelo de color CMY o RGB .
¿Por qué Blue + Yellow no puede ser Gray ?
Blue + Yellow = ( Cyan + Magenta ) + Yellow => Gray . Por qué no?
Entonces puede usar RGB (CMY) para mezclar colores.