Với một giá trị RGB, làm cách nào để tạo một tông màu (hoặc bóng râm)?

Với một giá trị RGB, chẳng hạn như 168, 0, 255, làm cách nào để tạo sắc thái (làm cho nó sáng hơn) và sắc thái (làm cho nó tối hơn) của màu?

Trong số một số tùy chọn để đổ bóng và pha màu:

• Đối với các sắc thái, hãy nhân từng thành phần với 1/4, 1/2, 3/4, v.v., giá trị trước đó của nó. Yếu tố càng nhỏ, bóng râm càng tối.

• Đối với sắc thái màu, hãy tính (255 - giá trị trước đó), nhân nó với 1/4, 1/2, 3/4, v.v. (hệ số càng lớn thì sắc thái càng nhạt) và cộng giá trị đó vào giá trị trước đó (giả sử từng .component là một số nguyên 8 bit).

Lưu ý rằng các thao tác màu sắc (chẳng hạn như sắc thái màu và đổ bóng khác) nên được thực hiện trong RGB tuyến tính . Tuy nhiên, các màu RGB được chỉ định trong tài liệu hoặc được mã hóa trong hình ảnh và video không có khả năng ở trong RGB tuyến tính, trong trường hợp đó, cái gọi là chức năng truyền ngược cần được áp dụng cho từng thành phần của màu RGB. Chức năng này thay đổi theo không gian màu RGB. Ví dụ: trong không gian màu sRGB (có thể được giả định nếu không gian màu RGB là không xác định), chức năng này gần tương đương với việc nâng từng thành phần màu sRGB (từ 0 đến 1) lên công suất 2,2. (Lưu ý rằng "RGB tuyến tính" không phải là không gian màu RGB.)

Xem thêm nhận xét của Violet Giraffe về "hiệu chỉnh gamma".

Một số định nghĩa

• Một bóng được sản xuất bởi "tối" một màu hoặc "thêm đen"
• Một màu được sản xuất bởi "ligthening" một màu hoặc "thêm trắng"

Tạo màu hoặc bóng râm

Tùy thuộc vào Kiểu màu của bạn, có các phương pháp khác nhau để tạo màu đậm hơn (bóng mờ) hoặc nhạt hơn (nhuộm màu):

• RGB:

  • Để che bóng:

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

  • Tô màu:

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

  • Nói chung hơn, màu dẫn đến phân lớp màu RGB(currentR,currentG,currentB)với một màu RGBA(aR,aG,aB,alpha)là:

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

  nơi (aR,aG,aB) = black = (0,0,0)để đổ bóng và (aR,aG,aB) = white = (255,255,255)pha màu

• HSVhoặc HSB:

  • Để che bóng: giảm Value/ Brightnesshoặc tăngSaturation
  • Tô màu: giảm Saturationhoặc tăng Value/Brightness
• HSL:
  • Để che bóng: hạ thấp Lightness
  • Tô màu: tăng Lightness

Tồn tại các công thức để chuyển đổi từ mô hình màu này sang mô hình màu khác. Theo câu hỏi ban đầu của bạn, nếu bạn đang ở RGBvà muốn sử dụng HSVmô hình để làm bóng chẳng hạn, bạn chỉ có thể chuyển đổi sang HSV, làm bóng và chuyển đổi trở lại RGB. Công thức để chuyển đổi không phải là tầm thường nhưng có thể được tìm thấy trên internet. Tùy thuộc vào ngôn ngữ của bạn, nó cũng có thể có sẵn như một chức năng cốt lõi:

• Màu RGB sang màu HSV trong javascript?
• Chuyển đổi giá trị RGB sang HSV

So sánh các mô hình

• RGB có lợi thế là thực sự đơn giản để thực hiện, nhưng:
  • bạn chỉ có thể tô bóng hoặc pha màu tương đối
  • bạn không biết liệu màu của bạn đã được tô màu hay bóng mờ
• HSVhoặc HSBlà loại phức tạp vì bạn cần chơi với hai tham số để đạt được những gì bạn muốn ( Saturation& Value/ Brightness)
• HSL là tốt nhất theo quan điểm của tôi:
  • được hỗ trợ bởi CSS3 (dành cho ứng dụng web)
  • đơn giản và chính xác:
    • 50% có nghĩa là một Huế không thay đổi
    • >50% có nghĩa là Hue nhạt hơn (tint)
    • <50% có nghĩa là Huế tối hơn (bóng râm)
  • đưa ra một màu bạn có thể xác định xem nó đã được tô màu hay bóng mờ chưa
  • bạn có thể tô màu hoặc tô bóng một màu tương đối hoặc hoàn toàn (chỉ bằng cách thay thế Lightnessmột phần)

• Nếu bạn muốn tìm hiểu thêm về chủ đề này: Wiki: Colors Model
• Để biết thêm thông tin về những mô hình đó là gì: Wikipedia: HSL và HSV

Tôi hiện đang thử nghiệm với canvas và pixel ... Tôi thấy logic này phù hợp với tôi hơn.

1. Sử dụng điều này để tính toán màu xám (luma?)
2. nhưng với cả giá trị hiện có và giá trị 'tint' mới
3. tính toán sự khác biệt (tôi thấy tôi không cần phải nhân)

4. thêm để bù đắp giá trị '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;
   

hoặc điều tương tự...