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

ทฤษฎีสีคืออะไร?

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

ซึ่งในเบื้องต้นเรายังไม่ต้องเจาะลึกขนาดนั้น เอาแค่คร่าวๆว่า การใช้สีในการออกแบบนั้นมีด้วยกัน 3 หลักใหญ่ๆ Complementation (การเติมเต็มกันของสี), Contrast (ความตัดกันของสี), Vibrancy (ความมีชีวิตชีวา)

1. Complementation (การเติมเต็มให้กันของสี)

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

  • การใช้สีที่ใกล้เคียงกัน (Analog Colors)

    คือการเลือกใช้สีที่อยู่ติดกัน 3 ช่องสี หรือจะมากกว่านั้นก็ได้ในทางปฏิบัติจริง แต่อาจจะต้องลดปริมาณการใช้สีที่ 4 สีที่ 5 ลงมาเพื่อไม่ให้สีเกิดการตีกันมากเกินไป

           ตัวอย่างรูปที่ใช้ทฤษฎีการใช้สีใกล้เคียงกัน (Analog Colors)

Bring Peace to Midnight, by lostsoulx44
phil’s_lion, by Melelel
  • การใช้สีคู่ตรงข้าม (Complementary Colors)

    คือสีที่อยู่ตรงกันข้ามเลยในวงจรสี เช่นสีเหลืองกับสีม่วง โดยปกติแล้วจะไม่นิยมใช้คู่กัน โดยเฉพาะยิ่งเป็นมือใหม่จะไม่แนะนำ เพราะหากใช้ไม่ถูกหลัก จะทำให้รู้สึกปวดตา ลายตา เกิดความรู้สึกสับสน แต่ถ้าอยากใช้จริงๆหลักก็ไม่ยาก แถมยังดูเด่น ให้ความรู้สึกรุนแรง เร้าใจ อีกด้วย กับกฎ 80% ต่อ 20% คือใช้สีหนึ่งให้เยอะกว่าอีกสี ซึ่งจริงๆไม่ต้อง 80/20 เป๊ะๆก็ได้ หรือถ้าจะใช้แบบ 50/50 ก็ควรจะนำสีขาวหรือสีดำเข้ามาเสริม หรืออาจจะปรับความสดของสีใดสีหนึ่งในหม่นลงก็จะช่วยคุณจากหายนะที่พบเจออยู่ได้เหมือนกัน

ตัวอย่างรูปที่ใช้ทฤษฎีการใช้สีคู่ตรงข้าม (Complementary Colors)

Fruits, by Konstantin Shalev
TULIP, by gartier
  • การใช้สีใกล้เคียงกับสีคู่ตรงข้าม (Split Complementary)

    เป็นวิธีที่ฮิตมาก เพราะได้ทั้งการตัดกันของสี และความนุ่มนวลผสมผสานของสี วิธีนี้แทนที่จะเลือกคู่สีตรงข้ามที่ใช้ได้ยาก ให้เลี่ยงไปใช้สีข้างเคียงคู่สีตรงข้ามแทน เช่น อยากใช้สีเขียวอมเหลือง (Yellow-Green)  แทนที่จะใช้สี ม่วงอมแดง (Red-Violet) ที่เป็นคู่สีตรงข้าม ก็ให้เลือกใช้เป็นสีแดง (Red) กับสีม่วง (Violet) ที่อยู่ข้างๆคู่สีตรงข้ามแทน

ตัวอย่างรูปที่ใช้ทฤษฎีการใช้สีใกล้เคียงกับสีคู่ตรงข้าม (Split Complementary)

The Daughter of Poseidon, by zanthia
Firefox logo
Firefox Logo
  • การใช้โครงสีสามเหลี่ยมในวงจรสี (Triad Colors)

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

ตัวอย่างรูปที่ใช้ทฤษฎีการใช้โครงสีสามเหลี่ยมในวงจรสี (Triad Colors)

Summer, by Zzanthia
Burger King Logo

 

 

 

 

 

 

 

2. Contrast (ความตัดกันของสี)

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

นั่นคือตัวอย่างที่ดี แล้วตัวอย่างที่ไม่ดีล่ะ?

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

เช่น ถ้าเว็บไซต์ของคุณมีพื้นหลังสีเข้ม เนื้อหาหลัก (Main content) ก็ควรจะเป็นสีที่สว่างกว่า

แต่ถ้าเว็บไซต์มีพื้นหลังสีสว่าง เนื้อหาหลัก (Main content)  ก็ควรจะเป็นสีที่เข้มกว่า

ทฤษฏีนี้ยังใช้กับการใช้สีข้างเคียงอื่นๆได้อีกด้วย

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

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

3.Vibrancy (ความมีชีวิตชีวา)

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

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

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

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

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

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

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

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

ทฤษฎีสีเบื้องต้นสำหรับการออกแบบเว็บก็คงต้องขอจบลงเท่านี้ก่อน ไว้โอกาสหน้าเราจะมาทำความรู้จักทฤษฎีเชิงลึกกว่านี้กัน