Home

Material Design Colors XML Resource File

In my opinion Material Design is the most beautiful, elegant design concept ever created. Before material came into existence I was a big fan Metro Design of Windows. But Material forced me to break up with Metro. Google have done an amazing job in curating the colors, details and depth of each component in the design so that they will feel like real objects.

These days, in all almost all projects, regardless of the platform, I use material design. I literally fell in love with it. But it is a mess when it comes to copy and paste the material design color codes from the docs. So to simplify this process I prepared a resource file. This material design colors XML file can help you to pick colors real quick.

All these color codes are extracted from the official Material Design Documentation Color Palette. Here is the gist of XML file,

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="black_1000">#000000</color>
    <color name="white_1000">#FFFFFF</color>

    <color name="red_50">#FFEBEE</color>
    <color name="red_100">#FFCDD2</color>
    <color name="red_200">#EF9A9A</color>
    <color name="red_300">#E57373</color>
    <color name="red_400">#EF5350</color>
    <color name="red_500">#F44336</color>
    <color name="red_600">#E53935</color>
    <color name="red_700">#D32F2F</color>
    <color name="red_800">#C62828</color>
    <color name="red_900">#B71C1C</color>
    <color name="red_A100">#FF8A80</color>
    <color name="red_A200">#FF5252</color>
    <color name="red_A400">#FF1744</color>
    <color name="red_A700">#D50000</color>
    
    <color name="pink_50">#FCE4EC</color>
    <color name="pink_100">#F8BBD0</color>
    <color name="pink_200">#F48FB1</color>
    <color name="pink_300">#F06292</color>
    <color name="pink_400">#EC407A</color>
    <color name="pink_500">#E91E63</color>
    <color name="pink_600">#D81B60</color>
    <color name="pink_700">#C2185B</color>
    <color name="pink_800">#AD1457</color>
    <color name="pink_900">#880E4F</color>
    <color name="pink_A100">#FF80AB</color>
    <color name="pink_A200">#FF4081</color>
    <color name="pink_A400">#F50057</color>
    <color name="pink_A700">#C51162</color>
    
    <color name="purple_50">#F3E5F5</color>
    <color name="purple_100">#E1BEE7</color>
    <color name="purple_200">#CE93D8</color>
    <color name="purple_300">#BA68C8</color>
    <color name="purple_400">#AB47BC</color>
    <color name="purple_500">#9C27B0</color>
    <color name="purple_600">#8E24AA</color>
    <color name="purple_700">#7B1FA2</color>
    <color name="purple_800">#6A1B9A</color>
    <color name="purple_900">#4A148C</color>
    <color name="purple_A100">#EA80FC</color>
    <color name="purple_A200">#E040FB</color>
    <color name="purple_A400">#D500F9</color>
    <color name="purple_A700">#AA00FF</color>
    
    <color name="deep_purple_50">#EDE7F6</color>
    <color name="deep_purple_100">#D1C4E9</color>
    <color name="deep_purple_200">#B39DDB</color>
    <color name="deep_purple_300">#9575CD</color>
    <color name="deep_purple_400">#7E57C2</color>
    <color name="deep_purple_500">#673AB7</color>
    <color name="deep_purple_600">#5E35B1</color>
    <color name="deep_purple_700">#512DA8</color>
    <color name="deep_purple_800">#4527A0</color>
    <color name="deep_purple_900">#311B92</color>
    <color name="deep_purple_A100">#B388FF</color>
    <color name="deep_purple_A200">#7C4DFF</color>
    <color name="deep_purple_A400">#651FFF</color>
    <color name="deep_purple_A700">#6200EA</color>
    
    <color name="indigo_50">#E8EAF6</color>
    <color name="indigo_100">#C5CAE9</color>
    <color name="indigo_200">#9FA8DA</color>
    <color name="indigo_300">#7986CB</color>
    <color name="indigo_400">#5C6BC0</color>
    <color name="indigo_500">#3F51B5</color>
    <color name="indigo_600">#3949AB</color>
    <color name="indigo_700">#303F9F</color>
    <color name="indigo_800">#283593</color>
    <color name="indigo_900">#1A237E</color>
    <color name="indigo_A100">#8C9EFF</color>
    <color name="indigo_A200">#536DFE</color>
    <color name="indigo_A400">#3D5AFE</color>
    <color name="indigo_A700">#304FFE</color>
    
    <color name="blue_50">#E3F2FD</color>
    <color name="blue_100">#BBDEFB</color>
    <color name="blue_200">#90CAF9</color>
    <color name="blue_300">#64B5F6</color>
    <color name="blue_400">#42A5F5</color>
    <color name="blue_500">#2196F3</color>
    <color name="blue_600">#1E88E5</color>
    <color name="blue_700">#1976D2</color>
    <color name="blue_800">#1565C0</color>
    <color name="blue_900">#0D47A1</color>
    <color name="blue_A100">#82B1FF</color>
    <color name="blue_A200">#448AFF</color>
    <color name="blue_A400">#2979FF</color>
    <color name="blue_A700">#2962FF</color>
    
    <color name="light_blue_50">#E1F5FE</color>
    <color name="light_blue_100">#B3E5FC</color>
    <color name="light_blue_200">#81D4fA</color>
    <color name="light_blue_300">#4fC3F7</color>
    <color name="light_blue_400">#29B6FC</color>
    <color name="light_blue_500">#03A9F4</color>
    <color name="light_blue_600">#039BE5</color>
    <color name="light_blue_700">#0288D1</color>
    <color name="light_blue_800">#0277BD</color>
    <color name="light_blue_900">#01579B</color>
    <color name="light_blue_A100">#80D8FF</color>
    <color name="light_blue_A200">#40C4FF</color>
    <color name="light_blue_A400">#00B0FF</color>
    <color name="light_blue_A700">#0091EA</color>
    
    <color name="cyan_50">#E0F7FA</color>
    <color name="cyan_100">#B2EBF2</color>
    <color name="cyan_200">#80DEEA</color>
    <color name="cyan_300">#4DD0E1</color>
    <color name="cyan_400">#26C6DA</color>
    <color name="cyan_500">#00BCD4</color>
    <color name="cyan_600">#00ACC1</color>
    <color name="cyan_700">#0097A7</color>
    <color name="cyan_800">#00838F</color>
    <color name="cyan_900">#006064</color>
    <color name="cyan_A100">#84FFFF</color>
    <color name="cyan_A200">#18FFFF</color>
    <color name="cyan_A400">#00E5FF</color>
    <color name="cyan_A700">#00B8D4</color>
    
    <color name="teal_50">#E0F2F1</color>
    <color name="teal_100">#B2DFDB</color>
    <color name="teal_200">#80CBC4</color>
    <color name="teal_300">#4DB6AC</color>
    <color name="teal_400">#26A69A</color>
    <color name="teal_500">#009688</color>
    <color name="teal_600">#00897B</color>
    <color name="teal_700">#00796B</color>
    <color name="teal_800">#00695C</color>
    <color name="teal_900">#004D40</color>
    <color name="teal_A100">#A7FFEB</color>
    <color name="teal_A200">#64FFDA</color>
    <color name="teal_A400">#1DE9B6</color>
    <color name="teal_A700">#00BFA5</color>
    
    <color name="green_50">#E8F5E9</color>
    <color name="green_100">#C8E6C9</color>
    <color name="green_200">#A5D6A7</color>
    <color name="green_300">#81C784</color>
    <color name="green_400">#66BB6A</color>
    <color name="green_500">#4CAF50</color>
    <color name="green_600">#43A047</color>
    <color name="green_700">#388E3C</color>
    <color name="green_800">#2E7D32</color>
    <color name="green_900">#1B5E20</color>
    <color name="green_A100">#B9F6CA</color>
    <color name="green_A200">#69F0AE</color>
    <color name="green_A400">#00E676</color>
    <color name="green_A700">#00C853</color>
    
    <color name="light_green_50">#F1F8E9</color>
    <color name="light_green_100">#DCEDC8</color>
    <color name="light_green_200">#C5E1A5</color>
    <color name="light_green_300">#AED581</color>
    <color name="light_green_400">#9CCC65</color>
    <color name="light_green_500">#8BC34A</color>
    <color name="light_green_600">#7CB342</color>
    <color name="light_green_700">#689F38</color>
    <color name="light_green_800">#558B2F</color>
    <color name="light_green_900">#33691E</color>
    <color name="light_green_A100">#CCFF90</color>
    <color name="light_green_A200">#B2FF59</color>
    <color name="light_green_A400">#76FF03</color>
    <color name="light_green_A700">#64DD17</color>
    
    <color name="lime_50">#F9FBE7</color>
    <color name="lime_100">#F0F4C3</color>
    <color name="lime_200">#E6EE9C</color>
    <color name="lime_300">#DCE775</color>
    <color name="lime_400">#D4E157</color>
    <color name="lime_500">#CDDC39</color>
    <color name="lime_600">#C0CA33</color>
    <color name="lime_700">#A4B42B</color>
    <color name="lime_800">#9E9D24</color>
    <color name="lime_900">#827717</color>
    <color name="lime_A100">#F4FF81</color>
    <color name="lime_A200">#EEFF41</color>
    <color name="lime_A400">#C6FF00</color>
    <color name="lime_A700">#AEEA00</color>
    
    <color name="yellow_50">#FFFDE7</color>
    <color name="yellow_100">#FFF9C4</color>
    <color name="yellow_200">#FFF590</color>
    <color name="yellow_300">#FFF176</color>
    <color name="yellow_400">#FFEE58</color>
    <color name="yellow_500">#FFEB3B</color>
    <color name="yellow_600">#FDD835</color>
    <color name="yellow_700">#FBC02D</color>
    <color name="yellow_800">#F9A825</color>
    <color name="yellow_900">#F57F17</color>
    <color name="yellow_A100">#FFFF82</color>
    <color name="yellow_A200">#FFFF00</color>
    <color name="yellow_A400">#FFEA00</color>
    <color name="yellow_A700">#FFD600</color>
    
    <color name="amber_50">#FFF8E1</color>
    <color name="amber_100">#FFECB3</color>
    <color name="amber_200">#FFE082</color>
    <color name="amber_300">#FFD54F</color>
    <color name="amber_400">#FFCA28</color>
    <color name="amber_500">#FFC107</color>
    <color name="amber_600">#FFB300</color>
    <color name="amber_700">#FFA000</color>
    <color name="amber_800">#FF8F00</color>
    <color name="amber_900">#FF6F00</color>
    <color name="amber_A100">#FFE57F</color>
    <color name="amber_A200">#FFD740</color>
    <color name="amber_A400">#FFC400</color>
    <color name="amber_A700">#FFAB00</color>
    
    <color name="orange_50">#FFF3E0</color>
    <color name="orange_100">#FFE0B2</color>
    <color name="orange_200">#FFCC80</color>
    <color name="orange_300">#FFB74D</color>
    <color name="orange_400">#FFA726</color>
    <color name="orange_500">#FF9800</color>
    <color name="orange_600">#FB8C00</color>
    <color name="orange_700">#F57C00</color>
    <color name="orange_800">#EF6C00</color>
    <color name="orange_900">#E65100</color>
    <color name="orange_A100">#FFD180</color>
    <color name="orange_A200">#FFAB40</color>
    <color name="orange_A400">#FF9100</color>
    <color name="orange_A700">#FF6D00</color>
    
    <color name="deep_orange_50">#FBE9A7</color>
    <color name="deep_orange_100">#FFCCBC</color>
    <color name="deep_orange_200">#FFAB91</color>
    <color name="deep_orange_300">#FF8A65</color>
    <color name="deep_orange_400">#FF7043</color>
    <color name="deep_orange_500">#FF5722</color>
    <color name="deep_orange_600">#F4511E</color>
    <color name="deep_orange_700">#E64A19</color>
    <color name="deep_orange_800">#D84315</color>
    <color name="deep_orange_900">#BF360C</color>
    <color name="deep_orange_A100">#FF9E80</color>
    <color name="deep_orange_A200">#FF6E40</color>
    <color name="deep_orange_A400">#FF3D00</color>
    <color name="deep_orange_A700">#DD2600</color>
    
    <color name="brown_50">#EFEBE9</color>
    <color name="brown_100">#D7CCC8</color>
    <color name="brown_200">#BCAAA4</color>
    <color name="brown_300">#A1887F</color>
    <color name="brown_400">#8D6E63</color>
    <color name="brown_500">#795548</color>
    <color name="brown_600">#6D4C41</color>
    <color name="brown_700">#5D4037</color>
    <color name="brown_800">#4E342E</color>
    <color name="brown_900">#3E2723</color>
    
    <color name="grey_50">#FAFAFA</color>
    <color name="grey_100">#F5F5F5</color>
    <color name="grey_200">#EEEEEE</color>
    <color name="grey_300">#E0E0E0</color>
    <color name="grey_400">#BDBDBD</color>
    <color name="grey_500">#9E9E9E</color>
    <color name="grey_600">#757575</color>
    <color name="grey_700">#616161</color>
    <color name="grey_800">#424242</color>
    <color name="grey_900">#212121</color>
    
    <color name="blue_grey_50">#ECEFF1</color>
    <color name="blue_grey_100">#CFD8DC</color>
    <color name="blue_grey_200">#B0BBC5</color>
    <color name="blue_grey_300">#90A4AE</color>
    <color name="blue_grey_400">#78909C</color>
    <color name="blue_grey_500">#607D8B</color>
    <color name="blue_grey_600">#546E7A</color>
    <color name="blue_grey_700">#455A64</color>
    <color name="blue_grey_800">#37474F</color>
    <color name="blue_grey_900">#263238</color>
    
</resources>

How to use Material Design Colors XML Resource File

First of all right click on view raw link below the gist and save it to your PC. You can also copy the contents of gist and replace it with the contents in your colors.xml file.

If you saved it as a file, to include it to your project, first copy the file. After that open your project and right click on values folder and click Paste..

Adding-Material-Design-XML-Resource-to-Project

Choose the directory and name. Iā€™m keeping everything as default. Here is the result after pasting:

Now you can edit your styles.xml like this:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/purple_500</item>
    <item name="colorPrimaryDark">@color/purple_700</item>
    <item name="colorAccent">@color/green_A200</item>
</style>

The purple_500, purple_700 and green_200 are colors from the XML file. You can choose the one you like. But make sure use ā€˜500ā€™ colors as primary and colors with ā€˜Aā€™ prefix as accent colors. This is not a rule but it will look great if you choose colors in that way.

For Floating Action Button I gave a tint color as grey_800 like this:

android:tint="@color/grey_800"

Finally the output looks something like this:

Material-Design-Colors-XML-Resource-Result

Start picking colors ! Happy designing !