ทฤษฎีสีสำหรับนักออกแบบเว็บ

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

โมเดลสี: RGB, HSL, HEX และ CMYK

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

RGB (แดง, เขียว, น้ำเงิน)

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

ใน CSS สี RGB เขียนเป็น rgb(255, 87, 51) ส่วน rgba() เพิ่มช่อง alpha สำหรับความโปร่งใส โดยมีค่าตั้งแต่ 0 (โปร่งใสทั้งหมด) ถึง 1 (ทึบทั้งหมด): rgba(255, 87, 51, 0.8)

HSL (เฉดสี, ความอิ่มตัว, ความสว่าง)

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

• เฉดสี: ตัวสีเอง แสดงเป็นองศาบนวงล้อสี ตั้งแต่ 0 ถึง 360 สีแดงคือ 0 สีเขียวคือ 120 สีน้ำเงินคือ 240 และทุกสีวนกลับมาที่สีแดงที่ 360 องศา
• ความอิ่มตัว: ความเข้มหรือความบริสุทธิ์ของสี ตั้งแต่ 0% (สีเทาทั้งหมด) ถึง 100% (สดใสเต็มที่) ที่ความอิ่มตัว 0% จะให้โทนสีเทาไม่ว่าเฉดสีจะเป็นอะไร
• ความสว่าง: ความสว่างหรือความมืดของสี ตั้งแต่ 0% (สีดำ) ถึง 100% (สีขาว) ที่ความสว่าง 50% จะให้เฉดสีบริสุทธิ์ที่ความอิ่มตัวเต็มที่

HSL ทำให้การสร้างรูปแบบสีต่างๆ เป็นเรื่องง่าย ต้องการสีน้ำเงินของแบรนด์แบบอ่อน? เพิ่มความสว่าง ต้องการโทนสีที่นุ่มนวลขึ้น? ลดความอิ่มตัว วิธีนี้เข้าใจง่ายกว่าการปรับช่อง RGB แต่ละช่องมาก ใน CSS: hsl(210, 100%, 50%)

HEX (เลขฐานสิบหก)

HEX เป็นรูปแบบสีที่พบบ่อยที่สุดในการพัฒนาเว็บ มันใช้สัญกรณ์เลขฐานสิบหกเพื่อแสดงค่า RGB โดยแต่ละช่องแสดงด้วยเลขฐานสิบหกสองหลัก ตั้งแต่ 00 ถึง FF รูปแบบคือ #RRGGBB ดังนั้น #FF5733 หมายถึง แดง=255, เขียว=87, น้ำเงิน=51 HEX และ RGB เหมือนกันในทางคณิตศาสตร์ — มันเป็นเพียงวิธีการเขียนค่าเดียวกันที่แตกต่างกัน

CSS สมัยใหม่ยังรองรับสัญกรณ์ HEX แบบ 4 หลักและ 8 หลักที่มีช่อง alpha #FF573380 คือสีเดียวกันที่ความทึบประมาณ 50% สัญกรณ์แบบย่อเช่น #F53 ขยายเป็น #FF5500

CMYK (ฟ้า, ม่วงแดง, เหลือง, ดำ)

CMYK เป็นโมเดลสีแบบลบที่ใช้ในการพิมพ์ ซึ่งแตกต่างจากหน้าจอที่เปล่งแสง วัสดุพิมพ์ใช้หมึกเพื่อดูดซับแสง ค่า CMYK แสดงเปอร์เซ็นต์ของหมึกแต่ละชนิด ตั้งแต่ 0% ถึง 100% แม้ว่านักออกแบบเว็บจะไม่ค่อยใช้ CMYK โดยตรง แต่การเข้าใจมันเป็นสิ่งสำคัญเมื่อเตรียมงานออกแบบที่ต้องพิมพ์ (เช่น นามบัตรหรือบรรจุภัณฑ์) สีที่ดูสดใสบนหน้าจออาจดูหมองในการพิมพ์ เนื่องจากขอบเขตสี RGB กว้างกว่าขอบเขตสี CMYK

การเปรียบเทียบโมเดลสี

หลักการความกลมกลืนของสี

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

สีคู่ตรงข้าม

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

สีใกล้เคียง

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

สีสามเหลี่ยม

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

สีคู่ตรงข้ามแบบแยก

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

สีสี่เหลี่ยม (คู่ตรงข้ามสองคู่)

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

การเข้าถึงและคอนทราสต์ (WCAG)

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

การทำความเข้าใจคอนทราสต์

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

ข้อกำหนด WCAG 2.1

ข้อความขนาดใหญ่กำหนดเป็น 18pt (24px) สำหรับน้ำหนักปกติ หรือ 14pt (18.66px) สำหรับน้ำหนักตัวหนา ข้อความทั้งหมดที่เล็กกว่าค่าเหล่านี้ต้องเป็นไปตามข้อกำหนดคอนทราสต์ข้อความปกติ ส่วนประกอบ UI รวมถึงฟิลด์ฟอร์ม ปุ่ม และตัวบ่งชี้โฟกัส

ข้อผิดพลาดด้านการเข้าถึงที่พบบ่อย

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

การเลือกชุดสี

ชุดสีที่มีโครงสร้างดีให้ความสม่ำเสมอและลำดับชั้นทางสายตาทั่วทั้งเว็บไซต์ ชุดสีมืออาชีพส่วนใหญ่มีโครงสร้างที่เรียบง่าย:

กฎ 60-30-10

หลักการออกแบบคลาสสิกนี้แนะนำให้ใช้สีหลัก 60% ของพื้นที่ภาพ (มักเป็นพื้นหลัง) สีรอง 30% (การ์ด, พื้นที่, การนำทาง) และสีเน้น 10% (ปุ่ม, ลิงก์, ไฮไลต์) สิ่งนี้สร้างลำดับชั้นทางสายตาที่เป็นธรรมชาติ โดยสีเน้นดึงดูดความสนใจได้อย่างแม่นยำเพราะใช้อย่างจำกัด

การสร้างชุดสีที่ใช้งานได้จริง

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

การสร้างรูปแบบสีต่างๆ

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

จิตวิทยาสีในการออกแบบเว็บ

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

การเชื่อมโยงสีที่พบบ่อย

การประยุกต์ใช้จิตวิทยาสี

จิตวิทยาสีควรเป็นข้อมูลสำหรับการตัดสินใจออกแบบของคุณ ไม่ใช่ครอบงำมัน เริ่มต้นด้วยสีที่สอดคล้องกับคุณค่าของแบรนด์และความคาดหวังของอุตสาหกรรม จากนั้นทดสอบปฏิกิริยาของผู้ใช้จริง ตัวอย่างเช่น การทดสอบ A/B ปุ่มเรียกร้องให้ดำเนินการด้วยชุดสีที่แตกต่างกันสามารถเปิดเผยว่าสีใดนำไปสู่การแปลงที่มากขึ้นสำหรับกลุ่มเป้าหมายเฉพาะของคุณ การวิจัยแสดงให้เห็นอย่างสม่ำเสมอว่าสีของปุ่มสามารถส่งผลต่ออัตราการแปลง 20% หรือมากกว่า แต่สี "ที่ดีที่สุด" ขึ้นอยู่กับบริบทโดยรอบและสิ่งที่สร้างคอนทราสต์ทางสายตาสูงสุด

เครื่องมือเลือกสี

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

• ตัวเลือกสี ToolHub: เครื่องมือเลือกสีบนเบราว์เซอร์ฟรีของเรา ให้คุณเลือกสีและดูผลลัพธ์ทันทีในรูปแบบ HEX, RGB และ HSL การประมวลผลทั้งหมดเกิดขึ้นในเครื่อง ได้ผลลัพธ์ทันที
• ตัวแปลงสี ToolHub: แปลงระหว่าง HEX, RGB, HSL และรูปแบบอื่นๆ ได้ทันที เครื่องมือจำเป็นสำหรับการแปลงข้อกำหนดการออกแบบเป็นค่า CSS
• ตัวตรวจสอบคอนทราสต์ ToolHub: ตรวจสอบการปฏิบัติตาม WCAG สำหรับคู่สีใดๆ รับอัตราส่วนคอนทราสต์ที่แม่นยำและสถานะผ่าน/ไม่ผ่านสำหรับทุกระดับ WCAG
• Coolors: เครื่องมือสร้างชุดสียอดนิยมที่ให้คุณล็อกสีที่ชอบและสุ่มสีที่เหลือจนกว่าจะพบการผสมที่กลมกลืน
• Adobe Color: มีเครื่องมือวงล้อสีแบบโต้ตอบสำหรับการสร้างชุดสีที่กลมกลืนตามสีคู่ตรงข้าม สีใกล้เคียง สีสามเหลี่ยม และรูปแบบอื่นๆ
• Realtime Colors: ดูตัวอย่างว่าชุดสีจะดูอย่างไรบนเค้าโครงเว็บไซต์จริงก่อนที่จะนำไปใช้ในการออกแบบ

ฟังก์ชันสีใน CSS

CSS สมัยใหม่มีฟังก์ชันสีที่ทรงพลังซึ่งทำให้การทำงานกับสีมีความไดนามิกและบำรุงรักษาง่ายขึ้น การเข้าใจฟังก์ชันเหล่านี้ช่วยให้เขียนสไตล์ชีตที่ชัดเจนและยืดหยุ่นมากขึ้น

ไวยากรณ์สี CSS สมัยใหม่

CSS Color Level 4 แนะนำไวยากรณ์ที่เป็นหนึ่งเดียวสำหรับฟังก์ชันสีทั้งหมด คุณสามารถเขียน rgb(255 87 51) (คั่นด้วยช่องว่าง ไม่มีเครื่องหมายจุลภาค) และ rgb(255 87 51 / 0.8) (alpha คั่นด้วยเครื่องหมายทับ) ไวยากรณ์นี้รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมดและอ่านง่ายกว่ารูปแบบเก่าที่คั่นด้วยเครื่องหมายจุลภาค

ไวยากรณ์สีสัมพัทธ์

CSS Color Level 5 แนะนำไวยากรณ์สีสัมพัทธ์ ซึ่งช่วยให้คุณสร้างสีใหม่จากสีที่มีอยู่โดยการปรับเปลี่ยนแต่ละช่อง:

:root {
  --brand: hsl(210 100% 50%);
}

.button {
  background: var(--brand);
}

.button:hover {
  background: hsl(from var(--brand) h s 40%);
}

.button:disabled {
  background: hsl(from var(--brand) h 20% l);
}

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

ฟังก์ชัน Color-Mix

ฟังก์ชัน color-mix() ผสมสองสีในสัดส่วนที่กำหนด:

.card {
  background: color-mix(in srgb, var(--brand) 80%, white);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}

สิ่งนี้มีประโยชน์มากสำหรับการสร้างการซ้อนทับแบบโปร่งแสง สถานะโฮเวอร์ และรูปแบบละเอียด โดยไม่ต้องกำหนดคุณสมบัติกำหนดเอง CSS แยกต่างหากสำหรับแต่ละระดับสี

สีช่วงกว้าง: lab(), lch(), oklch()

ฟังก์ชัน oklch() ให้การเข้าถึงขอบเขตสี P3 ซึ่งมีสีที่ไม่สามารถแสดงใน sRGB ได้ นี่หมายความว่าสามารถแสดงสีเขียว ฟ้า และม่วงแดงที่สดใสมากขึ้นบนจอภาพที่รองรับ ความสม่ำเสมอในการรับรู้ของ OKLCH ยังหมายความว่าการเปลี่ยนแปลงความสว่างที่เท่ากันสร้างการเปลี่ยนแปลงทางสายตาที่เท่ากัน ทำให้เป็นตัวเลือกที่เหมาะสำหรับการสร้างระดับสีอย่างเป็นระบบ