Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@kabindra kabindra commented Jan 7, 2015

Color codes are not matching please verify yourself

@shkschneider

This comment has been minimized.

Copy link

@shkschneider shkschneider commented Feb 12, 2015

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

This comment has been minimized.

Copy link

@tyzero tyzero commented Mar 15, 2015

Awesome!

@daniellevass

This comment has been minimized.

Copy link
Owner Author

@daniellevass daniellevass commented Mar 21, 2015

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

@joshkopecek

This comment has been minimized.

Copy link

@joshkopecek joshkopecek commented Mar 30, 2015

Superb. Saved me a lot of time :-)

@Sahariar

This comment has been minimized.

Copy link

@Sahariar Sahariar commented Apr 12, 2015

Great Man. Saves a lot lot of time ☺️

@charles2588

This comment has been minimized.

Copy link

@charles2588 charles2588 commented Apr 23, 2015

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

@FADHLISE

This comment has been minimized.

Copy link

@FADHLISE FADHLISE commented May 7, 2015

Thank You

@daniellevass

This comment has been minimized.

Copy link
Owner Author

@daniellevass daniellevass commented May 16, 2015

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

@sagagarw

This comment has been minimized.

Copy link

@sagagarw sagagarw commented Jun 5, 2015

Thank you , you saved a lot of time

@Assassinss

This comment has been minimized.

Copy link

@Assassinss Assassinss commented Jun 30, 2015

Thank you

@kaolick

This comment has been minimized.

Copy link

@kaolick kaolick commented Jul 5, 2015

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

@yKKNu

This comment has been minimized.

Copy link

@yKKNu yKKNu commented Jul 7, 2015

Thank you

@dylanCleary

This comment has been minimized.

Copy link

@dylanCleary dylanCleary commented Jul 14, 2015

Thanks this is super helpful.

@raphaelgmelo

This comment has been minimized.

Copy link

@raphaelgmelo raphaelgmelo commented Jul 24, 2015

Thanks!

@IgorMedved

This comment has been minimized.

Copy link

@IgorMedved IgorMedved commented Aug 23, 2015

Thanks!

@asrin475

This comment has been minimized.

Copy link

@asrin475 asrin475 commented Aug 27, 2015

Thanks dude!

@KavelCortex

This comment has been minimized.

Copy link

@KavelCortex KavelCortex commented Aug 30, 2015

AWESOME THANK YOU!

@adityanaique

This comment has been minimized.

Copy link

@adityanaique adityanaique commented Nov 24, 2015

Wow, thank you! Thanks A LOT!! 👍

@vieck

This comment has been minimized.

Copy link

@vieck vieck commented Dec 1, 2015

I owe you one!

@sfatdisk

This comment has been minimized.

Copy link

@sfatdisk sfatdisk commented Dec 26, 2015

Awesome! Thumbs up!

@gasparkf

This comment has been minimized.

Copy link

@gasparkf gasparkf commented Jan 10, 2016

Thank you, well done!

@vdavid

This comment has been minimized.

Copy link

@vdavid vdavid commented Jan 18, 2016

Thanks a lot! :)

@lupsaa

This comment has been minimized.

Copy link

@lupsaa lupsaa commented Mar 9, 2016

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

@lookub

This comment has been minimized.

Copy link

@lookub lookub commented Mar 28, 2016

this will simplify my works :) thank you

@krupalshah

This comment has been minimized.

Copy link

@krupalshah krupalshah commented Apr 2, 2016

thank you 👍

@thitoo

This comment has been minimized.

Copy link

@thitoo thitoo commented Apr 7, 2016

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

@iiredalert

This comment has been minimized.

Copy link

@iiredalert iiredalert commented Apr 30, 2016

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

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

@kiratheone

This comment has been minimized.

Copy link

@kiratheone kiratheone commented Jun 14, 2016

Wow, its very useful

Many Thanks (y)

@klauskpm

This comment has been minimized.

Copy link

@klauskpm klauskpm commented Jul 1, 2016

Thank you 👍

@gotoark

This comment has been minimized.

Copy link

@gotoark gotoark commented Jul 7, 2016

Thank You.!!!!!

@prejithp

This comment has been minimized.

Copy link

@prejithp prejithp commented Jul 14, 2016

Thats amazing, thank you very much

@imshenyz

This comment has been minimized.

Copy link

@imshenyz imshenyz commented Sep 27, 2016

Thanks for saved my times!

@rohithramachandran

This comment has been minimized.

Copy link

@rohithramachandran rohithramachandran commented Oct 6, 2016

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

@HE-SOFT

This comment has been minimized.

Copy link

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

Thanks

@gurleensethi

This comment has been minimized.

Copy link

@gurleensethi gurleensethi commented Nov 11, 2016

Dam bro!

@markfarber

This comment has been minimized.

Copy link

@markfarber markfarber commented Jan 16, 2017

thanks!

@jkpark

This comment has been minimized.

Copy link

@jkpark jkpark commented Feb 8, 2017

thanks

@MmtBkn

This comment has been minimized.

Copy link

@MmtBkn MmtBkn commented Apr 18, 2017

thanks!

@mdavalos1993

This comment has been minimized.

Copy link

@mdavalos1993 mdavalos1993 commented Apr 27, 2017

Thanks bro!

@hugocastelani

This comment has been minimized.

Copy link

@hugocastelani hugocastelani commented Jun 19, 2017

Thank you!

@arifullahjan

This comment has been minimized.

Copy link

@arifullahjan arifullahjan commented Jul 1, 2017

thanks

@jesster2k10

This comment has been minimized.

Copy link

@jesster2k10 jesster2k10 commented Jul 1, 2017

amazing

@jackz314

This comment has been minimized.

Copy link

@jackz314 jackz314 commented Sep 19, 2017

Thanks a lot my friend!

@fburel

This comment has been minimized.

Copy link

@fburel fburel commented Oct 23, 2017

Amazing! Thks a lot!

@theapache64

This comment has been minimized.

Copy link

@theapache64 theapache64 commented Nov 25, 2017

All in one line
compile 'com.theah64.materialcolors:materialcolors:1.0.0 ! enjoy!

@YassinAJDI

This comment has been minimized.

Copy link

@YassinAJDI YassinAJDI commented Feb 5, 2018

thanks

@bennythejudge

This comment has been minimized.

Copy link

@bennythejudge bennythejudge commented Apr 3, 2018

thanks!!

@rohitratanpara

This comment has been minimized.

Copy link

@rohitratanpara rohitratanpara commented May 14, 2018

thank you so much

@eldafito

This comment has been minimized.

Copy link

@eldafito eldafito commented Aug 2, 2018

I <3 U

@fbtw

This comment has been minimized.

Copy link

@fbtw fbtw commented Nov 21, 2018

NICE

@tutaf

This comment has been minimized.

Copy link

@tutaf tutaf commented Dec 31, 2018

Thanks :)

@lerobosys

This comment has been minimized.

Copy link

@lerobosys lerobosys commented Jan 21, 2019

Awesome, thanks

@iRYO400

This comment has been minimized.

Copy link

@iRYO400 iRYO400 commented Jan 30, 2019

GJ! Thanks!

@basshelal

This comment has been minimized.

Copy link

@basshelal basshelal commented Feb 16, 2019

Legend! Thank you :)

@bastami82

This comment has been minimized.

Copy link

@bastami82 bastami82 commented Mar 1, 2019

awesome !

@MohammedFouad

This comment has been minimized.

Copy link

@MohammedFouad MohammedFouad commented Mar 3, 2019

Awesome, thanks

@mahdi-hosseinnion

This comment has been minimized.

Copy link

@mahdi-hosseinnion mahdi-hosseinnion commented Jul 21, 2019

THX

@edejongh

This comment has been minimized.

Copy link

@edejongh edejongh commented Nov 21, 2019

Thank you, you rock!

@nyxee

This comment has been minimized.

Copy link

@nyxee nyxee commented Apr 5, 2020

Good Job.

@brookmg

This comment has been minimized.

Copy link

@brookmg brookmg commented May 24, 2020

💯 Nooice

@sphrak

This comment has been minimized.

Copy link

@sphrak sphrak commented Jun 23, 2020

A blessing from the lord. Thank you 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.