Я хочу создать метод, который будет принимать значение rgba() и преобразовывать его в значение #hex, однако я не хочу, чтобы альфа-канал включался в оператор return. Это все же должно повлиять на результат.
Как пример:
- Если бы я передал
rgba(17, 160, 173, 1), я бы хотел #11a0ad (#rrggbb), а не #11a0adff (#rrggbbaa).
- Если бы я передал
rgba(17, 160, 173, 0.55), я бы хотел #7ccbd2 (#rrggbb), а не #11a0ad8c (#rrggbbaa).
// Examples
rgbaToHex(17, 160, 173, 1); // returns '#11a0ad'
rgbaToHex(17, 160, 173, 0.55); // returns '#7ccbd2'
По сути, я хочу исключить непрозрачность из моего возвращенного значения #hex, но непрозрачность исходного значения rgba() влияет на то, является ли возвращенное значение #hex оригинальным цветом или непрозрачным тоном оригинала. цвет (полученный из указанного альфа-канала).
Вот наглядный пример, который я извлек из графического интерфейса Sketch:
Я подошел к решению этой проблемы, используя следующее уравнение:
// rgb(14, 14, 14) --> #0e0e0e
// rgba(14, 14, 14, 0.5)
const colSpace = 255;
const r = 14, g = 14, b = 14, a = 0.5;
const rDiff = colSpace - r, // 241
gDiff = colSpace - g, // 241
bDiff = colSpace - b; // 241
const opaqueR = Math.round(r + rDiff * a), // 135
opaqueG = Math.round(g + gDiff * a), // 135
opaqueB = Math.round(b + bDiff * a); // 135
const opaqueRGB = `rgb(${opaqueR}, ${opaqueG}, ${opaqueB})`
// rgb(135, 135, 135) --> #878787
GUI Sketch возвращает rgb(134, 134, 134) или #868686, когда вы передаете rgba(14, 14, 14, 0.5). Так что мое уравнение не так уж и далеко.
В приведенном выше уравнении берется разница между значениями цвета r, g и b и 255, затем умножается разница на альфа-канал.
Это уравнение хорошо работает, когда вы работаете в оттенках серого, а альфа-канал равен 50%. Но прерывается, когда вы передаете более сложное значение rgba() или другой альфа-канал.
Кто-нибудь решал эту проблему в Javascript раньше? Как я могу получить непрозрачный тон из значения rgba(), используя Javascript?