ทฤษฎีสีสำหรับ UI Designer: Palette, Contrast, และอารมณ์ความรู้สึก

สีคือสัญญาณทางสายตาที่ส่งผลเร็วที่สุดในงานออกแบบ ก่อนที่ผู้ใช้จะอ่านข้อความสักคำ สีได้สื่อสารอารมณ์ ลำดับความสำคัญ และเอกลักษณ์ของแบรนด์ไปแล้ว แต่นักพัฒนาและนักออกแบบจำนวนมากยังคงเลือกสีด้วยสัญชาตญาณ จนได้ palette ที่ดูไม่ลงตัว ไม่ผ่านมาตรฐาน accessibility หรือดูขัดแย้งกันระหว่าง dark/light mode การเข้าใจทฤษฎีสีจะให้รากฐานที่มั่นคงสำหรับการตัดสินใจเรื่องสีทุกครั้ง

พื้นฐานของโมเดลสี

Hue, Saturation, และ Lightness (HSL)

HSL คือโมเดลสีที่เข้าใจง่ายที่สุดสำหรับงานออกแบบ:

• Hue — ตัวสีเอง: 0° = แดง, 60° = เหลือง, 120° = เขียว, 180° = ฟ้าอมเขียว, 240° = น้ำเงิน, 300° = ม่วงแดง
• Saturation — ความสดหรือความหม่น: 0% = เทา, 100% = อิ่มสีเต็มที่
• Lightness — ความอ่อนหรือความเข้ม: 0% = ดำ, 50% = สีบริสุทธิ์, 100% = ขาว

/* hue เดียวกันแต่ต่าง saturation และ lightness */
hsl(220, 90%, 50%)   /* น้ำเงินสด */
hsl(220, 30%, 50%)   /* น้ำเงินเหล็กหม่น */
hsl(220, 90%, 90%)   /* น้ำเงินอ่อนมาก */
hsl(220, 90%, 20%)   /* น้ำเงินเข้มมาก */

HSL มีประสิทธิภาพสูงเพราะคุณสามารถปรับทีละมิติได้ หากต้องการให้สีอ่อนลง ให้เพิ่มค่า L หากต้องการให้สีหม่นลง ให้ลดค่า S

RGB และ HEX

RGB กำหนดสีด้วยค่าช่องสี red, green, และ blue (0–255) ส่วน HEX คือค่าเดียวกันในรูปแบบเลขฐานสิบหก:

rgb(59, 130, 246)  ≡  #3B82F6

HEX เป็นมาตรฐานสำหรับ CSS และเครื่องมือออกแบบ แปลงรูปแบบด้วย Color Converter ของเรา

Color harmonies

Color harmonies คือการผสมผสานสีที่ดูสวยงามเพราะมีความสัมพันธ์ทางเรขาคณิตบนวงล้อสี

Monochromatic

hue เดียว แต่ต่าง saturation และ lightness ดูสะอาด เป็นเอกภาพ และมีความซับซ้อน

Base:    hsl(220, 80%, 50%)
Light:   hsl(220, 70%, 85%)
Dark:    hsl(220, 60%, 25%)
Muted:   hsl(220, 20%, 60%)

เหมาะอย่างยิ่งสำหรับผลิตภัณฑ์แนว minimalist, dark theme, และ interface ที่เน้นแบรนด์

Complementary

สอง hue ที่อยู่ตรงข้ามกันบนวงล้อสี (ห่างกัน 180°) คอนทราสต์สูงและดูมีชีวิตชีวา — ใช้สีที่สองอย่างประหยัดในฐานะ accent

Primary:   hsl(220, 80%, 50%)   /* น้ำเงิน */
Accent:    hsl(40,  90%, 55%)   /* ส้ม/อำพัน */

การใช้ทั้งสองสีในปริมาณเท่ากันจะสร้างความตึงเครียดทางสายตา ปล่อยให้สีหนึ่งครองพื้นที่

Analogous

สามสีหรือมากกว่าที่อยู่ติดกัน (ห่างกัน 30–60°) ให้ความรู้สึกเป็นธรรมชาติและกลมกลืน เหมือน gradient ในยาม석양ย

hsl(200, 70%, 50%)   /* ฟ้าอมเขียว */
hsl(220, 80%, 50%)   /* น้ำเงิน */
hsl(250, 70%, 55%)   /* น้ำเงินอมม่วง */

เหมาะสำหรับพื้นหลังและการจัดวางเลเยอร์ที่ละเอียดอ่อน

Triadic

สาม hue ที่แบ่งวงกลมเท่า ๆ กัน (ห่างกัน 120°) ดูสดใสและสมดุล — ต้องจัดการอย่างระมัดระวังเพื่อไม่ให้ดูวุ่นวาย

hsl(0,   80%, 55%)   /* แดง */
hsl(120, 70%, 45%)   /* เขียว */
hsl(240, 75%, 55%)   /* น้ำเงิน */

เหมาะสำหรับ infographic, chart, และการแสดงผลข้อมูล

การสร้าง color palette สำหรับ design system

ระบบสีที่แข็งแกร่งมีหลายชั้น:

1. Brand colors (primary + secondary)

สีที่เป็นตัวแทนเอกลักษณ์ของผลิตภัณฑ์ มักใช้ 1–2 hue

2. Semantic colors

สีที่มีความหมายเฉพาะเจาะจงทั่วทั้ง UI:

Token	วัตถุประสงค์
success	เขียว — สถานะเชิงบวก, การยืนยัน
warning	เหลือง/อำพัน — ข้อควรระวัง, สถานะที่ลดลง
error	แดง — ความล้มเหลว, การกระทำที่ทำลาย
info	น้ำเงิน — ข้อมูลทั่วไป, คำแนะนำ

3. Neutral scale

สีเทาสำหรับข้อความ, พื้นหลัง, ขอบ, และตัวแบ่ง scale เต็มรูปแบบมักไล่จาก 50 (ขาวเกือบสนิท) ถึง 950 (ดำเกือบสนิท):

--gray-50:  #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;

4. Color scales แบบเต็ม

สำหรับแต่ละ brand color ให้สร้าง scale 10 ขั้นที่ตรงกับรูปแบบ neutral scale เครื่องมืออย่าง Radix Colors และ color palette ของ Tailwind เป็นตัวอ้างอิงที่ปรับแต่งมาอย่างดี

Color contrast และ accessibility

WCAG 2.2 กำหนดค่า contrast ratio ขั้นต่ำดังนี้ (ข้อความเทียบกับพื้นหลัง):

ประเภทข้อความ	ขั้นต่ำ (AA)	ขั้นสูง (AAA)
ข้อความปกติ (< 18pt)	4.5:1	7:1
ข้อความขนาดใหญ่ (≥ 18pt หรือ 14pt ตัวหนา)	3:1	4.5:1
UI components, ไอคอน	3:1	—

สูตร contrast ratio:

ratio = (L1 + 0.05) / (L2 + 0.05)

โดย L1 คือค่า relative luminance ของสีที่อ่อนกว่า และ L2 คือสีที่เข้มกว่า

กฎเชิงปฏิบัติ:

• ข้อความสีขาวใช้ได้ดีกับสีที่มีค่า lightness ต่ำกว่าประมาณ 45–50% (ขึ้นอยู่กับ saturation)
• ข้อความสีเข้มใช้ได้ดีกับสีที่มีค่า lightness สูงกว่าประมาณ 50–55%
• สีเดียวกันอาจไม่ผ่าน contrast บนพื้นขาว แต่ผ่านบนพื้นเทาอ่อนได้

อย่าพึ่งพาสีเพียงอย่างเดียว — 1 ใน 12 คนมีภาวะบกพร่องทางการมองเห็นสีในรูปแบบใดรูปแบบหนึ่ง ควรใช้สีคู่กับรูปทรง, ไอคอน, หรือข้อความเสมอ

สีใน dark mode

Dark mode ไม่ใช่แค่การกลับสี palette ของ light mode เพียงอย่างเดียว หลักการสำคัญมีดังนี้:

หลีกเลี่ยงพื้นหลังสีดำสนิท

#000000 สร้างคอนทราสต์ที่รุนแรงกับข้อความและดูหนักเกินไป ให้ใช้สีเทาเข้มแทน:

/* Light mode background */
background: #ffffff;

/* Dark mode background */
background: #0f172a;  /* หรือ #111827, #1a1a2e */

ลด saturation สำหรับพื้นผิวมืด

สีที่มี saturation สูงบนพื้นหลังมืดอาจดูฉูดฉาดและทำให้ตาล้า ให้ลด saturation ของ brand color ใน dark mode เล็กน้อย:

/* Light mode primary */
--primary: hsl(220, 90%, 50%);

/* Dark mode primary — hue เดิม, saturation น้อยลง, lightness มากขึ้น */
--primary: hsl(220, 70%, 65%);

การแสดงความสูงด้วย lightness

ใน dark mode พื้นผิวที่อยู่สูงกว่าจะดูอ่อนกว่า (เหมือนองค์ประกอบที่ยกขึ้นรับแสงได้มากกว่า):

--surface-1: #1e293b;   /* Base */
--surface-2: #253044;   /* Cards */
--surface-3: #2d3a52;   /* Modals, dropdowns */

จิตวิทยาสีตาม hue

Hue	ความเชื่อมโยง	การใช้งานทั่วไป
แดง	ความเร่งด่วน, อันตราย, ความหลงใหล, พลังงาน	CTA, ข้อผิดพลาด, การแจ้งเตือน, ลดราคา
ส้ม	ความอบอุ่น, ความคิดสร้างสรรค์, ความกระตือรือร้น	Highlight, อาหาร, ความบันเทิง
เหลือง	การมองโลกในแง่ดี, ข้อควรระวัง, การดึงดูดความสนใจ	คำเตือน, highlight, ผลิตภัณฑ์เด็ก
เขียว	การเติบโต, ความสำเร็จ, ธรรมชาติ, ความสงบ	สถานะสำเร็จ, การเงิน, สุขภาพ
น้ำเงิน	ความน่าเชื่อถือ, ความมั่นคง, ความเป็นมืออาชีพ	เทคโนโลยี, การเงิน, สาธารณสุข, ลิงก์เริ่มต้น
ม่วง	ความหรูหรา, ความคิดสร้างสรรค์, ความลึกลับ	ระดับ premium, ความงาม, จิตวิญญาณ
ชมพู	ความสนุกสนาน, ความโรแมนติก, ความห่วงใย	ไลฟ์สไตล์, สาธารณสุข, ความงาม
เทา	ความเป็นกลาง, สมดุล, ความซับซ้อน	โครงสร้าง UI, ข้อความรอง

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

workflow การใช้สีในทางปฏิบัติ

1. เริ่มด้วย neutral scale (gray palette)
2. เลือก brand color หลักที่มีคอนทราสต์ชัดเจนบนทั้งพื้นขาวและพื้นมืด
3. กำหนด semantic colors (success, warning, error, info)
4. สร้าง scale เต็มรูปแบบสำหรับแต่ละสี (50–950)
5. ตรวจสอบ contrast ในทุกชุดของข้อความ/พื้นหลัง
6. ทดสอบทั้งใน light mode และ dark mode
7. ตรวจสอบด้วยเครื่องมือจำลองภาวะบกพร่องทางการมองเห็นสี

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