Как уменьшить значение типа #cef1ff?

Question

[Uncle_Bens]

Есть массив значений, значения вида #000000.
Каждое значение нужно на лету изменить на константу например #110011.
Нужно получить переменную которая будет равна разности из массива и константы.

Весь затык в самой арифметике, как например от готового #cef1ff отнять #110011, чтобы получилось #bdf1ee?

Comments

[Дмитрий]

Операции с шеснадцатеричными числами. Гугл все знает же

[Uncle_Bens]

Дмитрий, это всё на что вы способны или всё же знаете какого вида надо написать код?

[Interface]

Uncle_Bens, вам предложили воспользоваться гуглом не потому что Дмитрий на что-то не способен. Можете представить себе, чтобы ученик на вопрос учителя ответил "Вы что не способны сами решить эти задачи?!" ? :)

Код надо написать довольно тривиального вида.

Если вы хотите, чтобы это сделали за вас - лучше пишите прямо, но это запрещено правилами.

Если вы хотите чтобы вам помогли с конкретным аспектом - пишите с каким.

[Сергей Соколов]

что вы расчитываете получить вычитанием из #000000 #110011 – отрицательный цвет или как?

[Uncle_Bens]

Сергей Соколов, не, нули просто для примера были.

[Uncle_Bens]

Interface, вы же помните как учились в школе линейным уравнениям, учитель объяснял, а не говорил "в гугле посмотрите". Вот hloe0xff огромное спасибо! Мне было достаточно алгоритма, чтобы нагуглить "отсечение первого знака".

[Дмитрий]

Uncle_Bens, это не всё, на что я способен. Моя фраза не была ответом, поэтому и написал в виде комментария. Но тут же настолько все просто...

Answer 1

[Сослан Хлоев]

Отсекаем решетку, переводим результат из hex в целое, вычитаем, результат переводим в hex, впереди вставляем #

let result = parseInt('#cef1ff'.substr(1), 16) - parseInt('#110011'.substr(1), 16);
console.log('#' + result.toString(16).padStart(6, '0'));

Comments

[Uncle_Bens]

У меня был затык именно с присвоением переменной через parseInt. Огромное спасибо за разъяснение!

[Сослан Хлоев]

Uncle_Bens, пожалуйста)

[Interface]

Сергей Соколов в своем решение предусмотрел ведущие нули. Без них можно нарваться на невалидный цвет из-за уменьшения числа разраядов при вычитании:

result = parseInt('#100001'.substr(1), 16) - parseInt('#00000f'.substr(1), 16); // #100001 и #00000f - валидные цвета
console.log('#' + result.toString(16)); // вернет #ffff2 - невалидный цвет

[Сослан Хлоев]

Interface,

let result = parseInt('#cef1ff'.substr(1), 16) - parseInt('#110011'.substr(1), 16);
console.log('#' + result.toString(16).padStart(6, '0'));

Answer 2

[Interface]

Как вариант решения с обработкой переполнения разрядов и трехсимвольных цветов

function hexToTriple(hex) {
    hex = hex.slice(1);
    if (hex.length === 3) {
        return hex.split('').map(byte => parseInt(byte.repeat(2), 16));
    } else if (hex.length === 6) {
        return hex.match(/.{2}/g).map(byte => parseInt(byte, 16));
    } else {
        throw new Error(`invalid color ${hex}`);
    }
}

function tripleToHex(triple) {
    return '#' + triple.map(byte => byte.toString(16).padStart(2, '0')).join('');
}

function hexColorSubtract(hexAColor, hexBColor) {
    const [tripleA, tripleB] = [hexAColor, hexBColor].map(hexToTriple);
    const resultTriple = tripleA.map((byte, index) => {
        return Math.max(byte - tripleB[index], 0);
    });
    return tripleToHex(resultTriple);
}

// использование:

hexColorSubtract("#cef", "#110011"); // #bbeeee

Answer 3

[Сергей Соколов]

function hexColorSubtract(ca, cb) {
    const a = parseInt(ca.substring(1), 16);
    const b = parseInt(cb.substring(1), 16);
    return '#' + ('000000' + Math.max(0, a-b).toString(16)).slice(-6).toUpperCase();
  }
  
  hexColorSubtract("#cef1ff", "#110011"); // #BDF1EE

Comments

[Interface]

Uncle_Bens не уточнял всех тонкостей желаемой математики цветов. Но если вычитать таким образом можно нарваться на (я пологаю) неожиданные результаты при межбайтовом переходе:

hexColorSubtract('#100000', '#000001');

из темного 100000 мы вычитаем очень "малый" цвет и я лично ожидаю, что темный станет чуть темнее, но он становится ярко-голубым.