ทฤษฎีสีสำหรับการออกแบบเว็บ: เฉดสี คอนทราสต์ และระบบการออกแบบ

พื้นฐานทฤษฎีสีสำหรับการออกแบบเว็บ

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

ฮิว ความอิ่มตัว และความสว่าง

การออกแบบเว็บสมัยใหม่เกือบจะเสมอทำงานใน โมเดลสี HSL (Hue, Saturation, Lightness) เพราะสะท้อนวิธีที่มนุษย์คิดเกี่ยวกับสีจริงๆ ต่างจาก RGB, HSL ให้คุณอธิบายสีในแบบที่นักออกแบบจะทำ

• ฮิว (Hue) คือสีตัวเอง วัดเป็นองศาตั้งแต่ 0 ถึง 360 บนวงล้อสี 0 แดง, 120 เขียว, 240 น้ำเงิน
• ความอิ่มตัว (Saturation) คือความเข้มของสี ตั้งแต่ 0% (เทา) ถึง 100% (สดเต็มที่) พาเลตแบรนด์สงบมักอยู่ที่ 30-60%
• ความสว่าง (Lightness) คือความสว่างหรือมืดของสี ตั้งแต่ 0% (ดำ) ถึง 100% (ขาว) 50% คือเวอร์ชันที่บริสุทธิ์และสดใสที่สุดของฮิว

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

สีหลัก สีรอง และสีตติยภูมิ

ทฤษฎีสีดั้งเดิมแบ่งฮิวเป็นสามกลุ่ม สีหลัก (แดง เหลือง น้ำเงิน) ไม่สามารถผสมจากสีอื่นได้ สีรอง (ส้ม เขียว ม่วง) สร้างจากการผสมสีหลักสองสี สีตติยภูมิ อยู่ระหว่างสีหลักกับสีรอง

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

เข้าใจเฉดสีและโทน

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

Shade vs Tint vs Tone

Tint คือสีที่ผสมกับสีขาว (สว่างขึ้น) Shade คือสีที่ผสมกับสีดำ (เข้มขึ้น) Tone คือสีที่ผสมกับสีเทา (ความอิ่มตัวน้อยลง) ในบทสนทนาประจำวันและเฟรมเวิร์ก CSS ส่วนใหญ่ คำว่า "shade" ใช้อย่างหลวมๆ สำหรับความแปรปรวนของความสว่างใดๆ

สเกล 50-900 อธิบาย

สเกลตัวเลข 50 ถึง 900 เป็นที่นิยมเนื่องจาก Material Design และ Tailwind CSS แต่ละตัวเลขแทนขั้นบนแกนความสว่างจากเกือบขาวถึงเกือบดำ

พลังของสเกลนี้คือ ความคาดการณ์ได้

มาตรฐานคอนทราสต์ WCAG

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

อัตราส่วนคอนทราสต์อธิบาย

ทำไมการเข้าถึงจึงสำคัญ

ผู้ชายประมาณ 1 ใน 12 และผู้หญิง 1 ใน 200 มีความบกพร่องการมองเห็นสีบางรูปแบบ กฎปฏิบัติ: องค์ประกอบข้อความทุกส่วนต้องผ่าน AA

สร้างพาเลตระบบการออกแบบ

พาเลตระบบการออกแบบเป็นมากกว่ารายการสีสวยๆ เป็นชุด โทเคน ที่มีโครงสร้างซึ่งมีห้าชั้น

1. สีหลัก

สีหลักคือใบหน้าของแบรนด์ ควรโดดเด่น เข้าถึงได้บนสีขาว และมีสเกล 50-900 ครบถ้วน

2. สีรอง

สีรองสนับสนุนสีหลัก รูปแบบทั่วไปคือเลือกฮิวห่างจากสีหลัก 120-180 องศา

3. เทาโทนกลาง

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

4. สีเชิงความหมาย

• สำเร็จ -- เขียว
• เตือน -- เหลือง
• อันตราย -- แดง
• ข้อมูล -- น้ำเงิน

5. เลเยอร์พื้นผิวและพื้นหลัง

กำหนดโทเคนพื้นหลัง 3 ถึง 5 ตัว (background, surface, surface-raised, overlay) ขั้นตอนง่ายๆ นี้ทำให้โหมดมืดฟรีเกือบทั้งหมดในภายหลัง

วิธีใช้เครื่องมือสร้างเฉดสีของเรา

เครื่องมือสร้างเฉดสี ฟรีของเราเปลี่ยนสีพื้นฐานใดๆ เป็นสเกล 50-900 พร้อมใช้งานจริงภายในไม่กี่วินาที ทุกอย่างทำงานในเบราว์เซอร์ของคุณ

คู่มือทีละขั้นตอน

1. เปิดเครื่องมือ สร้างเฉดสี
2. ป้อนสีพื้นฐาน เป็นรหัส hex (เช่น #3B82F6) หรือใช้ตัวเลือกสี
3. ตรวจสอบสเกลที่สร้าง -- ทั้ง 10 เฉดจาก 50 ถึง 900
4. ตรวจสอบคอนทราสต์ ผ่านการแสดงตัวอย่างข้อความ
5. ปรับหากจำเป็น -- สเกลจะสร้างใหม่ทันที
6. คัดลอกค่าแต่ละตัว หรือส่งออกทั้งพาเลต
7. ทำซ้ำสำหรับแต่ละบทบาท: หลัก รอง เป็นกลาง สำเร็จ เตือน อันตราย ข้อมูล

อธิบายรูปแบบการส่งออก

CSS Custom Properties

ตัวแปร CSS เป็นตัวเลือกสากล ทำงานในเบราว์เซอร์สมัยใหม่ทั้งหมดและรองรับการเปลี่ยนธีมรันไทม์ (โหมดมืด)

:root {
  --primary-50: #eff6ff;
  --primary-500: #3b82f6;
  --primary-900: #1e3a8a;
}

ตัวแปร SCSS

ตัวแปร SCSS ถูกแก้ไขในเวลาคอมไพล์ เลือก SCSS หากโปรเจกต์ของคุณใช้ Sass อยู่แล้ว

การกำหนดค่า Tailwind CSS

วางอ็อบเจ็กต์ที่ส่งออกใน tailwind.config.js ภายใต้ theme.extend.colors

โทเคน JSON

JSON เป็นรูปแบบแลกเปลี่ยนสากล เชื่อมต่อกับ Style Dictionary, Tokens Studio สำหรับ Figma และ Specify