ด้วยค่า RGB ฉันจะสร้างโทนสี (หรือเฉดสี) ได้อย่างไร

ด้วยค่า RGB เช่น168, 0, 255ฉันจะสร้างสีอ่อน (ทำให้สีอ่อนลง) และเฉดสี (ทำให้เข้มขึ้น) ของสีได้อย่างไร

ในบรรดาตัวเลือกต่างๆสำหรับการแรเงาและการย้อมสี:

• สำหรับเฉดสีให้คูณแต่ละองค์ประกอบด้วย 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 สีในจาวาสคริปต์?
• แปลงค่า RGB เป็น HSV

เปรียบเทียบรุ่น

• RGB มีข้อดีคือใช้งานง่าย แต่:
  • คุณสามารถแรเงาหรือย้อมสีของคุณได้
  • คุณไม่รู้ว่าสีของคุณถูกย้อมหรือแรเงาแล้ว
• HSVหรือHSBซับซ้อนเพราะคุณต้องเล่นกับสองพารามิเตอร์เพื่อให้ได้สิ่งที่คุณต้องการ ( Saturation& Value/ Brightness)
• HSL ดีที่สุดจากมุมมองของฉัน:
  • รองรับโดย CSS3 (สำหรับ webapp)
  • ง่ายและถูกต้อง:
    • 50% หมายถึงสีที่ไม่เปลี่ยนแปลง
    • >50% หมายถึงสีอ่อนกว่า (สีอ่อน)
    • <50% หมายถึงสีเข้มขึ้น (เฉดสี)
  • ด้วยสีที่คุณสามารถระบุได้ว่าเป็นสีหรือแรเงาแล้ว
  • คุณสามารถย้อมสีหรือแรเงาสีได้ค่อนข้างหรือแน่นอน (โดยการเปลี่ยนชิ้นLightnessส่วน)

• หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้: Wiki: Colors Model
• สำหรับข้อมูลเพิ่มเติมเกี่ยวกับโมเดลเหล่านั้น: Wikipedia: HSL และ HSV

ฉันกำลังทดลองกับแคนวาสและพิกเซล ... ฉันพบว่าตรรกะนี้เหมาะกับฉันมากกว่า

1. ใช้สิ่งนี้เพื่อคำนวณความเทา (ลูมา?)
2. แต่มีทั้งค่าที่มีอยู่และค่า 'tint' ใหม่
3. คำนวณความแตกต่าง (ฉันพบว่าฉันไม่จำเป็นต้องคูณ)

4. เพิ่มเพื่อชดเชยค่า '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;
   

หรืออะไรทำนองนั้น ...