Як задано значення RGB, як створити відтінок (або відтінок)?


124

Враховуючи значення RGB, як, наприклад 168, 0, 255, як я можу створювати відтінки (зробити світлішими) та відтінки (зробити темнішими) колір?

Відповіді:


153

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

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

Дивіться також коментар Віолет Жирафа про "корекцію гамми".


20
Я спробував це, і це спрацювало чудово. Я вважав, що було б корисно написати приклади формул. Оригінал (r, g, b); Тінь (RS, GS, шс): rs = r * 0.25, gs = g * 0.25, bs = b * 0.25(тобто досить темний відтінок); Відтінок (к.т., Г.Т., Ь): rt = r + (0.25 * (255 - r)), gt = g + (0.25 * (255 - g)), bt = b + (0.25 * (255 - b))(тобто досить ясно - відтінок). Я зробив це як частина крутого масиву, який створив безліч відтінків, і він чудово працював. Сподіваюся, що це допомагає. Дякую Петру.
Томас

1
Ви помилилися. Це віверса.
Франческо Мензані

Ви впевнені, що ці маніпуляції не повинні враховувати корекцію гамми?
Фіолетовий жирафа

1
@VioletGiraffe: Ви добре вказуєте на корекцію гамми. Дивіться мою редакцію. (Це замінює мій видалений коментар 22 години тому.)
Петро О.

97

Деякі визначення

  • Відтінок отримують шляхом «потемніння» відтінок або «додавання чорного»
  • Відтінок отримують шляхом «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або HSBє складним, тому що вам потрібно грати з двома параметрами, щоб отримати те, що ви хочете ( Saturation& Value/ Brightness)
  • HSL з моєї точки зору найкраще:
    • підтримується CSS3 (для webapp)
    • простий і точний:
      • 50% означає незмінний відтінок
      • >50% означає, що відтінок світліший (відтінок)
      • <50% означає, що відтінок темніший (відтінок)
    • Надаючи колір, Ви можете визначити, чи він вже підфарбований або заштрихований
    • Ви можете відновити або відтінити колір відносно або абсолютно (просто замінивши Lightnessдеталь)


1
Я вірю, що тут "Відтінок утворюється" затемненням "відтінку , під відтінком, ви маєте на увазі колір. Тому що якщо ви говорите про відтінок, як у HSL / HSV, його зміна призведе до іншого кольору, а не відтінку / відтінку. Відтінок (0-360 °), сам по собі, не може бути темнішим / світлішим. Щоб надати кольоровий відтінок / відтінок, потрібно було б змінити значення SL / SV. Це визначення може когось ввести в оману, якщо зміна відтінку призведе до отримання більш темного / світлого кольору.
akinuri

Версія для відтінків працює лише для діапазонів кольорів, починаючи з 0. Додайте половину вашої кольорової гами до значення кольорового каналу, потім виконайте математику, а потім відніміть цей діапазон ще раз. Якщо ваш колір підписаний, і ви можете зробити розрахунок, не руйнуючи щось через переповнення, це працює за призначенням.
t0b4cc0

3

Я зараз експериментую з полотном і пікселями ... Я вважаю, що ця логіка для мене працює краще.

  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;
    

чи щось подібне ...

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.