วิธีทำให้สีปรากฏบนพื้นหลังที่แตกต่างกันอย่างไร


17

พื้นหลังเกี่ยวกับการรับรู้สี:

เนื่องจากลักษณะของสายตามนุษย์และการประมวลผลภาพโดยสมองที่มีภาพลวงตาที่มีสีเดียวกันจะมีลักษณะที่แตกต่างกันขึ้นอยู่กับพื้นหลัง

เป็นที่รู้จักกันในนามเอฟเฟกต์ความคมชัดภาพประกอบด้านล่าง - รูปสี่เหลี่ยมผืนผ้าตรงกลางเหมือนกัน:

ป้อนคำอธิบายรูปภาพที่นี่ที่มา: Wikimedia

ภาพประกอบ(และรายงาน) โดย NASAทำให้ผลของสีพื้นหลังชัดเจนยิ่งขึ้น:

ป้อนคำอธิบายรูปภาพที่นี่

ป้อนคำอธิบายรูปภาพที่นี่ที่มา: ห้องปฏิบัติการวิจัยการใช้สีของนาซา

(โปรดสังเกตว่าสีที่สูงที่สุดสองสีในภาพที่สองปรากฏเหมือนกัน แต่จริง ๆ แล้วแตกต่างกันโดยสิ้นเชิง)


แล้วการออกแบบเว็บล่ะ

คำถามของฉันเกี่ยวข้องกับการออกแบบเว็บโดยเฉพาะในกรณีนี้สีของข้อความลิงค์ในพื้นหลังที่แตกต่างกัน

สำหรับสีข้อความที่กำหนดหนึ่งจะพบสีเสริมเพื่อให้มันปรากฏบนพื้นหลังที่แน่นอนได้อย่างไร


ลองมาดูตัวอย่างสำหรับคำถามนี้

ลองพิจารณาตัวอย่างด้านล่างด้วยตัวอักษรสีเหลือง#FFF000บนพื้นหลังต่อไปนี้:

  • สีขาว#FFFFFF,
  • ดำ#000000,
  • #555555และสีเทา


เปรียบเทียบสีบนพื้นหลังที่แตกต่างกันสำหรับข้อความการออกแบบเว็บ


อย่างที่คาดไว้ไม่เหมือนกันเลย ( ดูและดาวน์โหลดไฟล์. PSD ที่นี่ )

เราจะทำให้มันดูเหมือนกันทั้งสามได้อย่างไร เห็นได้ชัดว่าข้อความบนพื้นหลังสีขาวจะต้องมีสีเหลืองเข้มและข้อความบนพื้นสีเทาต้องการการปรับสี / โทนสี (ข้อความโดยรอบจะมีผลกับมันด้วย - แต่อาจเป็นเรื่องยากสำหรับบัญชี)

สามารถคำนวณสีที่สมบูรณ์แบบนี้ได้โดยใช้ Hex, RGB หรือระบบอื่นหรือไม่? นั่นคือที่มาของคำถามนี้เพราะมันจะมีประสิทธิภาพมากกว่าการประมาณค่าด้วยตนเอง


คุณจะต้องใช้สีเหลือง สังเกตในตัวอย่างของคุณพวกเขาใช้สีคล้ายกับที่พวกเขากำลังพยายามทำให้ดูแตกต่างกัน
ฮันนา

2
@Johannes คุณหมายถึงอะไร?
Baumr

ในตัวอย่างแรกของคุณสีที่ใช้คือสีเทาทั้งหมด ในตัวอย่างที่สองของคุณสีม่วงของคุณถูกสร้างขึ้นเพื่อให้ดูสีน้ำเงินมากขึ้นผ่านการใช้สีม่วงที่สว่างมาก จากตัวอย่างสีเหลืองของคุณคุณจะพบกับสีขาวสีเทาสีเทาและสีดำ ดังนั้นสิ่งที่ฉันพูดคือคุณต้องใช้สีเหลืองแทนเพื่อทำให้สีเหลืองของคุณปรากฏบนพื้นหลังที่แตกต่างกัน
ฮันนา


คำตอบ:


10

ดูเหมือนว่าคุณกำลังมองหาอะนาล็อกของสีเสริมแต่ในความสว่างพื้นที่มากกว่าสี เท่าที่ฉันสามารถบอกได้ว่าไม่มีการทำแผนที่ทั่วไปดังกล่าว

สมมติว่าคุณสามารถชดเชยผลกระทบได้โดยสมมติว่าความสัมพันธ์เชิงเส้นระหว่างพื้นหลังกับพื้นหน้าเพื่อที่ว่าพื้นหลังจะทำให้ข้อความพื้นหน้ามืดลงด้วยจำนวนเดียวกัน ฉันคิดว่าเว้ยังคงได้รับการแก้ไข จะมีจุดกึ่งกลางที่พื้นหลังและพื้นหน้าใช้สีเดียวกันเสมอ

ยกตัวอย่างเช่นพิจารณาดำกับขาว ความสว่างในการสนทนาสำหรับเฉดสีเดียวกันนั้นเป็นสีขาวบนสีดำ แต่ถ้าคุณพยายามหาเบื้องหน้าสำหรับพื้นหลังระดับกลางของสีเดียวกันทุกจุดที่อยู่ตรงกลางคุณจะเห็นสีเทาเทาและไม่เห็นอะไรเลย

ด้วยเหตุผลเดียวกันฉันไม่สามารถเห็นได้ว่ามีการแมปแบบเรียบง่ายที่สมเหตุสมผล - แม้จะมีการสูญเสีย -


1
เพื่อแก้ปัญหานี้ฉันคิดว่าเราจะต้องสร้างแบบจำลองของดวงตามนุษย์ (เฉลี่ย) และหาแบบที่ดีที่สุดโดยใช้อัลกอริทึมทางพันธุกรรม
Baumr

1
@ Baumr: อาจเป็นวิทยานิพนธ์ระดับปริญญาเอกที่ดี :)
Lightness Races กับ Monica

0

เกี่ยวกับสิ่งนี้: ใช้สีเทาที่แตกต่างกันภายใต้พื้นหลังที่แตกต่างกันทาสีขาวและดำเพื่อให้อดีตปรากฏเหมือนกัน แต่ไม่ใช่เมื่อพวกเขาขัดแย้งกับสีกลาง

แจ้งให้เราทราบว่าชุดข้อมูลทั้งสองชุดนี้มีลักษณะเหมือนกันที่ด้านบนของแถวสีดำและสีขาวหรือไม่:

ป้อนคำอธิบายรูปภาพที่นี่

เนื่องจากสิ่งที่ปะเหล่านี้มีลักษณะที่ด้านบนของสีเทากลางที่ปรากฎในภาพนี้:

ป้อนคำอธิบายรูปภาพที่นี่

ฉันใช้โหมดการผสมแบบเลเยอร์ของ GIMP ที่เรียกว่า Grain Extract / Merge ซึ่งอนุญาตให้ฉันค้นหาสีเทาที่เบาที่สุดโดยการแยกแพทช์ที่เป็นกลางจากที่อื่น ในคำอื่น ๆ : ฉันพบสองสีเทาซึ่งสารเติมแต่งเฉลี่ยมีความเป็นกลาง

ด้วยสีกับพื้นหลังสีดำหรือสีขาวคุณสามารถใช้เกรนผสานเพื่อหาสีที่เติมโดยเฉลี่ย

แก้ไข: ลองดูสิ คุณอาจพบว่าสีเหลืองปรากฏขึ้นเหมือนกัน

ป้อนคำอธิบายรูปภาพที่นี่

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.