pintar - tabla de colores html pdf

¿Cómo puedo obtener el color a medio camino entre dos colores?

Question

Tengo dos colores:

#15293E
#012549

¿Cómo puedo encontrar el color que está a medio camino entre ellos? ¿Hay alguna forma de hacer este cálculo?

Answer 1

Con menos

Si usa el último preprocesador LESS CSS , notará que hay una función ( mix() ) que hace esto:

mix(#15293E, #012549, 50%)

Salidas: #0b2744 .

Answer 2

Función Handy-Dandy

function padToTwo(numberString) {
    if (numberString.length < 2) {
        numberString = ''0'' + numberString;
    }
    return numberString;
}

function hexAverage() {
    var args = Array.prototype.slice.call(arguments);
    return args.reduce(function (previousValue, currentValue) {
        return currentValue
            .replace(/^#/, '''')
            .match(/.{2}/g)
            .map(function (value, index) {
                return previousValue[index] + parseInt(value, 16);
            });
    }, [0, 0, 0])
    .reduce(function (previousValue, currentValue) {
        return previousValue + padToTwo(Math.floor(currentValue / args.length).toString(16));
    }, ''#'');
}

console.log(hexAverage(''#111111'', ''#333333'')); // => #222222
console.log(hexAverage(''#111111'', ''#222222'')); // => #191919
console.log(hexAverage(''#111111'', ''#222222'', ''#333333'')); // => #222222
console.log(hexAverage(''#000483'', ''#004B39'')); // => #00275e

Answer 3

Como acaba de decir el señor Lister, es fácil automatizar el cálculo con cualquier lenguaje de programación:

1. Separe sus dos colores en sus 3 números de color para Rojo, Verde, Azul : (r1, g1, b1) y (r2, g2, b2).
   
   • Por ejemplo, # 15293E, # 012549 convertirse ("15", "29", "3E"), ("01", "25", "49")
     
     
2. Convierta cada cadena de color en un entero, especificando explícitamente que está analizando una representación hexadecimal-based de un número.
   • Por ejemplo ("15", "29", "3E") se convierte en (21, 41, 62)
     
     
3. Calcule el promedio (r '', g'', b '') = ((r1 + r2) / 2, (g1 + g2) / 2, (b1 + b2) / 2).
   • Por ejemplo ((21 + 1) / 2, (41 + 37) / 2, (62 + 73) / 2) = (11, 39, 67)
     
     
4. Convierta nuevamente a cadenas, especificando explícitamente que está generando representaciones hexadecimales de dos dígitos (pad con un cero cuando sea necesario).
   • Por ejemplo (11, 39, 67) -> ("0B", "27", "43")
     
     
5. Concatenar un carácter nítido seguido de las 3 cuerdas
   • Por ejemplo ("0B", "27", "43") -> "# 0B2743"
     

Editar: La implementación no es "muy fácil" como dije inicialmente. Me tomé el tiempo para escribir el código en varios idiomas en Programming-Idioms .

Answer 4

Me gusta esto:

function colourGradientor(p, rgb_beginning, rgb_end){

    var w = p * 2 - 1;


    var w1 = (w + 1) / 2.0;
    var w2 = 1 - w1;

    var rgb = [parseInt(rgb_beginning[0] * w1 + rgb_end[0] * w2),
        parseInt(rgb_beginning[1] * w1 + rgb_end[1] * w2),
            parseInt(rgb_beginning[2] * w1 + rgb_end[2] * w2)];
    return rgb;
};

donde p es un valor entre 0 y 1 que especifica a qué distancia debe estar el degradado y rgb_beginning es el del color y rgb_end es el del color. Ambas son matrices [r, g, b], por lo que primero tendrás que convertir desde el hex. Esta es una versión simplificada de la función de mezcla de LESS, que creo que es de SASS. Para el poster p sería 0.5

Answer 5

Si lo deseaba, podría hacerlo usted mismo con la calculadora de Windows.

1. Abra la Calculadora de Windows> Ver> Programador
2. Elija la opción Hex
3. Ingrese el valor Hex
4. Cambie a Dec y anote el valor dado
5. Repita para los pasos 2 a 4 para el segundo valor hexadecimal
6. Calcule el promedio agregando los dos números de Dec y dividiendo por 2
7. Ingrese este valor en la calculadora con la opción Dic seleccionada y luego cambie a la opción hexadecimal y listo

Ejemplo:

• 15293E (HEX) = 1386814 (DEC)
• 012549 (HEX) = 75081 (DEC)
• Punto medio = (1386814 + 75081) / 2
• Punto medio = 730947 (DEC)
• 730947 (DEC) = 0B2743 (HEX)
• # 0B2743

o use ColorBlender como se mencionó anteriormente;)

Answer 6

Si necesita hacer esto genéricamente, y espera que el color del medio sea visualmente preciso en más casos (es decir, el color visual y el tono del punto medio deben "verse bien" para un espectador humano), entonces como se sugirió anteriormente, es posible que desee convertir de RGB a HSV o HSL antes de calcular el punto medio, y luego convertir de nuevo después. Esto puede diferir significativamente de promediar los valores RGB directamente.

Aquí hay un código de JavaScript para la conversión a / de HSL que encontré en una búsqueda breve, y que en una breve comprobación parece hacer lo correcto:

https://github.com/mjackson/mjijackson.github.com/blob/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.txt

Simplemente aplique la función rgbToHsl a sus dos vectores de color r, g, b, promedie los dos vectores resultantes y aplique hslToRgb a eso. . .

Answer 7

Uso este sitio web para hacer esta tarea: ColorBlender .

El color medio será #0B2744 .

Answer 8

acabo de escribir una función que calcula los colores entre dos colores, así que aquí está en caso de que alguien lo necesite, creo que es bastante corto y legible, acepta dos colores en cadenas hexagonales, y el número de colores para calcular en el medio, devuelve los colores en una matriz de cadenas hexagonales

tomé las funciones rgbToHex y hexToRgb desde here

¡Espero que esto ayude!

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

function hexToRgb(hex) {
  var result = /^#?([a-f/d]{2})([a-f/d]{2})([a-f/d]{2})$/i.exec(hex);
  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      }
    : null;
}

// returns an array of startColor, colors between according to steps, and endColor
function getRamp(startColor, endColor, steps) {
  var ramp = [];

  ramp.push(startColor);

  var startColorRgb = hexToRgb(startColor);
  var endColorRgb = hexToRgb(endColor);

  var rInc = Math.round((endColorRgb.r - startColorRgb.r) / (steps+1));
  var gInc = Math.round((endColorRgb.g - startColorRgb.g) / (steps+1));
  var bInc = Math.round((endColorRgb.b - startColorRgb.b) / (steps+1));

  for (var i = 0; i < steps; i++) {
    startColorRgb.r += rInc;
    startColorRgb.g += gInc;
    startColorRgb.b += bInc;

    ramp.push(rgbToHex(startColorRgb.r, startColorRgb.g, startColorRgb.b));
  }
  ramp.push(endColor);

  return ramp;
}