html - porcentual - Cómo calcular la diferencia de color en porcentaje para Menos

formula de diferencia en excel

Question

Digamos que tengo dos colores #595b5c y #424545 . Quiero saber la diferencia porcentual entre ellos, ¿cómo hacer eso? La razón es que quiero usar funciones de lighten y darken de menos, lo que toma el porcentaje como parámetro.

P.ej:

@darkgrey1: #595b5c;
@darkgrey2: darken(@darkgrey1,10%);

¿Cómo puedo saber por cuánto #424545 es más oscuro que #595b5c

Answer 1

Las funciones aclarar y oscurecer cambian la claridad del color en el espacio de color HSL. Si convierte cada color a HSL, verá cuánto difiere la luminosidad.

Utilicé un convertidor de RGB a HSL en línea .

El color #595b5c ( rgb(89,91,92) ) es hsl(200,1.7,35.5) .

El color #424545 ( rgb(66,69,69) ) es hsl(180,2.2,26.5) .

Entonces, la diferencia en la ligereza es del 9.0 por ciento de unidades

Tenga en cuenta que #424545 no tiene el tono y la saturación exactos como #595b5c . Si oscuras uno no obtendrás exactamente el otro.

Answer 2

Se puede hacer de muchas maneras diferentes, pero aquí hay una solución que usa javascript:

function color_meter(cwith, ccolor) {
if (!cwith && !ccolor) return;
var _cwith = (cwith.charAt(0)=="#") ? cwith.substring(1,7) : cwith;
var _ccolor = (ccolor.charAt(0)=="#") ? ccolor.substring(1,7) : ccolor;
var _r = parseInt(_cwith.substring(0,2), 16);
var _g = parseInt(_cwith.substring(2,4), 16);
var _b = parseInt(_cwith.substring(4,6), 16);
var __r = parseInt(_ccolor.substring(0,2), 16);
var __g = parseInt(_ccolor.substring(2,4), 16);
var __b = parseInt(_ccolor.substring(4,6), 16);
var p1 = (_r / 255) * 100;
var p2 = (_g / 255) * 100;
var p3 = (_b / 255) * 100;
var perc1 = Math.round((p1 + p2 + p3) / 3);
var p1 = (__r / 255) * 100;
var p2 = (__g / 255) * 100;
var p3 = (__b / 255) * 100;
var perc2 = Math.round((p1 + p2 + p3) / 3);
return Math.abs(perc1 - perc2);
}

Aquí está la Source

Answer 3

Tengo que resolver el mismo problema a diario, así que creé una herramienta para sugerencias de funciones de color . Enumera la mayoría de las funciones de MENOS que pasan de un color a otro, de modo que pueda concentrarse en si usar darken o softlight con un color tiene más sentido en términos de su diseño.

(Las sepias tienen increíbles habilidades para cambiar de color, por lo tanto el nombre / logotipo)