DESIGNMARKETINGBUSINESS | 4 mins read

Color Experience ประสบการณ์ในการรับรู้สีของมนุษย์

By Snooker on 16 Jun 2022
sennalabs-blog-banner

ความรู้สึกที่มีต่อการรับรู้สี

 

มนุษย์เรารับรู้สีหรือจดจำสีได้อย่างไร? ถ้าให้คุณลองจินตนาการดูว่าสีแดงคุณนึกถึงอะไร? เลือด, KFC, มะเขือเทศ, สตรอเบอร์รี่, ตรุษจีน, ความร้อนแรง, กุหลาบ  หรืออีกสีหละถ้าเป็นสีเหลืองคุณนึกถึงอะไร? กล้วยหอม, McDonald, มันฝรั่งทอด, มาม่า, น้ำมันพืช, ทานตะวัน, เลมอน เช่นกัน การรับรู้สีของมนุษย์เป็นแบบนั้นเลย มนุษย์เรียนรู้สีจากประสบการณ์ในอดีตที่เราได้สั่งสมมาจากการเคยเห็น ความคุ้นเคยที่หลากหลายของแต่ละคนและมนุษย์แต่ละคนก็มีการรับรู้สีที่แตกต่างกันตามประสบการณ์ในอดีตของตัวพวกเขาเองทั้งนั้น

Image: 8 types of logos and when to use them. Credit: sadiartwork.com

Image: Color psychology in UX. Credit: userpeek.com

 

แบรนด์แต่ละบริษัทก็ใช้สีในการสื่อสารความเป็นตัวเองตามความรู้สึกขั้นพื้นฐาน เช่น

  • สีเหลือง Optimism (การมองในแง่ดี)
  • สีส้ม Friendly (เป็นกันเอง)
  • สีแดง Excitement (ความตื่นเต้น)
  • สีม่วง Creative (ความคิดสร้างสรรค์)
  • สีฟ้า Trust (ความน่าเชื่อถือไว้วางใจ)
  • สีเขียว Peaceful (สงบสุข ร่มเย็น)
  • สีเทา Balance (ความสมดุล)

แต่ก็มีแบรนด์ที่ใช้สีหลักหลากหลายเป็นสีแบรนด์ เช่น NBC, Google, Microsoft, ebay เป็นต้น

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

 

Image: Balanced Color Schemes. Credit: francescomorra.com

สีแดง ให้ความรู้สึกถึงความรัก ความร้อนแรง ความอันตราย ความหลงใหล พลัง ความรุนแรงหรือการทำลายล้าง

 

 

 


Image: Balanced Color Schemes. Credit: francescomorra.com

สีชมพู ให้ความรู้สึกถึงความบริสุทธิ์ ความหวาน ความเป็นผู้หญิง ขี้เล่น ความเข้าอกเข้าใจ ความสวย

 

 

 

Image: Balanced Color Schemes. Credit: francescomorra.com

สีส้ม ให้ความรู้สึกถึง ความอบอุ่น ความเป็นกันเอง ความสุข แปลกใหม่ ความเยาว์

 

 

 

Image: Balanced Color Schemes. Credit: francescomorra.com

สีเหลือง ให้ความรู้สึกถึง ความบ้าคลั่ง โรคภัยไข้เจ็บ ความไม่มั่นคง หมกมุ่น ความงดงามล่อตาล่อใจ ความไร้เดียงสา

 

 

 

Image: Balanced Color Schemes. Credit: francescomorra.com

สีเขียว ให้ความรู้สึกถึง ธรรมชาติ การยังไม่บรรลุนิติภาวะ คอรัปชั่น ลางร้าย ความมืดมัว ความอันตราย

 

 

 

Image: Balanced Color Schemes. Credit: francescomorra.com

สีฟ้า ให้ความรู้สึกถึงความหนาวเย็น การแยกตัว ความสับสนเกี่ยวกับมันสมอง ความเศร้าโศก การเฉยเมย ความเงียบสงบ

 

 

 


Image: Balanced Color Schemes. Credit: francescomorra.com

สีม่วงให้ความรู้สึกถึง แฟนตาซี การไม่มีตัวตน ความเร้าอารมณ์ ภาพลวงตา ความลึกลับ ลางร้าย

 

 

 

วงล้อสี

 

เป็นแผนภาพที่แสดงสี 12 สี ไว้รอบๆ วงกลม เพื่อแสดงถึงความสัมพันธ์ของสีแต่ละสี โดยจะมีแม่สีหลัก Primary Color เป็น สีแดง สีน้ำเงิน และสีเหลือง ซึ่งเราเอา 2 จาก 3 สีหลักมาผสมกันจะเกิดสีขั้นที่ 2 ขึ้นมาที่เราเรียกกันว่า Secondary Color ยกตัวอย่างเช่น เอาสีแดงผสมสีเหลือง ก็จะได้สีส้มขึ้นมา สีส้มเนี่ยแหละถือว่าเป็น Secondary Color จากนั้นเราก็ทำการผสมที่อยู่ใกล้เคียงกันไปเรื่อยๆ ก็จะเกิดเป็นสีขั้นที่ 3 ขึ้นมา ที่เราเรียกว่า Tertiary


Image: The Color Wheel. Credit: cnd.com

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



Image: Cool and Warm Colors. Credit: charu.org.in

 

 

 

บริบทของสี

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

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

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

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



Color Scheme (แบบแผนสี)

Image: Color Schemes. Credit: trademarktitleflorida.com

 

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

 

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

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

 

  • Monochromatic ในอุตสาหกรรม “การตกแต่งภายใน”


Image: Guide to Monochromatic Color Schemes. Credit: benjaminmoore.com


Image: Guide to Monochromatic Color Schemes. Credit: benjaminmoore.com



  • Monochromatic ในอุตสาหกรรม “ภาพยนต์”


Image: Color in Storytelling. Credit: dissolve.com


Image: Color in Storytelling. Credit: dissolve.com




  • Monochromatic ในอุตสาหกรรม “แอปพลิเคชั่นและเว็บไซต์”



Image: Smart Home App UI. Credit: Dribble.com



Image: Beauty365 - e-commerce website concept. Credit: Dribble.com





โทนสีถัดไปเราจะพาคุณไปดูโทนสีที่มีลูกเล่นขึ้นและเหล่านักออกแบบใช้กันเยอะ นั่นคือโทน




Analogous เป็นโทนสีที่มีการหยิบสีที่อยู่บริเวณใกล้เคียงกับสีหลักมาใช้ผสมเข้าไปในงานให้งานที่เราออกแบบดูมีมิติเพิ่มขึ้น



  • Analogous ในอุตสาหกรรม “การตกแต่งภายใน”


Image: 3D RENDER CHILD’S ROOM. Credit: Behance.com

 

  • Analogous ในอุตสาหกรรม “ภาพยนต์”

 

Image: Color in Storytelling. Credit: dissolve.com



Image: Color in Storytelling. Credit: dissolve.com




  • Analogous ในอุตสาหกรรม “แอปพลิเคชั่นและเว็บไซต์”



Image: Ski Location Finder App. Credit: Dribbble.com




Image: 3D Design Resources - Mobile Design. Credit: Dribbble.com

 

 

โทนสีถัดไปเราจะพาคุณไปดูโทนสีที่มีสเน่ห์มากเป็นการใช้สีหลัก 2 สีมาเล่นแข่งกันชิงดี ชิงเด่น นั่นคือโทน

Complementary เป็นโทนสีที่ใช้สีคู่ตรงข้ามมาเจอกันในงาน ทำให้งานดูมีมิติที่ตัดกันฉึบฉับ แต่เทคนิคของการใช้โทนสีคู่นี้ คือ เราต้องเลือกว่าสีไหนเป็นสีหลักที่จะให้ปริมาณการใช้สีที่มากกว่า แนะนำให้เลือกสีหลัก 1 สีมาใช้ในปริมาณที่มากกว่าอีกสีนึงด้วยปริมาณ 80/20 หรือ 70/30 แต่ไม่แนะนำให้ใช้ทั้ง 2 สีในปริมาณที่ใกล้เคียงกันหรือเท่าเทียมกันเพราะจะทำให้งานของเราดูไม่มีอะไรโดดเด่น แย่งซีนกันเองไปหมด

  • Complementary ในอุตสาหกรรม “การตกแต่งภายใน”



Image: Elephant Chair. Credit: Behance.com

 

  • Complementary ในอุตสาหกรรม “ภาพยนต์”



Image: Color in Storytelling. Credit: dissolve.com



Image: Netflixth. Credit: trendsmap.com

 

 

Image: Netflixth. Credit: trendsmap.com

 

  • Complementary ในอุตสาหกรรม “แอปพลิเคชั่นและเว็บไซต์”



Image: Bird Shazam app concept. Credit: Dribbble.com


Image: Onboarding Dia app. Credit: Dribbble.com




และก็มาถึงโทนสีสุดท้ายที่เราเลือกมานำเสนอนั่นคือโทนสีที่ใช้สีกันหลากหลายแต่ไม่มั่ว เพราะนี่คือโทนสีที่ต้องเลือกสีที่ไปในแกนเดียวกัน องศาการเลือกน้ำหนักเฉดที่เท่ากันทุกด้าน นั่นคือโทนสี



Triad เป็นโทนสีที่ทุกคนรู้จักกันในนามสีของ Superman เพราะหลักๆ ที่ทุกคนคุ้นเคยและเข้าใจได้ง่ายนั่นคือสีแม่หลัก แดง น้ำเงิน เหลือง แต่จริงๆ แล้ว Triad ยังสามารถเลือกใช้ ม่วง เขียว ส้ม ได้อีกที่ Trio ไปในทิศทางเดียวกัน หรือบางอุตสาหกรรมก็ใช้ Triad แค่บาง Screen หรือบาง Scene เท่านั้น เลือกหักสีออกขานึงเหลือแค่ 2 สี ส่วนสีที่ถูกหักออกเอาไปผสมกับ Screen หรือ Scene อื่นต่อได้

  • Triad ในอุตสาหกรรม “การตกแต่งภายใน”



Image: Lego center. Credit: Behance.com




Image: AB Games, Kyiv Studio. Credit: Behance.com

  • Triad ในอุตสาหกรรม “ภาพยนต์”



Image: Color in Storytelling. Credit: dissolve.com




Image: La La Land — A study in color. Credit: medium.com




Image: La La Land — A study in color. Credit: medium.com

 

  • Triad ในอุตสาหกรรม “แอปพลิเคชั่นและเว็บไซต์”



Image: People - Mobile App Design with Illustrations. Credit: Dribbble.com




Image: Kyla - Interactive Personification. Credit: Dribbble.com

Written By

Please Tell Us Your Ideas

We will get back to you within 24 hours!

Something went wrong. Please try to verify again