Material Design määrittää eri värejä. Nämä käytetään visualisoinnissa. Suositellaan, jos mahdollista, käyttämään väriarvoja värien määrittelemiseen. Näin varmistetaan, että kontrasti ja suunnittelu sopivat myöhemmin yhteen. Tämä on erityisen huomioitavaa, koska teksti voi tulla lukemattomaksi, kun vaihdetaan suunnittelusta vaaleasta pimeään.
Vinkki: Voit muokata värejä projektin asetuksissa Visualisointi-välilehdellä. Näin voit luoda yksilöllisen suunnittelun.
Nämä ovat kaikki mahdolliset visualisoinnin taustavärit.
| Nimi | Arvo | Väri | Tekstiväri |
|---|---|---|---|
| Punainen | red | #D32F2F | #FFFFFF |
| Pinkki | pink | #C2185B | #FFFFFF |
| Violetti | purple | #7B1FA2 | #FFFFFF |
| Tummanvioletti | deep_purple | #512DA8 | #FFFFFF |
| Indigonsininen | indigo | #303F9F | #FFFFFF |
| Sininen | blue | #1976D2 | #FFFFFF |
| Vaaleansininen | light_blue | #0288D1 | #FFFFFF |
| Tyrkiisi | cyan | #0097A7 | #FFFFFF |
| Merivihreä | teal | #00796B | #FFFFFF |
| Vihreä | green | #388E3C | #FFFFFF |
| Vaaleanvihreä | light_green | #689F38 | #FFFFFF |
| Limevihreä | lime | #AFB42B | #000000 |
| Keltainen | yellow | #FBC02D | #000000 |
| Amber | amber | #FFA000 | #000000 |
| Oranssi | orange | #F57C00 | #000000 |
| Tummanoranssi | deep_orange | #E64A19 | #FFFFFF |
| Virhe | error | #B00020 | #FFFFFF |
Nämä värit suositellaan teksteille ja niitä käytetään symboleissa pohjapiirroksessa, jotta varmistetaan riittävä kontrasti.
| Nimi | Arvo | Väri | Tekstiväri |
|---|---|---|---|
| Punainen | red | #F44336 | #FFFFFF |
| Pinkki | pink | #E91E63 | #FFFFFF |
| Violetti | purple | #9C27B0 | #FFFFFF |
| Tummanvioletti | deep_purple | #673AB7 | #FFFFFF |
| Indigonsininen | indigo | #3F51B5 | #FFFFFF |
| Sininen | blue | #2196F3 | #FFFFFF |
| Vaaleansininen | light_blue | #03A9F4 | #000000 |
| Tyrkiisi | cyan | #00BCD4 | #000000 |
| Merivihreä | teal | #009688 | #FFFFFF |
| Vihreä | green | #4CAF50 | #000000 |
| Vaaleanvihreä | light_green | #8BC34A | #000000 |
| Limevihreä | lime | #CDDC39 | #000000 |
| Keltainen | yellow | #FFEB3B | #000000 |
| Amber | amber | #FFC107 | #000000 |
| Oranssi | orange | #FF9800 | #000000 |
| Tummanoranssi | deep_orange | #FF5722 | #FFFFFF |
| Ruskea | brown | #795548 | #FFFFFF |
| Harmaa | gray | #9E9E9E | #000000 |
| Siniharmaa | blue_gray | #607D8B | #FFFFFF |
| Virhe | error | #B00020 | #FFFFFF |