มีวิธีที่ดีในการสร้างโครงร่างสีเขียว - เหลือง - แดงหรือไม่?


12

ทฤษฎีสีพื้นฐานบอกเราว่าจานสีของสีเขียวสีเหลืองและสีแดงนั้นน่าเกลียดน่าหัวเราะพวกเขาเป็นสีที่ขัดแย้งกัน ถ้าเราใช้สีเขียวเป็นสีที่โดดเด่นสีที่คล้ายคลึงกับสีนั้นคือสีแดงและสีน้ำเงิน - ไม่มีที่ว่างสำหรับสีเหลืองในรูปแบบสีดังกล่าว

ดังนั้นมีวิธีใดบ้างที่สามารถรวมสีเขียวสีเหลืองและสีแดงในโทนสีโดยไม่ทำให้ผู้ใช้สะดุด

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

นี่คือตัวอย่างของฉัน (ละเว้นฟิลด์สีส้มและสีเทารอบตัวอักษรซึ่งไม่เกี่ยวข้อง)

ภาพหน้าจอ

เราทุกคนสามารถตกลงกันได้ว่าสิ่งนี้ดูน่ากลัวมาก แต่มันเป็นรูปแบบที่ฉันต้องยึดติดกับสิ่งทั้งหมดสีเขียว - แดง - เหลือง : /

การเป็นโปรแกรมเมอร์ส่วนใหญ่ซึ่งต่างจากนักออกแบบกราฟิก / เว็บความเข้าใจของฉันเกี่ยวกับทฤษฎีสีและประสบการณ์การใช้งานของผู้ใช้นั้นมี จำกัด

คำถามของฉันคือฉันจะสร้างรูปแบบการปะทะสีแบบดั้งเดิมได้อย่างไรโดยไม่เบี่ยงเบนประสบการณ์ผู้ใช้

(หากคำถามของฉันไม่เหมาะสมฉันจะลบออกไปฉันไม่แน่ใจว่าจะถามเรื่องนี้ได้ที่ไหนมันดูเหมาะสมที่สุด)


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

คำตอบ:


9

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

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

ปิดการค้าขนาดอิ่มตัว

เพื่อหลีกเลี่ยงผลกระทบที่สั่นสะเทือน (สมมติว่าคุณไม่ต้องการ) ขนาดของวัตถุสีควรจะแปรผกผันกับความอิ่มตัวของสี ตัวอย่างของคุณมีความอิ่มตัวสูงมากดังนั้นให้ลองใช้ความอิ่มตัวของสีที่ต่ำกว่า (เช่นสีพาสเทล) หรือสีอื่นที่ไม่ใช่พื้นหลัง ตัวอย่างเช่นคุณสามารถระบายสีข้อความและปล่อยให้พื้นหลังว่างหรือคุณอาจระบายสีรูปร่างหรือสัญลักษณ์เล็ก ๆ ไว้ด้านข้างข้อความ หลังจะให้โอกาสในการใช้รูปร่างเพื่อเขียนโค้ดทักษะการจับคู่ซ้ำซ้อนเพื่อการเข้าถึงและการพิมพ์ขาวดำ (เครื่องหมายถูกสีเขียวสำหรับความพึงพอใจ, เครื่องหมายอัศเจรีย์สีเหลืองสำหรับความขาดแคลนและสัญลักษณ์สีแดง "ห้ามป้อน" สำหรับ Not Good Enough) .

ระยะห่าง

สีที่ดูขึ้นอยู่กับความใกล้ชิดกัน สีมากกว่าการปะทะเมื่ออยู่ติดกันดูโอเคด้วยการแยกเล็ก ลองวางเส้นขอบที่เป็นกลางรอบ ๆ แต่ละเซลล์เพื่อแยกสีให้มากขึ้น (เช่นที่คุณมีในหัวของคุณ) ยกเว้นว่ามีความหมายบางอย่างกับเซลล์ที่มีสีเดียวกันผสมกันเพื่อให้มองว่าเป็นวัตถุชิ้นเดียว ลองความหนาที่แตกต่างกัน ลองแยกแต่ละเซลล์ด้วยเส้นขอบสีขาวเพื่อดูเป็นกระเบื้อง

แบบแผน

สีไปด้วยกันได้ดีเพียงใดเมื่อรูปแบบที่สีเปลี่ยนไปดังนั้นคุณต้องประเมินการจำลองด้วยสัดส่วนและตำแหน่งของสีโดยทั่วไป ตัวอย่างเช่นหากส่วนใหญ่เวลาทุกอย่างเป็นสีเขียวและเป็นสิ่งสำคัญที่สุดสำหรับผู้ใช้ในการเข้าร่วม“ ไฮไลท์” ของสีเหลืองและสีแดงให้เลือกสีเขียวที่ทำให้พื้นหลังดี (เช่นความอิ่มตัวต่ำแสง) และสีเหลืองและ สีแดงดูเหมือนจะนั่ง“ อยู่ด้านบน” (เช่นความอิ่มตัวสูงขึ้นมืด) พิจารณาว่าสุนทรียภาพของรูปแบบสามารถสื่อสารและกระตุ้นผู้ใช้ได้ หากผู้ใช้มีทักษะที่ไม่เหมาะสมหรือไม่สมดุลเป็นพิเศษคุณอาจต้องการรูปแบบที่น่าเกลียด รูปแบบที่น่าสนใจที่สุดควรสอดคล้องกับสถานะที่เป็นประโยชน์มากที่สุดสำหรับผู้ใช้

การใช้งาน

คำถามของคุณเกี่ยวกับความสวยงาม แต่ตัวเลือกการเข้ารหัสสีก็มีความเกี่ยวข้องกับการใช้งานที่สำคัญเช่นกัน การเลือกสีของคุณควรจะ:

  • มองเห็นแตกต่างจากกันและกันโดยเฉพาะอย่างยิ่งหากใช้ภายใต้สภาพการมองเห็นที่เสื่อมโทรม (เช่นบนมือถือที่มีแสงแดด)

  • ให้ความแตกต่างที่ดีกับพื้นหลัง (ถ้าพื้นหน้า) หรือพื้นหน้า (ถ้าพื้นหลัง) ตัวอย่างเช่นตัวอักษรสีดำบนสีแดงนั้นไม่ค่อยดีนัก โดยทั่วไปพื้นหน้าและพื้นหลังต้องการระดับความสว่างต่างกัน

  • ตรวจสอบให้แน่ใจว่าสีมีความสอดคล้องกับรหัสที่ใช้ ตัวอย่างเช่นสิ่งที่ผู้ใช้ควรเข้าร่วมเพื่อให้ความคมชัดมากขึ้นด้วยพื้นหลังและสีอื่น ๆ

  • ให้ความสามารถในการเข้าถึงและการพิมพ์ที่แต่ละสีมีระดับความมืดแตกต่างกันโดยความเข้มจะถูกปรับเป็นระดับ (สีแดงมากกว่าสีเหลืองมากกว่าสีเขียว) ทำให้สีเขียวของคุณค่อนข้างสีน้ำเงินและ / หรือสีแดงของคุณค่อนข้างส้มดังนั้นผู้ใช้ colorblind สีแดงสีเขียวสีเขียว (ตาบอดสีชนิดที่พบบ่อยที่สุด) ยังสามารถเห็นความแตกต่างของสี

  • ใช้การเข้ารหัสสีสำหรับตัวแปรเดียวเท่านั้น ฉันไม่รู้ว่าคุณใช้สีเทาและส้มเป็นอย่างไร แต่มีแนวโน้มที่จะทำให้เกิดความสับสนและทำให้ผู้ใช้สามารถใช้สีแดงสีเขียวและสีเหลืองได้ยากขึ้น เมื่อใดก็ตามที่คุณมีมากกว่าสามสีมันเป็นการยากที่จะทำให้สิ่งต่าง ๆ ใช้งานได้ ค้นหาวิธีอื่นในการกำหนดรหัสสีเทาและสีส้ม (เช่นใช้ขนาดตัวอักษรหรือน้ำหนักหรือใช้เส้นประสำหรับเส้นขอบเซลล์ดูการใส่ G ลงใน GUI )

ในโครงการหนึ่งที่ฉันทำงานอยู่สีที่ฉันมาพร้อมคือ # E00000, # FF8400 และ # C0FFE0 (ไม่ใช่สีเหลืองเหลืองมาก แต่ก็ยังใช้งานได้)

สีแดงเข้ม, สีส้ม, สีเขียวอ่อนสีฟ้า

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


2
คุณรู้ไหมว่าถ้าคุณทำให้สีเขียวอมฟ้าเป็นสีฟ้าเล็กน้อยคุณอาจมี#C0FFEEรหัสฐานสิบหก :)
Ilmari Karonen

6

ลองใช้พาสแทนสีจริงของ RGY ด้วยความอิ่มตัวที่ลดลงจึงควรดูข้อมูลได้ง่ายขึ้น

Hex สีแดงพาสเทล: # F7977A RGB: 246-150-121

Hex สีเขียวพาสเทล: # 82CA9D RGB: 130-202-156

Hex สีเหลืองพาสเทล: # FFF79A RGB: 255-247-153


1

ฉันเห็นความท้าทายหลักสามประการด้วยสามสีเหล่านี้

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

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

  • ใช้การไล่ระดับสีในพื้นหลังของเซลล์
  • ใช้สีเป็นเงาข้อความ เงาจะต้องมีจำนวนเบลอพอสมควรเพื่อเน้นข้อความ

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


1

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

เพื่อความสวยงามของปัญหาผมเอา "สีแดง" และ "สีเขียว" ของคุณสีและใส่ลงในเครื่องปั่นสี จากนั้นฉันเลือก pHSL เป็นแบบจำลองสีสำหรับการผสม นี่เป็นการปรับปรุงชุดสีแล้ว

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

ตกลงไม่เลว แต่ยังไม่พร้อม

สำหรับปัญหาการใช้งานของคุณโปรดจำไว้ว่ามีลำดับชั้นของความสว่าง (สัมพัทธ์), สีและความอิ่มตัวเพื่อนำทางความสนใจของเรา เนื่องจากสีเหลืองมีค่าความส่องสว่างสูงสุดตามธรรมชาติฟิลด์เหล่านี้จะดึงดูดความสนใจของเรามากที่สุด ดังนั้นฉันจึงนำเข้าสีไปที่ตัวแปลงสีเพื่อปรับแต่งสีแต่ละสี ในตัวอย่างของฉันฉันให้ค่าความส่องสว่างเท่ากับ "สีเหลือง" และ "สีเขียว" ความส่องสว่างที่ลดลงสำหรับความสว่างสีเหลืองหรือสูงกว่าสำหรับสีเขียวดูเป็นปัญหาที่เกี่ยวกับสุนทรียศาสตร์

ฉันลองชุดของฉันใน Photoshop และตระหนักว่าเส้นขอบสีขาว (ระยะห่าง) สร้างความประทับใจที่ดี ดังนั้นฉันขอแนะนำให้เว้นวรรคสีขาวสำหรับเซลล์และอย่างน้อยหนึ่งเส้นสีดำบาง ๆ สำหรับการแบ่งแต่ละบรรทัดของรายการ

เมื่อใช้เครื่องมือที่กล่าวถึงข้างต้นคุณอาจพบว่าการผสมสีที่ตรงกับรสนิยมส่วนตัวของคุณหรือความต้องการที่ดียิ่งขึ้น (เช่นความอิ่มตัวของสีเขียวที่สูงขึ้น) ...


0

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

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

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

วิธีนี้ทำให้ผู้ใช้สามารถอ่านข้อความและดูหมวดหมู่ของข้อความได้อย่างรวดเร็ว

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


0

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

ฉันขอแนะนำให้ดูในเว็บไซต์เหล่านี้บางแห่งที่คุณสามารถหาชุดค่าผสมที่ดี:

http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search

หรือลองสร้างบางส่วนด้วยตนเอง:

http://colorschemedesigner.com/

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

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

ฉันขอแนะนำให้ใช้สีเหลืองอ่อนเนื่องจากคุณใช้เป็นสีที่ค่อนข้างเป็นกลาง


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