Учитывая значение RGB, как мне создать оттенок (или оттенок)?

Например 168, 0, 255, учитывая значение RGB, как мне создать оттенки (сделать его светлее) и оттенки (сделать его темнее) цвета?

Среди нескольких вариантов растушевки и тонировки:

• Для оттенков умножьте каждый компонент на 1/4, 1/2, 3/4 и т. Д. От его предыдущего значения. Чем меньше коэффициент, тем темнее оттенок.

• Для оттенков вычислите (255 - предыдущее значение), умножьте это на 1/4, 1/2, 3/4 и т. Д. (Чем больше коэффициент, тем светлее оттенок), и прибавьте это к предыдущему значению (предполагая, что каждый .component - это 8-битное целое число).

Обратите внимание, что манипуляции с цветом (например, оттенки и другие оттенки) должны выполняться в линейном RGB . Однако цвета RGB, указанные в документах или закодированные в изображениях и видео, вряд ли будут в линейном RGB, и в этом случае к каждому из компонентов цвета RGB необходимо применить так называемую функцию обратной передачи . Эта функция зависит от цветового пространства RGB. Например, в цветовом пространстве sRGB (что можно предположить, если цветовое пространство RGB неизвестно) эта функция примерно эквивалентна увеличению каждого цветового компонента sRGB (в диапазоне от 0 до 1) до степени 2,2. (Обратите внимание, что «линейный RGB» не является цветовым пространством RGB.)

См. Также комментарий Violet Giraffe о «гамма-коррекции».

Некоторые определения

• Оттенок получают путем «потемнение» оттенок или «добавление черного»
• Оттенок получают путем «ligthening» оттенок или «добавление белого»

Создание оттенка или тени

В зависимости от вашей цветовой модели существуют разные методы создания более темного (затемненного) или более светлого (тонированного) цвета:

• RGB:

  • Для растушевки:

    newR = currentR * (1 - shade_factor)
    newG = currentG * (1 - shade_factor)
    newB = currentB * (1 - shade_factor)
    

  • Подкрашивать:

    newR = currentR + (255 - currentR) * tint_factor
    newG = currentG + (255 - currentG) * tint_factor
    newB = currentB + (255 - currentB) * tint_factor
    

  • В более общем смысле, цвет, в результате которого получается наслоение RGB(currentR,currentG,currentB)цвета, RGBA(aR,aG,aB,alpha)выглядит следующим образом:

    newR = currentR + (aR - currentR) * alpha
    newG = currentG + (aG - currentG) * alpha
    newB = currentB + (aB - currentB) * alpha
    

  где (aR,aG,aB) = black = (0,0,0)для растушевки, а (aR,aG,aB) = white = (255,255,255)для тонировки

• HSVили HSB:

  • Для затенения: уменьшите Value/ Brightnessили увеличьтеSaturation
  • Для тонирования: уменьшите Saturationили увеличьте Value/Brightness
• HSL:
  • Для затенения: опустите Lightness
  • Для тонирования: увеличить Lightness

Существуют формулы для преобразования одной цветовой модели в другую. Согласно вашему первоначальному вопросу, если вы находитесь RGBи хотите использовать HSVмодель, например, для затенения, вы можете просто преобразовать HSV, выполнить затенение и преобразовать обратно в RGB. Формулы для преобразования нетривиальны, но их можно найти в Интернете. В зависимости от вашего языка он также может быть доступен как основная функция:

• Цвет RGB в HSV в JavaScript?
• Преобразовать значение RGB в HSV

Сравнение моделей

• RGB имеет то преимущество, что его очень просто реализовать, но:
  • вы можете только затемнить или подкрасить свой цвет относительно
  • Вы не знаете, уже окрашен ли ваш цвет или растушеван
• HSVили HSBэто сложно, потому что вам нужно поиграть с двумя параметрами, чтобы получить то, что вы хотите ( Saturation& Value/ Brightness)
• HSL лучший с моей точки зрения:
  • поддерживается CSS3 (для веб-приложений)
  • просто и точно:
    • 50% означает неизменный оттенок
    • >50% означает, что оттенок светлее (оттенок)
    • <50% означает, что оттенок темнее (оттенок)
  • по цвету вы можете определить, уже ли он окрашен или растушеван
  • вы можете подкрасить или оттенить цвет относительно или полностью (просто заменив Lightnessдеталь)

• Если вы хотите узнать больше по этой теме: Wiki: Colours Model
• Дополнительные сведения об этих моделях: Википедия: HSL и HSV.

В настоящее время я экспериментирую с холстом и пикселями ... Я считаю, что эта логика работает для меня лучше.

1. Используйте это, чтобы рассчитать оттенок серого (яркость?)
2. но с существующим значением и новым значением оттенка
3. посчитайте разницу (я обнаружил, что мне не нужно умножать)

4. добавить, чтобы компенсировать значение оттенка

   var grey =  (r + g + b) / 3;    
   var grey2 = (new_r + new_g + new_b) / 3;
   
   var dr =  grey - grey2 * 1;    
   var dg =  grey - grey2 * 1    
   var db =  grey - grey2 * 1;  
   
   tint_r = new_r + dr;    
   tint_g = new_g + dg;   
   tint_b = new_b _ db;
   

или что-то вроде того...