Create a gist now

Instantly share code, notes, and snippets.

Android Material Design Colours
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- google's material design colours from
http://www.google.com/design/spec/style/color.html#color-ui-color-palette -->
<!--reds-->
<color name="md_red_50">#FFEBEE</color>
<color name="md_red_100">#FFCDD2</color>
<color name="md_red_200">#EF9A9A</color>
<color name="md_red_300">#E57373</color>
<color name="md_red_400">#EF5350</color>
<color name="md_red_500">#F44336</color>
<color name="md_red_600">#E53935</color>
<color name="md_red_700">#D32F2F</color>
<color name="md_red_800">#C62828</color>
<color name="md_red_900">#B71C1C</color>
<color name="md_red_A100">#FF8A80</color>
<color name="md_red_A200">#FF5252</color>
<color name="md_red_A400">#FF1744</color>
<color name="md_red_A700">#D50000</color>
<!-- pinks -->
<color name="md_pink_50">#FCE4EC</color>
<color name="md_pink_100">#F8BBD0</color>
<color name="md_pink_200">#F48FB1</color>
<color name="md_pink_300">#F06292</color>
<color name="md_pink_400">#EC407A</color>
<color name="md_pink_500">#E91E63</color>
<color name="md_pink_600">#D81B60</color>
<color name="md_pink_700">#C2185B</color>
<color name="md_pink_800">#AD1457</color>
<color name="md_pink_900">#880E4F</color>
<color name="md_pink_A100">#FF80AB</color>
<color name="md_pink_A200">#FF4081</color>
<color name="md_pink_A400">#F50057</color>
<color name="md_pink_A700">#C51162</color>
<!-- purples -->
<color name="md_purple_50">#F3E5F5</color>
<color name="md_purple_100">#E1BEE7</color>
<color name="md_purple_200">#CE93D8</color>
<color name="md_purple_300">#BA68C8</color>
<color name="md_purple_400">#AB47BC</color>
<color name="md_purple_500">#9C27B0</color>
<color name="md_purple_600">#8E24AA</color>
<color name="md_purple_700">#7B1FA2</color>
<color name="md_purple_800">#6A1B9A</color>
<color name="md_purple_900">#4A148C</color>
<color name="md_purple_A100">#EA80FC</color>
<color name="md_purple_A200">#E040FB</color>
<color name="md_purple_A400">#D500F9</color>
<color name="md_purple_A700">#AA00FF</color>
<!-- deep purples -->
<color name="md_deep_purple_50">#EDE7F6</color>
<color name="md_deep_purple_100">#D1C4E9</color>
<color name="md_deep_purple_200">#B39DDB</color>
<color name="md_deep_purple_300">#9575CD</color>
<color name="md_deep_purple_400">#7E57C2</color>
<color name="md_deep_purple_500">#673AB7</color>
<color name="md_deep_purple_600">#5E35B1</color>
<color name="md_deep_purple_700">#512DA8</color>
<color name="md_deep_purple_800">#4527A0</color>
<color name="md_deep_purple_900">#311B92</color>
<color name="md_deep_purple_A100">#B388FF</color>
<color name="md_deep_purple_A200">#7C4DFF</color>
<color name="md_deep_purple_A400">#651FFF</color>
<color name="md_deep_purple_A700">#6200EA</color>
<!-- indigo -->
<color name="md_indigo_50">#E8EAF6</color>
<color name="md_indigo_100">#C5CAE9</color>
<color name="md_indigo_200">#9FA8DA</color>
<color name="md_indigo_300">#7986CB</color>
<color name="md_indigo_400">#5C6BC0</color>
<color name="md_indigo_500">#3F51B5</color>
<color name="md_indigo_600">#3949AB</color>
<color name="md_indigo_700">#303F9F</color>
<color name="md_indigo_800">#283593</color>
<color name="md_indigo_900">#1A237E</color>
<color name="md_indigo_A100">#8C9EFF</color>
<color name="md_indigo_A200">#536DFE</color>
<color name="md_indigo_A400">#3D5AFE</color>
<color name="md_indigo_A700">#304FFE</color>
<!--blue-->
<color name="md_blue_50">#E3F2FD</color>
<color name="md_blue_100">#BBDEFB</color>
<color name="md_blue_200">#90CAF9</color>
<color name="md_blue_300">#64B5F6</color>
<color name="md_blue_400">#42A5F5</color>
<color name="md_blue_500">#2196F3</color>
<color name="md_blue_600">#1E88E5</color>
<color name="md_blue_700">#1976D2</color>
<color name="md_blue_800">#1565C0</color>
<color name="md_blue_900">#0D47A1</color>
<color name="md_blue_A100">#82B1FF</color>
<color name="md_blue_A200">#448AFF</color>
<color name="md_blue_A400">#2979FF</color>
<color name="md_blue_A700">#2962FF</color>
<!-- light blue-->
<color name="md_light_blue_50">#E1F5FE</color>
<color name="md_light_blue_100">#B3E5FC</color>
<color name="md_light_blue_200">#81D4fA</color>
<color name="md_light_blue_300">#4fC3F7</color>
<color name="md_light_blue_400">#29B6FC</color>
<color name="md_light_blue_500">#03A9F4</color>
<color name="md_light_blue_600">#039BE5</color>
<color name="md_light_blue_700">#0288D1</color>
<color name="md_light_blue_800">#0277BD</color>
<color name="md_light_blue_900">#01579B</color>
<color name="md_light_blue_A100">#80D8FF</color>
<color name="md_light_blue_A200">#40C4FF</color>
<color name="md_light_blue_A400">#00B0FF</color>
<color name="md_light_blue_A700">#0091EA</color>
<!-- cyan -->
<color name="md_cyan_50">#E0F7FA</color>
<color name="md_cyan_100">#B2EBF2</color>
<color name="md_cyan_200">#80DEEA</color>
<color name="md_cyan_300">#4DD0E1</color>
<color name="md_cyan_400">#26C6DA</color>
<color name="md_cyan_500">#00BCD4</color>
<color name="md_cyan_600">#00ACC1</color>
<color name="md_cyan_700">#0097A7</color>
<color name="md_cyan_800">#00838F</color>
<color name="md_cyan_900">#006064</color>
<color name="md_cyan_A100">#84FFFF</color>
<color name="md_cyan_A200">#18FFFF</color>
<color name="md_cyan_A400">#00E5FF</color>
<color name="md_cyan_A700">#00B8D4</color>
<!-- teal -->
<color name="md_teal_50">#E0F2F1</color>
<color name="md_teal_100">#B2DFDB</color>
<color name="md_teal_200">#80CBC4</color>
<color name="md_teal_300">#4DB6AC</color>
<color name="md_teal_400">#26A69A</color>
<color name="md_teal_500">#009688</color>
<color name="md_teal_600">#00897B</color>
<color name="md_teal_700">#00796B</color>
<color name="md_teal_800">#00695C</color>
<color name="md_teal_900">#004D40</color>
<color name="md_teal_A100">#A7FFEB</color>
<color name="md_teal_A200">#64FFDA</color>
<color name="md_teal_A400">#1DE9B6</color>
<color name="md_teal_A700">#00BFA5</color>
<!-- green -->
<color name="md_green_50">#E8F5E9</color>
<color name="md_green_100">#C8E6C9</color>
<color name="md_green_200">#A5D6A7</color>
<color name="md_green_300">#81C784</color>
<color name="md_green_400">#66BB6A</color>
<color name="md_green_500">#4CAF50</color>
<color name="md_green_600">#43A047</color>
<color name="md_green_700">#388E3C</color>
<color name="md_green_800">#2E7D32</color>
<color name="md_green_900">#1B5E20</color>
<color name="md_green_A100">#B9F6CA</color>
<color name="md_green_A200">#69F0AE</color>
<color name="md_green_A400">#00E676</color>
<color name="md_green_A700">#00C853</color>
<!--light green-->
<color name="md_light_green_50">#F1F8E9</color>
<color name="md_light_green_100">#DCEDC8</color>
<color name="md_light_green_200">#C5E1A5</color>
<color name="md_light_green_300">#AED581</color>
<color name="md_light_green_400">#9CCC65</color>
<color name="md_light_green_500">#8BC34A</color>
<color name="md_light_green_600">#7CB342</color>
<color name="md_light_green_700">#689F38</color>
<color name="md_light_green_800">#558B2F</color>
<color name="md_light_green_900">#33691E</color>
<color name="md_light_green_A100">#CCFF90</color>
<color name="md_light_green_A200">#B2FF59</color>
<color name="md_light_green_A400">#76FF03</color>
<color name="md_light_green_A700">#64DD17</color>
<!-- lime-->
<color name="md_lime_50">#F9FBE7</color>
<color name="md_lime_100">#F0F4C3</color>
<color name="md_lime_200">#E6EE9C</color>
<color name="md_lime_300">#DCE775</color>
<color name="md_lime_400">#D4E157</color>
<color name="md_lime_500">#CDDC39</color>
<color name="md_lime_600">#C0CA33</color>
<color name="md_lime_700">#A4B42B</color>
<color name="md_lime_800">#9E9D24</color>
<color name="md_lime_900">#827717</color>
<color name="md_lime_A100">#F4FF81</color>
<color name="md_lime_A200">#EEFF41</color>
<color name="md_lime_A400">#C6FF00</color>
<color name="md_lime_A700">#AEEA00</color>
<!--yellow -->
<color name="md_yellow_50">#FFFDE7</color>
<color name="md_yellow_100">#FFF9C4</color>
<color name="md_yellow_200">#FFF590</color>
<color name="md_yellow_300">#FFF176</color>
<color name="md_yellow_400">#FFEE58</color>
<color name="md_yellow_500">#FFEB3B</color>
<color name="md_yellow_600">#FDD835</color>
<color name="md_yellow_700">#FBC02D</color>
<color name="md_yellow_800">#F9A825</color>
<color name="md_yellow_900">#F57F17</color>
<color name="md_yellow_A100">#FFFF82</color>
<color name="md_yellow_A200">#FFFF00</color>
<color name="md_yellow_A400">#FFEA00</color>
<color name="md_yellow_A700">#FFD600</color>
<!--amber-->
<color name="md_amber_50">#FFF8E1</color>
<color name="md_amber_100">#FFECB3</color>
<color name="md_amber_200">#FFE082</color>
<color name="md_amber_300">#FFD54F</color>
<color name="md_amber_400">#FFCA28</color>
<color name="md_amber_500">#FFC107</color>
<color name="md_amber_600">#FFB300</color>
<color name="md_amber_700">#FFA000</color>
<color name="md_amber_800">#FF8F00</color>
<color name="md_amber_900">#FF6F00</color>
<color name="md_amber_A100">#FFE57F</color>
<color name="md_amber_A200">#FFD740</color>
<color name="md_amber_A400">#FFC400</color>
<color name="md_amber_A700">#FFAB00</color>
<!--orange-->
<color name="md_orange_50">#FFF3E0</color>
<color name="md_orange_100">#FFE0B2</color>
<color name="md_orange_200">#FFCC80</color>
<color name="md_orange_300">#FFB74D</color>
<color name="md_orange_400">#FFA726</color>
<color name="md_orange_500">#FF9800</color>
<color name="md_orange_600">#FB8C00</color>
<color name="md_orange_700">#F57C00</color>
<color name="md_orange_800">#EF6C00</color>
<color name="md_orange_900">#E65100</color>
<color name="md_orange_A100">#FFD180</color>
<color name="md_orange_A200">#FFAB40</color>
<color name="md_orange_A400">#FF9100</color>
<color name="md_orange_A700">#FF6D00</color>
<!--deep orange-->
<color name="md_deep_orange_50">#FBE9A7</color>
<color name="md_deep_orange_100">#FFCCBC</color>
<color name="md_deep_orange_200">#FFAB91</color>
<color name="md_deep_orange_300">#FF8A65</color>
<color name="md_deep_orange_400">#FF7043</color>
<color name="md_deep_orange_500">#FF5722</color>
<color name="md_deep_orange_600">#F4511E</color>
<color name="md_deep_orange_700">#E64A19</color>
<color name="md_deep_orange_800">#D84315</color>
<color name="md_deep_orange_900">#BF360C</color>
<color name="md_deep_orange_A100">#FF9E80</color>
<color name="md_deep_orange_A200">#FF6E40</color>
<color name="md_deep_orange_A400">#FF3D00</color>
<color name="md_deep_orange_A700">#DD2600</color>
<!--brown -->
<color name="md_brown_50">#EFEBE9</color>
<color name="md_brown_100">#D7CCC8</color>
<color name="md_brown_200">#BCAAA4</color>
<color name="md_brown_300">#A1887F</color>
<color name="md_brown_400">#8D6E63</color>
<color name="md_brown_500">#795548</color>
<color name="md_brown_600">#6D4C41</color>
<color name="md_brown_700">#5D4037</color>
<color name="md_brown_800">#4E342E</color>
<color name="md_brown_900">#3E2723</color>
<!--grey-->
<color name="md_grey_50">#FAFAFA</color>
<color name="md_grey_100">#F5F5F5</color>
<color name="md_grey_200">#EEEEEE</color>
<color name="md_grey_300">#E0E0E0</color>
<color name="md_grey_400">#BDBDBD</color>
<color name="md_grey_500">#9E9E9E</color>
<color name="md_grey_600">#757575</color>
<color name="md_grey_700">#616161</color>
<color name="md_grey_800">#424242</color>
<color name="md_grey_900">#212121</color>
<color name="md_black_1000">#000000</color>
<color name="md_white_1000">#ffffff</color>
<!--blue grey-->
<color name="md_blue_grey_50">#ECEFF1</color>
<color name="md_blue_grey_100">#CFD8DC</color>
<color name="md_blue_grey_200">#B0BBC5</color>
<color name="md_blue_grey_300">#90A4AE</color>
<color name="md_blue_grey_400">#78909C</color>
<color name="md_blue_grey_500">#607D8B</color>
<color name="md_blue_grey_600">#546E7A</color>
<color name="md_blue_grey_700">#455A64</color>
<color name="md_blue_grey_800">#37474F</color>
<color name="md_blue_grey_900">#263238</color>
</resources>
@kabindra
kabindra commented Jan 7, 2015

Color codes are not matching please verify yourself

@shkschneider

The colors changed since indeed.
For example I also had in my code (from Google's site) red500 as fde0dc but it is now f44336.

@tyzero
tyzero commented Mar 15, 2015

Awesome!

@daniellevass
Owner

@kabindra and @shkschneider updated all the values :-)

@joshkopecek

Superb. Saved me a lot of time :-)

@Sahariar

Great Man. Saves a lot lot of time ☺️

@charles2588

Appericiate your work .,..saved us all lot of time!!!!!!!!!!!!!

@FADHLISE
FADHLISE commented May 7, 2015

Thank You

@daniellevass
Owner

For those that might appreciate it - I've built a library which incorporates all the material design colours into buttons and resources you can use. As well as including the material design and font awesome font sets for ease of use :-) https://github.com/android-awesome/Awesome-Material

@Sagarwal610

Thank you , you saved a lot of time

@Assassinss

Thank you

@kaolick
kaolick commented Jul 5, 2015

Absolutely awesome!!! Thank you! Was just about to do it myself...

@VENSSA
VENSSA commented Jul 7, 2015

Thank you

@dylanCleary

Thanks this is super helpful.

@raphaelgmelo

Thanks!

@IgorMedved

Thanks!

@asrin475

Thanks dude!

@KavelCortex

AWESOME THANK YOU!

@adityanaik

Wow, thank you! Thanks A LOT!! 👍

@vieck
vieck commented Dec 1, 2015

I owe you one!

@sfatdisk

Awesome! Thumbs up!

@gasparkf

Thank you, well done!

@vdavid
vdavid commented Jan 18, 2016

Thanks a lot! :)

@lupsaa
lupsaa commented Mar 9, 2016

I got halfway through writing my own colours until I stumbled upon this. Thank you so much!

@lookub
lookub commented Mar 28, 2016

this will simplify my works :) thank you

@krupalshah

thank you 👍

@thitoo
thitoo commented Apr 7, 2016

It is really useful for me. Thanks you :-D

@iiredalert

I've added the primary, secondary and disabled text constants here:

https://gist.github.com/iiredalert/0114986716d017bfa754635e65aea2ce

@kiratheone

Wow, its very useful

Many Thanks (y)

@klauskpm
klauskpm commented Jul 1, 2016

Thank you 👍

@gotoark
gotoark commented Jul 7, 2016 edited

Thank You.!!!!!

@Prawesome

Thats amazing, thank you very much

@imshenyz

Thanks for saved my times!

@rohithramachandran
rohithramachandran commented Oct 6, 2016 edited

Thanks dude....Saved hell of a time.... 👍

@HE-S
HE-S commented Oct 16, 2016

Thanks

@gurleensethi

Dam bro!

@markfarber

thanks!

@jkpark
jkpark commented Feb 8, 2017

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment