Estoy tratando de cambiar el color de fondo opuesto al color de la fuente en javascript algo como esto:
let search_bar_bgColor = document.getElementById("search_bgColor").value; let search_bar_color = search_bar_bgColor.invert();pero el usuario puede escribir cualquier cosa, desde colores hasta valores rgb, ¿cómo convierto la entrada del usuario exactamente opuesta a sí misma?
Haz algo como esto:
function invert(color) { let values = color.split(', ') for (i = 0; i < 3; i++) { let inverted = 255 - values[i] //Invert color by subtracting 255 from RGB value console.log(inverted); } } invert('255, 0, 0')Estoy seguro de que puede configurar esto con bastante facilidad con su valor de entrada.
Por 'opuesto' supongo que te refieres a los más contrastantes .
No existe un método incorporado para hacer esto, por lo que tendrá que diseñar uno propio y no será simple.
El primer paso es definir exactamente qué es un color opuesto. Hay una discusión sobre esto aquí: ¿Cómo elegir colores RGB de buen contraste mediante programación?
Una vez que haya decidido un procedimiento para lograr lo que desea, deberá crear una función para convertir el color. Para simplificar la aritmética, el color pasado y devuelto a la función representaría los colores rgb() (sin preocuparse por ahora de qué formato de color ingresó su usuario).
Una de esas funciones, basada en el método para elegir colores contrastantes en Adobe Illustrator (discutido en la respuesta de Kyle Rosenbluth en el enlace que publiqué anteriormente), podría verse así:
function contrastingColour(red,green,blue) { // find the highest and lowest channel number and sum them; const colorArray = [parseInt(red),parseInt(green),parseInt(blue)]; colorArray.sort((a, b) => a - b); sumOfBrightestAndDimestChannel = colorArray[0] + colorArray[2]; let redChannel = sumOfBrightestAndDimestChannel - red; let greenChannel = sumOfBrightestAndDimestChannel - green; let blueChannel = sumOfBrightestAndDimestChannel - blue; return `rgb(${redChannel},${greenChannel},${blueChannel})`; }Para aplicar la función a las entradas de los usuarios, deberá convertir el formato de color de los usuarios a valores para rojo, verde y azul. Esto está plagado de dificultades si desea que el usuario simplemente escriba algo en una entrada, ya que tendrá que filtrar y convertir cada entrada de forma exhaustiva.
Un mejor enfoque sería limitar la forma en que el usuario puede enviar su color, permitiéndole opciones completas para colores rgb, colores hexadecimales y colores con nombre.
Para los colores rgb, preséntelos con tres menús desplegables, cargados programáticamente con cada opción 0-255 para cada columna.
Del mismo modo, tres menús desplegables para colores hexadecimales pueden limitar las opciones en el rango de 00 a ff.
Para los colores con nombre, se podría construir una lista desplegable de colores seguros para la web mediante programación a partir de las listas disponibles de cada color web con nombre, por ejemplo, https://gist.github.com/bobspace/2712980 , por último, deberá definir funciones para convertir hexadecimal y colores nombrados a rgb para que pueda procesarlos en su función.
Buena suerte.