css - rotar - ¿Cómo calcular la tonalidad requerida para generar un color específico?

rotate div css3 (3)

La clave en este caso es definir un color inicial. El blanco, el negro o cualquier escala de grises es técnicamente un color real; no puede saturarlo ni rotarlo. Tendrá que "colorearlo" de alguna manera, y el filtro sepia es el único filtro que realiza algún tipo de coloración.

Sería más fácil si tu imagen fuera 100% roja. Luego, podría agregar el grado objetivo directamente y ajustar la saturación y la luminosidad utilizando HSL para el objetivo. Para un punto de inicio de color blanco, el primer paso es convertir y definir un color intermedio para que podamos saturarlo y rotarlo más adelante.

Primero oscurezcamos la imagen blanca y apliquemos sepia para obtener un color "base" con el que podamos trabajar:

filter: brightness(50%) sepia(1);

Esto producirá un valor de color RGB de aproximadamente:

rgb(178, 160, 128)

El segundo paso es convertir eso al espacio de color HSL que nos da:

hsl(38, 24.5%, 60%);

Resultado de color base

<div></div>

Convertir color base a color objetivo

Estos dos primeros pasos son estáticos y su resultado se reutilizará cada vez que necesitemos encontrar un ajuste objetivo (el valor real de sepia se define en la especificación de los filtros SVG ).

Ahora necesitamos calcular lo que necesitamos aplicar a este color base para obtener el color objetivo. Primero convierta el color de destino, por ejemplo # 689d94 como se indica en la pregunta, a HSL:

hsl(170, 21.3%, 51.2%);

Luego tenemos que calcular la diferencia entre esos. El tono se calcula simplemente restando la base del objetivo. Lo mismo para Saturación y Luminosidad, pero como asumimos el 100% del valor base, necesitamos restar el resultado del 100% para terminar con una diferencia para los valores acumulados:

H: 170 - 38 -> 132° S: 100 + (24.5 - 21.3) -> 103.2% (relative to base 100% = 3.2%) L: 100 + (51.2 - 60.0) -> 91.2% (relative to base 100% = -8.8%)

Convierta esos valores en una cadena de filtro agregándolo al filtro existente, luego configúrelo en el div:

/* ------ base color ------ ------- new target -------------------------------*/ filter: brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%);

Y para configurarlo, probablemente haría algo como esto suponiendo que el filtro y el divElement ya estén declarados:

... filter = "brightness(0.5) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%)"; divElement.style.filter = filter; divElement.style.webkitFilter = filter;

Tenga en cuenta que es probable que haya errores de redondeo ya que RGB se representa como un número entero, mientras que HSL es punto flotante, por lo que el resultado real puede no ser exacto, pero debería acercarse bastante.

Ejemplo en vivo

div { background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat; background-size:5em; width:5em; height:5em; -webkit-filter: brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%); filter: brightness(50%) sepia(1) hue-rotate(132deg) saturate(103.2%) brightness(91.2%); }

<div></div> <span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94"> Target color</span>

Las opciones alternativas viables son:

Predefina SVG con el color ya establecido.
Trabaje con HSL / RGB directamente en JavaScript y modifique el árbol SVG con el color directamente para la forma en lugar de usar filtros. Los filtros son caros en cuanto al rendimiento, especialmente si muchos están encadenados como aquí y además son una parte dominante de una página. Tampoco son compatibles con todos los navegadores.

Tengo una imagen en blanco que estoy usando como fondo para un div, y me gustaría colorear para que coincida con el color principal de los temas. Soy consciente de que puedo hacer:

filter: sepia() saturate(10000%) hue-rotate(30deg);

y pase por el hue-rotate para encontrar un color, pero ¿es posible calcular este valor por adelantado? Dado que el valor hexadecimal especificado es bastante oscuro, imagino que también necesitaré incluir el filtro invert(%) .

Dado un valor hexadecimal de #689d94 ¿qué matemática debo hacer para calcular el valor deseado hue-rotate e invert para convertir mi imagen de fondo blanco en el mismo color?

Editar

Aquí hay un fragmento de un div con una imagen de fondo blanco que se filtra en verde. El truco aquí es que se está filtrando todo el div , no solo la imagen. Si tuviera que ingresar algo de texto en el div el color del texto también se volvería verde.

div { background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent; background-size:5em; width:5em; height:5em; -webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg); filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg); }

<div> </div>

La respuesta aceptada es incorrecta. Hue-rotate no conserva la saturación o el brillo y tienes que hacer cálculos locos para obtener los valores correctos. La forma mucho más fácil, que dará como resultado un resultado correcto, es hacer un filtro CSS que haga referencia a un filtro SVG. La primitiva feColorMatrix en los filtros SVG le permite elegir un color directamente, como así. Tome su color # 424242: divida el valor hexadecimal de cada color entre #FF (.257) y colóquelos en la quinta columna, las primeras tres filas de su matriz de colores. Al igual que:

<div> </div> <svg> <defs> <filter id="colorize" color-interpolation-filters="sRGB"> <feColorMatrix type="matrix" values="0 0 0 0 .257 0 0 0 0 .257 0 0 0 0 .257 0 0 0 1 0"/> /filter> </defs> </svg>

Si se utilizan svg, entonces ...

Puede abrir archivos svg con algún editor de texto, copiar y pegar en un archivo html y luego cambiar el color de la ruta según sea necesario.

En el siguiente código de ejemplo ... acabo de cambiar el color de la ruta del anillo central. Espero que esto ayude..

var imgg =document.getElementById("path"); imgg.style="fill:#424242";

Para imagen de fondo

var myimg=''url(/'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 296.838 296.838" style="enable-background:new 0 0 296.838 296.838;" xml:space="preserve" width="512px" height="512px"><g><path d="M58.733,64.566L41.763,47.596C14.832,74.526,0,110.333,0,148.419s14.832,73.893,41.763,100.823l16.971-16.971 C36.335,209.874,24,180.095,24,148.419S36.335,86.964,58.733,64.566z" fill="#91DC5A"/><path d="M82.137,81.969c-17.75,17.748-27.525,41.348-27.525,66.45s9.775,48.702,27.525,66.45l16.971-16.971 c-13.218-13.216-20.496-30.788-20.496-49.479s7.278-36.264,20.496-49.48L82.137,81.969z" fill="#91DC5A"/><path d="M255.075,47.596l-16.971,16.971c22.399,22.397,34.733,52.177,34.733,83.853s-12.335,61.455-34.733,83.852l16.971,16.971 c26.931-26.931,41.763-62.737,41.763-100.823S282.006,74.526,255.075,47.596z" fill="#91DC5A"/><path d="M214.701,81.969L197.73,98.939c13.218,13.216,20.496,30.788,20.496,49.48s-7.278,36.264-20.496,49.479l16.971,16.971 c17.75-17.748,27.525-41.348,27.525-66.45S232.451,99.717,214.701,81.969z" fill="#91DC5A"/><path d="M148.586,114.789c-8.607,0-17.212,3.284-23.78,9.851c-13.131,13.133-13.131,34.424,0,47.559 c6.568,6.566,15.174,9.851,23.78,9.851c8.606,0,17.212-3.284,23.779-9.851c13.131-13.135,13.131-34.426,0-47.559 C165.798,118.073,157.192,114.789,148.586,114.789z M155.395,155.228c-2.454,2.454-5.319,2.821-6.809,2.821 c-1.489,0-4.356-0.367-6.808-2.818c-3.755-3.756-3.755-9.867-0.003-13.619c2.455-2.455,5.321-2.822,6.811-2.822 c1.489,0,4.354,0.367,6.808,2.82C159.147,145.363,159.147,151.475,155.395,155.228z" fill="#91DC5A"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg> /')''; document.getElementById("mydiv").style.backgroundImage =myimg ; //changing color according to theme .. new theme color :#424242 myimg=myimg.replace(/#91DC5A/g,"#424242"); document.getElementById("mydiv").style.backgroundImage =myimg ;

div { background-size:5em; width:5em; height:5em; }

<html> <body> <div id="mydiv"></div> <span style="font:14px sans-serif;padding:7px;color:#fff;background:#689d94"> Target color</span> </body> </html>