Color Playground คืออะไร?
Color Playground คือสนามทดลองสีสำหรับนักออกแบบและนักพัฒนา เลือกสี แปลงค่า HEX/RGB/HSL สร้าง Gradient และชุดสี พร้อมตรวจ Contrast ตามมาตรฐาน WCAG
ใช้ทำอะไรได้บ้าง
- หาค่าสีในรูปแบบต่าง ๆ เพื่อใช้ใน CSS
- สร้าง Gradient พื้นหลัง
- ตรวจว่าสีตัวอักษรอ่านง่ายพอหรือไม่
- สร้าง Design Tokens เป็น CSS Variables
เครื่องมือย่อยในหมวดนี้
- Color Picker
- HEX to RGB
- RGB to HEX
- HSL Converter
- Gradient Generator
- Palette Generator
- Contrast Checker
- Complementary Color
- CSS Color Export
วิธีใช้งาน
- เลือกสีด้วย Picker หรือพิมพ์ค่า
- ดูค่าที่แปลงแล้วและคัดลอกรูปแบบที่ต้องการ
- ใน Gradient เพิ่ม/ลบจุดสี ปรับมุม แล้วคัดลอก CSS
ตัวอย่าง Input / Output
Input
#8B5CF6
Output
rgb(139, 92, 246) · hsl(258.3, 89.5%, 66.3%)
เหมาะกับงานแบบไหน
- ทำ Theme ของเว็บ
- ตรวจ Accessibility
- สร้างชุดสีแบรนด์
ข้อจำกัดที่ควรรู้
- การแปลง HSL ↔ RGB อาจคลาดเคลื่อน ±1 จากการปัดเศษ
- Contrast ใช้สูตร WCAG 2.x (ยังไม่ใช่ APCA)
คำถามที่พบบ่อย (FAQ)
WCAG AA ต้องมี Contrast เท่าไร?
ข้อความปกติต้องอย่างน้อย 4.5:1 ข้อความขนาดใหญ่ (18pt หรือ 14pt ตัวหนา) อย่างน้อย 3:1 ส่วน AAA ต้อง 7:1 และ 4.5:1
Complementary Color คืออะไร?
สีที่อยู่ตรงข้ามบนวงล้อสี (หมุน Hue 180°) ใช้สร้างความโดดเด่น