Color Theory in Modern UI Design

ทฤษฎีสีเป็นพื้นฐานสำคัญในการสร้างประสบการณ์ผู้ใช้ที่ดี (UX) และการออกแบบอินเทอร์เฟซ (UI) ที่สวยงามและใช้งานได้จริง

วงจรสี (Color Wheel)

1. สีหลัก (Primary Colors)

:root {
  --primary-red: #FF0000;
  --primary-yellow: #FFFF00;
  --primary-blue: #0000FF;
}

• แดง (#FF0000)
• เหลือง (#FFFF00)
• น้ำเงิน (#0000FF)

2. สีรอง (Secondary Colors)

:root {
  --secondary-orange: #FFA500;
  --secondary-green: #008000;
  --secondary-purple: #800080;
}

• ส้ม (#FFA500) = แดง + เหลือง
• เขียว (#008000) = เหลือง + น้ำเงิน
• ม่วง (#800080) = น้ำเงิน + แดง

3. สีตติยภูมิ (Tertiary Colors)

:root {
  --tertiary-red-orange: #FF4500;
  --tertiary-yellow-green: #ADFF2F;
  --tertiary-blue-purple: #8A2BE2;
}

• ส้มแดง (#FF4500)
• เขียวเหลือง (#ADFF2F)
• ม่วงน้ำเงิน (#8A2BE2)

การใช้สีใน UI Design

1. สีหลัก (Primary Color)

:root {
  --primary: #1E90FF; /* DodgerBlue */
}

.button-primary {
  background-color: var(--primary);
  color: white;
}

• ใช้สำหรับปุ่มหลัก (Primary Buttons)
• ใช้สำหรับลิงก์และข้อความสำคัญ
• ใช้สร้างจุดสนใจ (Call to Action)

2. สีรอง (Secondary Color)

:root {
  --secondary: #FF6347; /* Tomato */
}

.button-secondary {
  background-color: var(--secondary);
  color: white;
}

• ใช้สำหรับปุ่มรอง (Secondary Buttons)
• ใช้สำหรับไอคอนและกราฟิก
• ใช้สร้างความหลากหลาย

3. สีพื้นหลัง (Background Color)

body {
  background-color: #F5F5F5; /* Light Gray */
}

.text-primary {
  color: #333333; /* Dark Gray */
}

• ควรเป็นสีที่สบายตา
• ควรมี Contrast Ratio กับข้อความอย่างน้อย 4.5:1
• หลีกเลี่ยงการใช้สีสดใส

หลักการเลือกสี

1. ความสม่ำเสมอ (Consistency)

:root {
  --primary: #1E90FF;
  --secondary: #FF6347;
  --background: #F5F5F5;
  --text: #333333;
}

• ใช้ชุดสีเดียวกันทั่วทั้งแอปพลิเคชัน
• กำหนด Color Palette ที่ชัดเจน

2. ความเหมาะสมกับแบรนด์ (Brand Identity)

:root {
  --brand-primary: #FF0000; /* Red */
  --brand-secondary: #FFFFFF; /* White */
}

• เลือกสีที่สื่อถึงแบรนด์
• ใช้สีตาม Brand Guidelines

3. ความสะดวกในการอ่าน (Readability)

.text-primary {
  color: var(--text);
  background-color: var(--background);
}

• ใช้สีที่ตัดกันชัดเจน
• ทดสอบกับผู้ใช้จริง

4. ความเข้าถึง (Accessibility)

:root {
  --accessible-primary: #005A9C; /* Dark Blue */
  --accessible-secondary: #FFA500; /* Orange */
}

• ตรวจสอบ Contrast Ratio
• ใช้เครื่องมือตรวจสอบ Accessibility

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

1. Color Palette Generators

• Coolors
• Adobe Color
• Paletton

2. Accessibility Checkers

• WebAIM Contrast Checker
• Colorable
• Accessible Colors

Best Practices

• ใช้สีอย่างมีจุดประสงค์
• จำกัดจำนวนสีที่ใช้
• ทดสอบกับผู้ใช้จริง
• ปรับปรุงตาม Feedback

ทรัพยากรเพิ่มเติม

• Material Design Color System
• IBM Design Language - Color
• Nielsen Norman Group - Color Theory

"Colors, like features, follow the changes of the emotions." - Pablo Picasso