Как я могу получить цвет на полпути между двумя цветами?

Ответ 1

Как сказал г-н Листер, легко автоматизировать вычисление с помощью любого языка программирования:

• Отделите два цвета на их 3 цветовых номера для Красный, Зеленый, Синий: (r1, g1, b1) и (r2, g2, б2).
  
  • Например, # 15293E, # 012549 ( "15", "29", "3E" ), ( "01", "25", "49" )
    
    
• Преобразуйте каждую строку цвета в целое число, указав явно, что вы разбираете шестнадцатеричное представление числа.
  • Например ( "15", "29", "3E" ) становится (21, 41, 62)
    
    
• Вычислите среднее значение (r ', g', b ') = ((r1 + r2)/2, (g1 + g2)/2, (b1 + b2)/2).
  • Например ((21 + 1)/2, (41 + 37)/2, (62 + 73)/2) = (11, 39, 67)
    
    
• Преобразуйте их снова в строки, указав явно, что вы генерируете шестнадцатеричные представления двухзначные шестнадцатеричные (при необходимости используйте ноль с нулем).
  • Например (11, 39, 67) → ( "0B", "27", "43" )
    
    
• Конкатенация резкого символа, за которым следуют 3 строки
  • Например ( "0B", "27", "43" ) → "# 0B2743"
    

Изменить: Реализация не является "очень простой", как я изначально заявил. Я потратил время, чтобы написать код на нескольких языках в Программировании-Идиомах.

Ответ 2

Я использую этот сайт для выполнения этой задачи для меня: ColorBlender.

Средний цвет будет #0B2744.

Ответ 3

С МЕНЬШЕ

Если вы используете последний препроцессор LESS CSS, то вы заметите, что есть функция (mix()), которая делает это:

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

Выходы: #0b2744.

Ответ 4

Если вам нужно сделать это в общем случае и ожидайте, что средний цвет будет визуально точным в большем количестве случаев (т.е. визуальный цвет и тон средней точки должны "выглядеть правильно" для зрителя), то, как было предложено выше, может конвертировать из RGB в HSV или HSL перед вычислением средней точки, а затем конвертировать обратно. Это может значительно отличаться от значений среднего значения RGB.

Вот код JavaScript для преобразования в/из HSL, который я нашел в кратком поиске, и что при краткой проверке появляется правильная вещь:

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

Просто примените функцию rgbToHsl к вашим двум векторам цветов r, g, b, усредните два результирующих вектора и примените к ним hslToRgb.,.

Ответ 5

Функция 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

Ответ 6

Вот так:

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;
};

где p - значение от 0 до 1, определяющее, насколько далеко может пройти градиент, а цвет rgb_beginning - от цвета, а rgb_end - цвет. Оба массива являются [r, g, b], поэтому вам сначала нужно будет преобразовать из шестнадцатеричного. Это упрощенная версия функции LESS mix, которая, как мне кажется, относится к SASS. Для плаката p будет 0,5

Ответ 7

Если вы так хотели, вы могли бы сделать это самостоятельно с помощью калькулятора Windows.

• Откройте калькулятор Windows > Вид > Программист
• Выберите опцию Hex
• Введите значение Hex
• Переключитесь на Dec и запишите указанное значение
• Повторите шаги 2-4 для второго шестнадцатеричного значения
• Рассчитайте среднее значение, добавив два числа Dec и разделив на 2
• Введите это значение в калькулятор с опцией Dec затем переключитесь на шестнадцатеричный вариант и voila

Пример:

• 15293E (HEX) = 1386814 (DEC)
• 012549 (HEX) = 75081 (DEC)
• Средняя точка = (1386814 + 75081)/2
• Средняя точка = 730947 (DEC)
• 730947 (DEC) = 0B2743 (HEX)
• # 0B2743

или используйте ColorBlender, как указано выше;)