Material Design กำหนดสีต่างๆ สีเหล่านี้ถูกใช้ในการแสดงผล การแนะนำคือ ถ้ามีความเป็นไปได้ให้ใช้ค่าสีเพื่อประกาศสี ด้วยวิธีนี้จะทำให้มีความมั่นใจว่าคอนทราสต์และการออกแบบในภายหลังจะเข้ากันได้ สิ่งนี้ต้องให้ความสนใจอย่างพิเศษเนื่องจากเมื่อเปลี่ยนจากการออกแบบจากสีอ่อนเป็นสีเข้มข้อความอาจไม่สามารถอ่านได้
Tip: คุณสามารถแก้ไขสีในโปรเจกต์ตั้งค่าด้านบาร์ Visualization ได้ ด้วยวิธีนี้จะทำให้ออกแบบที่เป็นเอกลักษณ์ได้
นี่คือสีพื้นหลังทั้งหมดของการแสดงผล
| ชื่อ | ค่า | สี | สีข้อความ |
|---|---|---|---|
| แดง | red | #D32F2F | #FFFFFF |
| ชมพู | pink | #C2185B | #FFFFFF |
| ม่วง | purple | #7B1FA2 | #FFFFFF |
| ม่วงเข้ม | deep_purple | #512DA8 | #FFFFFF |
| น้ำเงินอินดิโก้ | indigo | #303F9F | #FFFFFF |
| น้ำเงิน | blue | #1976D2 | #FFFFFF |
| น้ำเงินอ่อน | light_blue | #0288D1 | #FFFFFF |
| เขียวน้ำเงิน | cyan | #0097A7 | #FFFFFF |
| เขียวทะเล | teal | #00796B | #FFFFFF |
| เขียว | green | #388E3C | #FFFFFF |
| เขียวอ่อน | light_green | #689F38 | #FFFFFF |
| เขียวเหลืองอ่อน | lime | #AFB42B | #000000 |
| เหลือง | yellow | #FBC02D | #000000 |
| แอมเบอร์ | amber | #FFA000 | #000000 |
| ส้ม | orange | #F57C00 | #000000 |
| ส้มเข้ม | deep_orange | #E64A19 | #FFFFFF |
| ข้อผิดพลาด | error | #B00020 | #FFFFFF |
สีเหล่านี้แนะนำให้ใช้กับข้อความ และถูกใช้ในสัญลักษณ์บนแผนผังเพื่อแสดงคอนทราสต์ที่เพียงพอ
| ชื่อ | ค่า | สี | สีข้อความ |
|---|---|---|---|
| แดง | red | #F44336 | #FFFFFF |
| ชมพู | pink | #E91E63 | #FFFFFF |
| ม่วง | purple | #9C27B0 | #FFFFFF |
| ม่วงเข้ม | deep_purple | #673AB7 | #FFFFFF |
| น้ำเงินอินดิโก้ | indigo | #3F51B5 | #FFFFFF |
| น้ำเงิน | blue | #2196F3 | #FFFFFF |
| น้ำเงินอ่อน | light_blue | #03A9F4 | #000000 |
| เขียวน้ำเงิน | cyan | #00BCD4 | #000000 |
| เขียวทะเล | teal | #009688 | #FFFFFF |
| เขียว | green | #4CAF50 | #000000 |
| เขียวอ่อน | light_green | #8BC34A | #000000 |
| เขียวเหลืองอ่อน | lime | #CDDC39 | #000000 |
| เหลือง | yellow | #FFEB3B | #000000 |
| แอมเบอร์ | amber | #FFC107 | #000000 |
| ส้ม | orange | #FF9800 | #000000 |
| ส้มเข้ม | deep_orange | #FF5722 | #FFFFFF |
| น้ำตาล | brown | #795548 | #FFFFFF |
| เทา | gray | #9E9E9E | #000000 |
| น้ำเงินเทา | blue_gray | #607D8B | #FFFFFF |
| ข้อผิดพลาด | error | #B00020 | #FFFFFF |