Объединить цвета в Java [дубликат]

С LESS

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

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

Выходы: #0b2744.

Я просто написал функцию, которая вычисляет цвета между двумя цветами, поэтому здесь она на случай, если кому-то это нужно, я думаю, что она довольно короткая и читаемая, она принимает два цвета в шестнадцатеричных строках и количество цветов для вычисления между ними, возвращает цвета в массиве шестнадцатеричных строк

Я взял функции rgbToHex и hexToRgb из здесь

Надеюсь, что это поможет!

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

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

1. Откройте калькулятор Windows> Вид> Программист
2. Выберите опцию Hex
3. Введите значение Hex
4. Переключитесь на Dec и запишите указанное значение
5. Повторите шаги 2-4 для второго шестнадцатеричного значения
6. Вычислите среднее значение по добавление двух делений и деление на 2
7. Введите это значение в калькулятор с выбранной опцией Dec, затем переключитесь на шестнадцатеричную опцию и volila

Пример:

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

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

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

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

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

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

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

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

Нравится это:

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, которая, как мне кажется, принадлежит SASS. Для плаката p будет 0,5

Если вам нужно сделать это в общем случае и ожидайте, что средний цвет будет визуально точным в большем числе случаев (т. е. визуальный цвет и тон средней точки должны «выглядеть правильно» для зрителя), то, как было предложено выше, вы может конвертировать из 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. , .