Как сделать данный цвет темнее или светлее?

У меня есть эта картина:

Стрелки показывают два разных цвета, но на самом деле они должны быть одного цвета, но немного светлее или темнее.

Я сделал этот снимок экрана с приложением, которое я делаю, и коричневатый цвет по краям - просто синий цвет, суммированный с 30. Как вы можете видеть, это не помогает, то есть добавление 30 к фактическому цвету не будет работать для всех цвета.

Как я могу просто затенить данный цвет, то есть сделать его ярче или темнее?

И что мне делать, если я хочу, чтобы он выглядел полупрозрачным с альфа-каналом?

Классный вопрос.

Для работы с шестнадцатеричными значениями вы должны думать об относительной пропорции значений RGB.

Я буду использовать шкалу цифрами, а не буквами, чтобы мы могли видеть математику за ней.

Представь, что у тебя есть апельсин.

Вы можете иметь значение R255 G128 B0

Если вы хотите более темный цвет, вам нужно уменьшить значения, например, на 50%

Это даст вам R128 G64 B0 Обратите внимание, что все цвета были изменены с использованием пропорциональной шкалы.

Более сложный цвет может быть R255 G200 B100 Давайте потемнеем, но не так сильно, как в предыдущем случае. Давайте просто потемнеем на 80%.

R255x0,8 G200x0,8 B100x0,8 = R204 G160 B80

Чтобы сделать один цвет светлее, идея почти такая же, но она более хитрая, потому что цвета ограничены 255, так что вы можете подумать о разнице между 255 и вашими значениями.

Например тот же оранжевый

R255 G128 B0

Вы не можете больше увеличивать R, и вы не можете увеличить зеленый и синий с одинаковыми значениями, например, на 100 больше, потому что у вас будет

R255 G228 B100

который слишком желтый.

Математика будет

1) Разница от 255 до текущего значения (R255 G128 B0): R0 G127 B255

2) Давайте сделаем оранжевый светлее на 50%

3) Rx50% Gx50% Bx50% = R0 G64 B128

4) Добавьте это к вашему начальному значению: R255 + 0 G128 + 64 B0 + 128 = R255 G192 B128.

Я добавляю изображение, чтобы дать вам основную идею. Значения RGB не совпадают с моим текстом, просто потому что ленивая работа, но вы можете видеть, что оранжевые «лестницы» сохраняют свои внутренние пропорции.

Edited

Я такой тупой Вы также можете использовать обозначение HSL Color:

{background-color: hsl (45, 60%, 70%);} и измените третий цвет для более темных цветов, а второй и третий для более светлых.

Вы также можете использовать вариант hsla, чтобы включить альфа.

Вы немного неправильно поняли, javaScript не моделирует цвет как шестнадцатеричный, как и система. Шестнадцатеричное обозначение только для удобочитаемого документа. Внутренне ваша система хранит три целочисленных значения. Вы можете запрашивать и манипулировать ими напрямую.

Но давайте просто скажем, что вы хотите манипулировать настоящим документом, а не внутренними компонентами системы. Тогда лучше всего перенести ваши вычисления в какую-нибудь библиотеку, которая сделает это за вас. Вы видите, что браузер может представлять цвета разными способами, поэтому вам необходимо запрограммировать все виды случаев, таких как вводы ad rgb и hsv. Поэтому я предлагаю вам использовать что-то вроде Color.js, это избавит вас от головной боли, так как вам не нужно реализовывать смешивание, затемнение, освещение и т.д. ... самостоятельно.

Эдиты:

В случае, если вы хотите сделать это самостоятельно, что я не рекомендую. Начните с преобразования шестнадцатеричного представления в числовые триплеты целых чисел или чисел с плавающей запятой в диапазоне 0-1, что облегчает вычисления.

Теперь для легкой манипуляции преобразованием значений цвета RGB в HSL или HSB это делает вычисления яркости тривиальными (формулировки в Википедии). Тогда просто добавьте или вычтите легкость или яркость. Для реального моделирования света вычисление достаточно просто, просто умножьте цвет света на основной цвет. Таким образом, для нейтрального света это просто:

Результат = Интенсивность * Цвет

Как объяснил Рафаэль, формула повторяется по цветному каналу. Вы можете моделировать цветной свет, выполнив

Результат = Интенсивность * LigtColor * Цвет

Для этого лучше сначала конвертировать в float, может быть и линейный. Это позволяет получить теплый или прохладный свет в вашем районе, что может придать более естественный вид.

Альфа-смешение (слой цвета поверх других) просто

Результат = ColorTop * альфа + ColorBottom * (1 альфа)

Окончательное редактирование

Наконец, вот код, который делает что-то для того, что вы просите. Причина, по которой это трудно понять, заключается в том, что это своего рода абстракция по форме прямо сейчас. Живой код доступен здесь

Изображение 1 : Результат кода ниже, см. Также живую версию .

{
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    var Color = function(r, g, b) {
      this.r = r;
      this.g = g;
      this.b = b;
    }
    Color.prototype.asHex = function() {
      return "#" + ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1);
    }
    Color.prototype.asRGB = function() {
      return 'rgb(' + this.r + ',' + this.g + ',' + this.b + ')';
    }
    Color.prototype.blendWith = function(col, a) {
      r = Math.round(col.r * (1 - a) + this.r * a);
      g = Math.round(col.g * (1 - a) + this.g * a);
      b = Math.round(col.b * (1 - a) + this.b * a);
      return new Color(r, g, b);
    }
    Color.prototype.Mul = function(col, a) {
      r = Math.round(col.r/255 * this.r * a);
      g = Math.round(col.g/255 * this.g * a);
      b = Math.round(col.b/255 * this.b * a);
      return new Color(r, g, b);
    }
    Color.prototype.fromHex = function(hex) {
      // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
      hex = hex.substring(1,7)
      var bigint = parseInt(hex, 16);
      this.r = (bigint >> 16) & 255;
      this.g = (bigint >> 8) & 255;
      this.b = bigint & 255;
    }

    ctx.font = "16px Arial";
    ctx.fillText("Manual Alpha Blend", 18, 20);

    var a = new Color(220, 0, 150);

    var b = new Color();
    b.fromHex('#00C864');

    //Alpha blend
    ctx.fillStyle = a.asHex();
    ctx.fillRect(25, 25, 100, 100);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(a.asHex(), 30, 45);
    ctx.fillStyle = b.asRGB()
    ctx.fillRect(50, 50, 100, 100);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(a.asHex(), 55, 145);
    var bl = a.blendWith(b, 0.3);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(50, 50, 75, 75);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(bl.asHex(), 55, 70);

    // lighten 1

    ctx.fillStyle = '#000000';
    ctx.fillText('Neutral Light', 200, 20);

    var c = new Color(100, 100, 100);
    var purelight= new Color(255, 255, 255);

    ctx.fillStyle = c.asRGB();
    ctx.fillRect(200, 25, 100, 100);

    var bl = c.Mul(purelight,1.2);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(225, 50, 100, 100);

    var bl = c.Mul(purelight, 0.8);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(250, 75, 100, 100);

     // lighten 2

    ctx.fillStyle = '#000000';
    ctx.fillText('Yellowish Light', 400, 20);

    var c = new Color(100, 100, 100);
    var yellowlight= new Color(255, 255, 220);

    var bl = c.Mul(yellowlight,1.0);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(400, 25, 100, 100);

    var bl = c.Mul(yellowlight,1.2);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(425, 50, 100, 100);

    var bl = c.Mul(yellowlight, 0.8);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(450, 75, 100, 100);
  }
}

PS Вы должны спросить о stackoverflow, так как большая часть этого на самом деле уже может быть найдена в stackoverfow.

Вручную, если вы хотите изменить темноту / яркость цвета вручную и даже не глядя на него. в hex или rgb действительно легко просто добавить или вычесть равное количество света для каждого канала.
Скажем, в rgb у вас есть 132 145 167, вы можете добавить 30 к каждому номеру, чтобы получить более легкую версию того же цвета, например, 162 175 207, и, если вы понимаете, что сделали это чуть-чуть, то вычтите 2 из каждого, то есть 160 173 205. То же самое с шестнадцатеричным, но в шестнадцатеричных числах. поэтому e4c3d5 - это e4 c3 d5, вы можете добавить 16, чтобы сделать его светлее, f4d3e5 или вычесть 16, чтобы сделать более темную версию того же цвета d4b3c5.
Вы можете добавлять или вычитать столько, сколько хотите, и вы будете лучше угадывать правильную сумму для добавления и вычитания сверхурочной работы, при условии, что вы добавляете одинаковую сумму ко всем трем каналам (всем трем числам), вы будете изменять только то, как много белого вы добавляете или удаляете из смеси.