กระบวนการสกัดสีเด่น (Color Extraction) โดยใช้ HCT Color Space และ Color Quantization เป็นหัวใจสำคัญของระบบออกแบบ Material You (Material Design 3) ของ Google ซึ่งแก้ปัญหาดั้งเดิมของระบบสีอย่าง sRGB, HSL หรือ HSV ที่ค่าความสว่างไม่สอดคล้องกับการรับรู้จริงของตามนุษย์
กระบวนการนี้ทำงานร่วมกันเป็น Pipeline ตั้งแต่การลดทอนจำนวนพิกเซลไปจนถึงการแมปเป็นโทนสี UI
การลดทอนสี (Color Quantization)
ภาพถ่ายทั่วไปมีสีได้นับล้านสี หากนำทุกสีมาวิเคราะห์จะสิ้นเปลืองพลังประมวลผลสูง จึงต้องจัดกลุ่มสีที่ใกล้เคียงกันให้เหลือเฉพาะสีหลัก (Dominant Palettes)
Google นิยมใช้อัลกอริทึม Wu’s Quantizer หรือดัดแปลงร่วมกับ K-Means / Octree
Plain Text
Plain Text
ภาพต้นฉบับ (ล้านสี) ──> Wu's Quantization (สกัดกล่องสี) ──> รวมกลุ่มสีใกล้เคียง (Celebi) ──> สีตัวแทน ~16–128 สี
- Wu’s Quantizer (Optimal Box Partitioning)
- แปลงข้อมูลสีพิกเซลลงในฮิสโตแกรม 3 มิติ (RGB)
- ใช้วิธีทางสถิติแบ่งกล่องสี (Bounding Box) โดยตัดจุดที่ทำให้ ค่าความแปรปรวน (Variance) รวมลดลงมากที่สุด ในแต่ละรอบ
- ได้ผลลัพธ์เป็นกลุ่มสี (Clusters) ที่เป็นตัวแทนของภาพอย่างแม่นยำและทำงานได้รวดเร็ว
- Cluster Merging / Scoring
- นำสีที่ได้มารวมกลุ่มที่อยู่ใกล้กันเกินไปด้วยระยะห่างทางสี
- คัดกรองสีที่ไม่มีความน่าสนใจ เช่น สีพื้นหลังขาว/ดำสนิท หรือสีเทาที่ไม่สื่อถึงอารมณ์ของภาพ
ทำความรู้จัก HCT Color Space
ระบบสีแบบเดิมอย่าง RGB หรือ HSL มีปัญหาเรื่อง Perceptual Non-uniformity เช่น สีเหลืองบริสุทธิ์กับสีน้ำเงินบริสุทธิ์ใน HSL มีค่า Lightness ($L = 50\%$) เท่ากัน แต่สายตามนุษย์มองว่าสีเหลืองสว่างกว่าสีน้ำเงินมาก
Google จึงสร้าง HCT โดยผสมผสานจุดเด่นของ 2 โมเดลสี:
- H (Hue)
ใช้จาก CAM16 (องศาของสี $0^\circ – 360^\circ$ โดยคำนึงถึงสภาพแสงแวดล้อม) - C (Chroma)
ใช้จาก CAM16 (ความอิ่มตัวและความสดของสีตามที่ตามนุษย์มองเห็นจริง ไม่ใช่ saturation ทางคณิตศาสตร์) - T (Tone)
ใช้ $L^*$ จาก CIELAB ($0 – 100$ แทน Perceived Luminance หรือความสว่างตามการรับรู้ของสายตามนุษย์)
HTML
<code> CAM16 CIELAB
┌───────────────┐ ┌───────────────┐
│ Hue Chroma │ + │ Tone (L*) │ ===> HCT
│ (0°-360°) (ความสด) │ │ (0-100) │
└───────────────┘ └───────────────┘
ข้อได้เปรียบสำคัญของ Tone ($T$)
หากกำหนดให้ข้อความมี $T=90$ และพื้นหลังมี $T=40$ ค่าความต่าง $\Delta T = 50$ จะการันตี Contrast Ratio ที่ผ่านเกณฑ์การเข้าถึง (Accessibility เช่น WCAG) เสมอ ไม่ว่า Hue จะเป็นสีแดง น้ำเงิน หรือเหลือง
ขั้นตอนการให้คะแนนและคัดเลือกสีหลัก (Scoring & Filtering)
เมื่อได้พิกเซลตัวแทนและแปลงเป็น HCT แล้ว อัลกอริทึมจะให้คะแนน (Ranking) เพื่อหาสีที่เป็น Source Color (Seed Color) โดยใช้สมการถ่วงน้ำหนัก
- Chroma Filter
สีที่มี $C < 16$ (สีเทา ตุ่น หรือซีดเกินไป) จะถูกตัดทิ้งหรือลดคะแนนลงอย่างมาก เพราะไม่สามารถนำมาสร้างพาเล็ตต์ที่มีชีวิตชีวาได้ - Proportion
สัดส่วนของพื้นที่สีนั้นในภาพ (สีที่พบมากจะได้คะแนนพื้นฐานสูง) - Chroma Boost
เพิ่มน้ำหนักให้กับสีที่มีความสดเป็นพิเศษ เพื่อหลีกเลี่ยงการเลือกสีพื้นหลังที่กลืนไปกับภาพ
สูตรแนวคิดในการให้คะแนนแต่ละคลัสเตอร์สี
$$\text{Score} = (\text{Proportion} \times w_p) + ((\text{Chroma} – C_{\text{target}}) \times w_c)$$
สีที่ได้คะแนนสูงสุดจะถูกเลือกเป็น Seed Color เพื่อส่งต่อไปยังขั้นตอนการสร้าง Theme
Gamut Mapping (การจำกัดขอบเขตสี)
จุดที่ท้าทายที่สุดของ HCT คือ: ไม่ใช่ทุกค่า $(H, C, T)$ จะมีอยู่จริงในขอบเขต sRGB
ตัวอย่างเช่น ไม่สามารถมี “สีเหลืองสดจัด ($C=90$) ที่มี Tone มืดมาก ($T=10$)” ในจอภาพทั่วไปได้
อัลกอริทึมต้องทำ Gamut Mapping (Binary Search in Chroma)
- กำหนดค่า $H$ และ $T$ คงที่ไว้เสมอ (เพราะ $T$ จำเป็นต่อ Contrast และการเข้าถึง)
- ทำ Binary Search ลดค่า $C$ ลงทีละนิด จนกว่าจะได้ค่าสี $(H, C_{\text{new}}, T)$ ที่สามารถแปลงกลับมาเป็นค่า sRGB ($0 \le R, G, B \le 255$) ได้พอดี
การสร้าง Tonal Palettes สำหรับ UI
เมื่อได้ Seed Color ($H, C, T$) อัลกอริทึมจะล็อกคู่สี $(H, C)$ แล้วปรับเฉพาะค่า $T$ (Tone) ตั้งแต่ $0$ ถึง $100$ เพื่อสร้างชุดสี
| Tone (T) | บทบาทในระบบ UI (Material 3) |
| $T = 100$ | สีขาวบริสุทธิ์ |
| $T = 90$ | Container Background (โทนสว่าง) |
| $T = 80$ | Primary Accent (สำหรับ Dark Mode) |
| $T = 40$ | Primary Accent (สำหรับ Light Mode) |
| $T = 10$ | ตัวอักษรและไอคอนบน Container สว่าง |
| $T = 0$ | สีดำบริสุทธิ์ |
ผลลัพธ์คือ ระบบสามารถสร้างโทนสีที่เข้าคู่กันอัตโนมัติจากภาพพื้นหลัง โดยยังคงรักษา Contrast และมาตรฐาน Accessibility (WCAG 2.1 / 2.2) ได้อย่างแม่นยำ 100%