Material Design은 다양한 색상을 정의합니다. 이는 시각화에 사용됩니다. 가능한 경우 색상 값을 사용하여 색상을 선언하는 것이 권장됩니다. 이를 통해 대비와 디자인이 나중에 맞춰질 수 있습니다. 특히 밝은 디자인에서 어두운 디자인으로 전환할 때 텍스트가 읽을 수 없게 될 수 있으므로 특히 주의해야 합니다.
팁: 프로젝트 설정의 시각화 탭에서 색상을 변경할 수 있습니다. 이를 통해 개별적인 디자인을 만들 수 있습니다.
이것들은 시각화의 모든 가능한 배경색상입니다.
| 이름 | 값 | 색상 | 텍스트 색상 |
|---|---|---|---|
| 빨강 | 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 |