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

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

ОТВЕТЫ

Ответ 1

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

  • Для оттенков умножьте каждый компонент на 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.)

См. Также комментарий Фиолетового жирафа о "гамма-коррекции".

Ответ 2

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

  • оттенок создается путем "затемнения" оттенка или "добавления черного".
  • A оттенок создается путем "выравнивания" оттенка или "добавления белого"

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

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

  • 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 или HSB является сложным, потому что вам нужно играть с двумя параметрами, чтобы получить то, что вы хотите (Saturation и Value/Brightness)
  • HSL является лучшим с моей точки зрения:
    • поддерживается CSS3 (для webapp)
    • простой и точный:
      • 50% означает неизмененный Hue
      • >50% означает, что оттенок светлее (оттенок)
      • <50% означает, что оттенок темнее (оттенок)
    • с учетом цвета, который вы можете определить, если он уже тонирован или затенен.
    • вы можете оттенять или оттенять цвет относительно или абсолютно (просто заменив часть Lightness)

Ответ 3

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

  • Используйте это, чтобы рассчитать серость (яркость?)
  • но как с существующим значением, так и с новым значением tint
  • вычислить разницу (я нашел, что мне не нужно было умножать)

  • добавить для смещения значения оттенка

    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;

или что-то в этом роде...