Material Design Farbpalette

  • Antworten:2
  • OffenNicht stickyNicht beantwortet
  • Forum-Beiträge: 434

30.10.2014, 19:39:10 via Website

Hallo,

da ich keine Quelle gefunden habe, wo man die neuen Farbwerte in einem File bekommt, habe ich mir selbst die Mühe gemacht und die Werte mal zusammengetragen.
Zu den Namen.. "L" steht (bei mir^^) für light und "S" für solid (dementsprechend einen kräftigeren Farbton).
Google empfiehlt bei "normalen Texten" für dunklere Werte (also alles was kräftiger, als die Standardfarbe ist) eine helle / weiße Schrift zu verwenden. Für Hinweise oder ausgegraute UI-Elementen, etc. gilt das nicht.


<!-- MATERIAL DESIGN COLORS -->

<!-- Primär-Farbe ist der Wert ohne Zusatz
  weitere Infos unter http://www.google.com/design/spec/style/color.html# -->


<!-- "Deep Orange" -->
<color name="DeepOrangeL5">#fbe9e7</color>
<color name="DeepOrangeL4">#ffccbc</color>
<color name="DeepOrangeL3">#ffab91</color>
<color name="DeepOrangeL2">#ff8a65</color>
<color name="DeepOrangeL1">#ff7043</color>
<color name="DeepOrange">#ff5722</color>
<color name="DeepOrangeS1">#f4511e</color>
<color name="DeepOrangeS2">#e64a19</color>
<color name="DeepOrangeS3">#d84315</color>
<color name="DeepOrangeS4">#bf360c</color>

<color name="DeepOrangeA1">#ff9e80</color>
<color name="DeepOrangeA2">#ff6e40</color>
<color name="DeepOrangeA3">#ff3d00</color>
<color name="DeepOrangeA4">#dd2c00</color>


<!-- Grey -->
<color name="GreyL5">#fafafa</color>
<color name="GreyL4">#f5f5f5</color>
<color name="GreyL3">#eeeeee</color>
<color name="GreyL2">#e0e0e0</color>
<color name="GreyL1">#bdbdbd</color>
<color name="Grey">#9e9e9e</color>
<color name="GreyS1">#757575</color>
<color name="GreyS2">#616161</color>
<color name="GreyS3">#424242</color>
<color name="GreyS4">#212121</color>
<color name="GreyS5">#000000</color>


<!-- Yellow -->
<color name="YellowL5">#fffde7</color>
<color name="YellowL4">#fff9c4</color>
<color name="YellowL3">#fff59d</color>
<color name="YellowL2">#fff176</color>
<color name="YellowL1">#ffee58</color>
<color name="Yellow">#ffeb3b</color>
<color name="YellowS1">#fdd835</color>
<color name="YellowS2">#fbc02d</color>
<color name="YellowS3">#f9a825</color>
<color name="YellowS4">#f57f17</color>
<color name="YellowS5">#f57f17</color>

<color name="YellowA1">#ffff8d</color>
<color name="YellowA2">#ffff00</color>
<color name="YellowA3">#ffea00</color>
<color name="YellowA4">#ffd600</color>


<!-- Amber -->
<color name="AmberL5">#fff8e1</color>
<color name="AmberL4">#ffecb3</color>
<color name="AmberL3">#ffe082</color>
<color name="AmberL2">#ffd54f</color>
<color name="AmberL1">#ffca28</color>
<color name="Amber">#ffc107</color>
<color name="AmberS1">#ffb300</color>
<color name="AmberS2">#ffa000</color>
<color name="AmberS3">#ff8f00</color>
<color name="AmberS4">#ff6f00</color>

<color name="AmberA1">#ffe57f</color>
<color name="AmberA2">#ffd740</color>
<color name="AmberA3">#ffc400</color>
<color name="AmberA4">#ffab00</color>


<!-- Orange -->
<color name="OrangeL5">#fff3e0</color>
<color name="OrangeL4">#ffe0b2</color>
<color name="OrangeL3">#ffcc80</color>
<color name="OrangeL2">#ffb74d</color>
<color name="OrangeL1">#ffa726</color>
<color name="Orange">#ff9800</color>
<color name="OrangeS1">#fb8c00</color>
<color name="OrangeS2">#f57c00</color>
<color name="OrangeS3">#ef6c00</color>
<color name="OrangeS4">#e65100</color>

<color name="OrangeA1">#ffd180</color>
<color name="OrangeA2">#ffab40</color>
<color name="OrangeA3">#ff9100</color>
<color name="OrangeA4">#ff6d00</color>


<!-- Green -->
<color name="GreenL5">#d0f8ce</color>
<color name="GreenL4">#a3e9a4</color>
<color name="GreenL3">#72d572</color>
<color name="GreenL2">#42bd41</color>
<color name="GreenL1">#2baf2b</color>
<color name="Green">#259b24</color>
<color name="GreenS1">#0a8f08</color>
<color name="GreenS2">#0a7e07</color>
<color name="GreenS3">#056f00</color>
<color name="GreenS4">#0d5302</color>

<color name="GreenA1">#a2f78d</color>
<color name="GreenA2">#5af158</color>
<color name="GreenA3">#14e715</color>
<color name="GreenA4">#12c700</color>


<!-- LightGreen -->
<color name="LightGreenL5">#f1f8e9</color>
<color name="LightGreenL4">#dcedc8</color>
<color name="LightGreenL3">#c5e1a5</color>
<color name="LightGreenL2">#aed581</color>
<color name="LightGreenL1">#9ccc65</color>
<color name="LightGreen">#8bc34a</color>
<color name="LightGreenS1">#7cb342</color>
<color name="LightGreenS2">#689f38</color>
<color name="LightGreenS3">#558b2f</color>
<color name="LightGreenS4">#33691e</color>

<color name="LightGreenA1">#ccff90</color>
<color name="LightGreenA2">#b2ff59</color>
<color name="LightGreenA3">#76ff03</color>
<color name="LightGreenA4">#64dd17</color>


<!-- Lime -->
<color name="LimeL5">#f9fbe7</color>
<color name="LimeL4">#f0f4c3</color>
<color name="LimeL3">#e6ee9c</color>
<color name="LimeL2">#dce775</color>
<color name="LimeL1">#d4e157</color>
<color name="Lime">#cddc39</color>
<color name="LimeS1">#c0ca33</color>
<color name="LimeS2">#afb42b</color>
<color name="LimeS3">#9e9d24</color>
<color name="LimeS4">#827717</color>

<color name="LimeA1">#f4ff81</color>
<color name="LimeA2">#eeff41</color>
<color name="LimeA3">#c6ff00</color>
<color name="LimeA4">#aeea00</color>


<!-- Blue -->
<color name="BlueL5">#e7e9fd</color>
<color name="BlueL4">#d0d9ff</color>
<color name="BlueL3">#afbfff</color>
<color name="BlueL2">#91a7ff</color>
<color name="BlueL1">#738ffe</color>
<color name="Blue">#5677fc</color>
<color name="BlueS1">#4e6cef</color>
<color name="BlueS2">#455ede</color>
<color name="BlueS3">#3b50ce</color>
<color name="BlueS4">#2a36b1</color>

<color name="BlueA1">#a6baff</color>
<color name="BlueA2">#6889ff</color>
<color name="BlueA3">#4d73ff</color>
<color name="BlueA4">#4d69ff</color>


<!-- Cyan -->
<color name="CyanL5">#e0f7fa</color>
<color name="CyanL4">#b2ebf2</color>
<color name="CyanL3">#80deea</color>
<color name="CyanL2">#4dd0e1</color>
<color name="CyanL1">#26c6da</color>
<color name="Cyan">#00bcd4</color>
<color name="CyanS1">#00acc1</color>
<color name="CyanS2">#0097a7</color>
<color name="CyanS3">#00838f</color>
<color name="CyanS4">#006064</color>

<color name="CyanA1">#84ffff</color>
<color name="CyanA2">#18ffff</color>
<color name="CyanA3">#00e5ff</color>
<color name="CyanA4">#00b8d4</color>


<!-- DeepPurple -->
<color name="DeepPurpleL5">#ede7f6</color>
<color name="DeepPurpleL4">#d1c4e9</color>
<color name="DeepPurpleL3">#b39ddb</color>
<color name="DeepPurpleL2">#9575cd</color>
<color name="DeepPurpleL1">#7e57c2</color>
<color name="DeepPurple">#673ab7</color>
<color name="DeepPurpleS1">#5e35b1</color>
<color name="DeepPurpleS2">#512da8</color>
<color name="DeepPurpleS3">#4527a0</color>
<color name="DeepPurpleS4">#311b92</color>

<color name="DeepPurpleA1">#b388ff</color>
<color name="DeepPurpleA2">#7c4dff</color>
<color name="DeepPurpleA3">#651fff</color>
<color name="DeepPurpleA4">#6200ea</color>


<!-- Indigo -->
<color name="IndigoL5">#e8eaf6</color>
<color name="IndigoL4">#c5cae9</color>
<color name="IndigoL3">#9fa8da</color>
<color name="IndigoL2">#7986cb</color>
<color name="IndigoL1">#5c6bc0</color>
<color name="Indigo">#3f51b5</color>
<color name="IndigoS1">#3949ab</color>
<color name="IndigoS2">#303f9f</color>
<color name="IndigoS3">#283593</color>
<color name="IndigoS4">#1a237e</color>

<color name="IndigoA1">#8c9eff</color>
<color name="IndigoA2">#536dfe</color>
<color name="IndigoA3">#3d5afe</color>
<color name="IndigoA4">#304ffe</color>


<!-- Red -->
<color name="RedL5">#fde0dc</color>
<color name="RedL4">#f9bdbb</color>
<color name="RedL3">#f69988</color>
<color name="RedL2">#f36c60</color>
<color name="RedL1">#e84e40</color>
<color name="Red">#e51c23</color>
<color name="RedS1">#dd191d</color>
<color name="RedS2">#d01716</color>
<color name="RedS3">#c41411</color>
<color name="RedS4">#b0120a</color>

<color name="RedA1">#ff7997</color>
<color name="RedA2">#ff5177</color>
<color name="RedA3">#ff2d6f</color>
<color name="RedA4">#e00032</color>


<!-- Pink -->
<color name="PinkL5">#fce4ec</color>
<color name="PinkL4">#f8bbd0</color>
<color name="PinkL3">#f48fb1</color>
<color name="PinkL2">#f06292</color>
<color name="PinkL1">#ec407a</color>
<color name="Pink">#e91e63</color>
<color name="PinkS1">#d81b60</color>
<color name="PinkS2">#c2185b</color>
<color name="PinkS3">#ad1457</color>
<color name="PinkS4">#880e4f</color>

<color name="PinkA1">#ff80ab</color>
<color name="PinkA2">#ff4081</color>
<color name="PinkA3">#f50057</color>
<color name="PinkA4">#c51162</color>


<!-- Purple -->
<color name="PurpleL5">#f3e5f5</color>
<color name="PurpleL4">#e1bee7</color>
<color name="PurpleL3">#ce93d8</color>
<color name="PurpleL2">#ba68c8</color>
<color name="PurpleL1">#ab47bc</color>
<color name="Purple">#9c27b0</color>
<color name="PurpleS1">#8e24aa</color>
<color name="PurpleS2">#7b1fa2</color>
<color name="PurpleS3">#6a1b9a</color>
<color name="PurpleS4">#4a148c</color>

<color name="PurpleA1">#ea80fc</color>
<color name="PurpleA2">#e040fb</color>
<color name="PurpleA3">#d500f9</color>
<color name="PurpleA4">#aa00ff</color>

<!-- LightBlue -->
<color name="LightBlueL5">#e1f5fe</color>
<color name="LightBlueL4">#b3e5fc</color>
<color name="LightBlueL3">#81d4fa</color>
<color name="LightBlueL2">#4fc3f7</color>
<color name="LightBlueL1">#29b6f6</color>
<color name="LightBlue">#03a9f4</color>
<color name="LightBlueS1">#039be5</color>
<color name="LightBlueS2">#0288d1</color>
<color name="LightBlueS3">#0277bd</color>
<color name="LightBlueS4">#01579b</color>

<color name="LightBlueA1">#80d8ff</color>
<color name="LightBlueA2">#40c4ff</color>
<color name="LightBlueA3">#00b0ff</color>
<color name="LightBlueA4">#0091ea</color>


<!-- Teal -->
<color name="TealL5">#e0f2f1</color>
<color name="TealL4">#b2dfdb</color>
<color name="TealL3">#80cbc4</color>
<color name="TealL2">#4db6ac</color>
<color name="TealL1">#26a69a</color>
<color name="Teal">#009688</color>
<color name="TealS1">#00897b</color>
<color name="TealS2">#00796b</color>
<color name="TealS3">#00695c</color>
<color name="TealS4">#004d40</color>

<color name="TealA1">#a7ffeb</color>
<color name="TealA2">#64ffda</color>
<color name="TealA3">#1de9b6</color>
<color name="TealA4">#00bfa5</color>


<!-- Blue Gray -->
<color name="BlueGreyL5">#eceff1</color>
<color name="BlueGreyL4">#cfd8dc</color>
<color name="BlueGreyL3">#b0bec5</color>
<color name="BlueGreyL2">#90a4ae</color>
<color name="BlueGreyL1">#78909c</color>
<color name="BlueGrey">#607d8b</color>
<color name="BlueGreyS1">#607d8b</color>
<color name="BlueGreyS2">#546e7a</color>
<color name="BlueGreyS3">#455a64</color>
<color name="BlueGreyS4">#37474f</color>
<color name="BlueGreyS5">#263238</color>


<!-- Brown -->
<color name="BrownL5">#efebe9</color>
<color name="BrownL4">#d7ccc8</color>
<color name="BrownL3">#bcaaa4</color>
<color name="BrownL2">#a1887f</color>
<color name="BrownL1">#8d6e63</color>
<color name="Brown">#795548</color>
<color name="BrownS1">#6d4c41</color>
<color name="BrownS2">#5d4037</color>
<color name="BrownS3">#4e342e</color>
<color name="BrownS4">#3e2723</color>

... oder hier in einer Datei

Beste Grüße
Martin

— geändert am 30.10.2014, 19:41:10

Open Source

Antworten
  • Forum-Beiträge: 434

30.10.2014, 21:25:04 via Website

Jopp, da hab ich die Farben auch her. Hab die Farben nur immer gern in der IDE an Bord. :)

Open Source

Antworten