Diberikan nilai RGB, bagaimana cara membuat tint (atau shade)?

124

Diberikan nilai RGB, seperti 168, 0, 255, bagaimana cara membuat tint (membuatnya lebih terang) dan shades (membuatnya lebih gelap) pada warnanya?

colors rgb DenaliHardtail
sumber

Jawaban:

153

Di antara beberapa opsi untuk shading dan tinting:

  • Untuk bayangan, kalikan setiap komponen dengan 1/4, 1/2, 3/4, dll., Dari nilai sebelumnya. Semakin kecil faktornya, semakin gelap bayangannya.

  • Untuk tint, hitung (255 - nilai sebelumnya), kalikan dengan 1/4, 1/2, 3/4, dll. (Semakin besar faktornya, semakin terang warnanya), dan tambahkan ke nilai sebelumnya (dengan asumsi masing-masing .component adalah bilangan bulat 8-bit).

Perhatikan bahwa manipulasi warna (seperti tints dan shading lainnya) harus dilakukan dalam RGB linier . Namun, warna RGB yang ditentukan dalam dokumen atau dikodekan dalam gambar dan video tidak cenderung dalam RGB linier, dalam hal ini yang disebut fungsi transfer terbalik perlu diterapkan ke setiap komponen warna RGB. Fungsi ini bervariasi dengan ruang warna RGB. Misalnya, dalam ruang warna sRGB (yang dapat diasumsikan jika ruang warna RGB tidak diketahui), fungsi ini secara kasar setara dengan menaikkan setiap komponen warna sRGB (mulai dari 0 hingga 1) menjadi pangkat 2,2. (Perhatikan bahwa "RGB linier" bukanlah ruang warna RGB.)

Lihat juga komentar Violet Giraffe tentang "koreksi gamma".

Peter O.
sumber
20
Saya mencoba ini dan berhasil dengan baik. Saya pikir akan sangat membantu untuk menulis contoh rumus. Asli (r, g, b); Naungan (rs, gs, bs): rs = r * 0.25, gs = g * 0.25, bs = b * 0.25(yaitu warna gelap yang cukup); Tint (rt, gt, bt): rt = r + (0.25 * (255 - r)), gt = g + (0.25 * (255 - g)), bt = b + (0.25 * (255 - b))(yaitu warna cukup ringan). Saya melakukannya sebagai bagian dari rangkaian keren yang menciptakan banyak corak dan berhasil dengan baik. Semoga membantu. Terima kasih Peter.
Thomas
1
Anda telah membuat kesalahan. Itu adalah kebalikan.
Francesco Menzani
Apakah Anda yakin manipulasi ini tidak harus memperhitungkan koreksi gamma?
Violet Giraffe
1
@VioletGiraffe: Anda membuat poin yang bagus dengan koreksi gamma. Lihat suntingan saya. (Ini menggantikan komentar saya yang dihapus dari 22 jam yang lalu.)
Peter O.
97

Beberapa definisi

  • Sebuah warna dihasilkan oleh "gelap" rona atau "menambahkan hitam"
  • Sebuah warna dihasilkan oleh "ligthening" rona atau "menambahkan putih"

Menciptakan rona atau bayangan

Bergantung pada Model Warna Anda, ada beberapa metode berbeda untuk membuat warna lebih gelap (berbayang) atau lebih terang (tinted):

  • RGB:

    • Untuk naungan: 

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

    • Untuk mewarnai:

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

    • Secara lebih umum, warna yang dihasilkan dari pelapisan suatu warna RGB(currentR,currentG,currentB)dengan suatu warna RGBA(aR,aG,aB,alpha)adalah:

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

    tempat (aR,aG,aB) = black = (0,0,0)untuk naungan, dan (aR,aG,aB) = white = (255,255,255)untuk pewarnaan

  • HSVatau HSB:

    • Untuk membuat bayangan: turunkan Value/ Brightnessatau tambahSaturation
    • Untuk tint: turunkan Saturationatau tambah Value/Brightness
  • HSL:
    • Untuk membuat bayangan: turunkan Lightness
    • Untuk pewarnaan: tingkatkan Lightness

Ada rumus untuk mengkonversi dari satu model warna ke yang lain. Sesuai pertanyaan awal Anda, jika Anda berada RGBdan ingin menggunakan HSVmodel untuk membuat bayangan misalnya, Anda dapat mengonversi ke HSV, melakukan bayangan, dan kembali ke RGB. Formula untuk mengonversi memang tidak sepele tapi bisa didapatkan di internet. Bergantung pada bahasa Anda, ini mungkin juga tersedia sebagai fungsi inti:

Membandingkan model

  • RGB memiliki keuntungan karena sangat mudah diterapkan, tetapi:
    • Anda hanya dapat menaungi atau mewarnai warna Anda secara relatif
    • Anda tidak tahu apakah warna Anda sudah diwarnai atau diarsir
  • HSVatau HSBagak rumit karena Anda perlu bermain-main dengan dua parameter untuk mendapatkan apa yang Anda inginkan ( Saturation& Value/ Brightness)
  • HSL adalah yang terbaik dari sudut pandang saya:
    • didukung oleh CSS3 (untuk webapp)
    • sederhana dan akurat:
      • 50% berarti Hue yang tidak berubah
      • >50% berarti Hue lebih terang (tint)
      • <50% berarti Hue lebih gelap (teduh)
    • jika diberi warna, Anda dapat menentukan apakah warnanya sudah diwarnai atau diarsir
    • Anda dapat mewarnai atau menaungi warna secara relatif atau mutlak (hanya dengan mengganti Lightnessbagiannya)
JBE
sumber
1
Saya percaya di sini "Sebuah bayangan dihasilkan dengan" menggelapkan "warna" , dengan warna, yang Anda maksud adalah warna. Karena jika berbicara hue seperti pada HSL / HSV, mengubahnya akan menghasilkan warna yang berbeda, bukan shade / tint. Hue (0-360 °), dengan sendirinya, tidak bisa menjadi lebih gelap / lebih terang. Untuk memberi bayangan warna / tint, seseorang harus mengubah nilai SL / SV. Definisi ini mungkin menyesatkan seseorang untuk berpikir bahwa mengubah corak akan menghasilkan warna yang lebih gelap / terang.
akinuri
Versi bayangan hanya berfungsi untuk rentang warna mulai dari 0. Tambahkan Separuh rentang warna Anda ke nilai saluran warna, lalu lakukan penghitungan kemudian kurangi rentang itu lagi. Jika warna Anda ditandatangani dan Anda dapat melakukan kalkulasi tanpa merusak sesuatu karena luapan ini berfungsi sebagaimana mestinya.
t0b4cc0
3

Saat ini saya bereksperimen dengan kanvas dan piksel ... Saya menemukan logika ini bekerja lebih baik untuk saya.

  1. Gunakan ini untuk menghitung abu-abu (luma?)
  2. tetapi dengan nilai yang ada dan nilai 'warna' yang baru
  3. hitung selisihnya (ternyata saya tidak perlu mengalikan)

  4. tambahkan untuk mengimbangi nilai '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;

atau semacam itu...

Blair
sumber