บทบาทของสี (Color Roles)
Color role อธิบายว่าสีแต่ละสีมีไว้ทำอะไร ไม่ใช่แค่ค่าเลข hex เช่น พื้นหลัง ตัวอักษร สีหลัก เส้นขอบ success warning และ danger.
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
บทบาทของสี (Color Roles) คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น
ระดับ
เหมาะกับคนที่เริ่มลงมือทำแล้ว
ใช้เมื่อไหร่
ตอนคุณสร้างธีมหรือชุดสี
อ่านแล้วทำอะไรต่อ
ใช้สี primary กับงานหลักเพียงอย่างเดียว ส่วนงานรอง ๆ ให้ใช้สีรองหรือแบบเส้นขอบแทน
เห็นภาพ: ทริคนี้เป็นยังไง
Primary
#5E8A00 · งานหลัก
Accent
#7C6E2C · เน้น / รอง
Foreground
#212529 · ตัวอักษร
Muted
#76777B · คำบรรยาย
ใช้ตอนไหน?
- ตอนคุณสร้างธีมหรือชุดสี
- ตอนคุณต้องการให้สีของสถานะเหมือนกันทุกที่
- ตอนคุณอยากให้โหมดมืด (dark mode) หรือการเปลี่ยนแบรนด์ในอนาคตทำได้ง่ายขึ้น
ความหมาย
color role (บทบาทของสี) คือชื่อที่บอกว่าสีนั้นเอาไว้ใช้ทำอะไร การตั้งชื่อตามบทบาททำให้ใช้ธีมสีให้เหมือนกันได้ง่ายขึ้นทั้งบนเว็บ Power Apps และรายงาน
การตั้งชื่อบทบาทของสี
ตั้งชื่อ token ตามหน้าที่ ก่อนจะส่งออกให้เข้ากับแต่ละแพลตฟอร์ม
background
foreground
primary
border
success
warning
dangerตัวอย่างการใช้
สีของงานหลัก
ใช้สี primary กับงานหลักเพียงอย่างเดียว ส่วนงานรอง ๆ ให้ใช้สีรองหรือแบบเส้นขอบแทน