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.

kabindra commented Jan 7, 2015

Color codes are not matching please verify yourself

@shkschneider

This comment has been minimized.

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.

tyzero commented Mar 15, 2015

Awesome!

@daniellevass

This comment has been minimized.

Owner

daniellevass commented Mar 21, 2015

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

@joshkopecek

This comment has been minimized.

joshkopecek commented Mar 30, 2015

Superb. Saved me a lot of time :-)

@Sahariar

This comment has been minimized.

Sahariar commented Apr 12, 2015

Great Man. Saves a lot lot of time ☺️

@charles2588

This comment has been minimized.

charles2588 commented Apr 23, 2015

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

@FADHLISE

This comment has been minimized.

FADHLISE commented May 7, 2015

Thank You

@daniellevass

This comment has been minimized.

Owner

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

@Sagarwal610

This comment has been minimized.

Sagarwal610 commented Jun 5, 2015

Thank you , you saved a lot of time

@Assassinss

This comment has been minimized.

Assassinss commented Jun 30, 2015

Thank you

@kaolick

This comment has been minimized.

kaolick commented Jul 5, 2015

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

@hoooolo

This comment has been minimized.

hoooolo commented Jul 7, 2015

Thank you

@dylanCleary

This comment has been minimized.

dylanCleary commented Jul 14, 2015

Thanks this is super helpful.

@raphaelgmelo

This comment has been minimized.

raphaelgmelo commented Jul 24, 2015

Thanks!

@IgorMedved

This comment has been minimized.

IgorMedved commented Aug 23, 2015

Thanks!

@asrin475

This comment has been minimized.

asrin475 commented Aug 27, 2015

Thanks dude!

@KavelCortex

This comment has been minimized.

KavelCortex commented Aug 30, 2015

AWESOME THANK YOU!

@adityanaique

This comment has been minimized.

adityanaique commented Nov 24, 2015

Wow, thank you! Thanks A LOT!! 👍

@vieck

This comment has been minimized.

vieck commented Dec 1, 2015

I owe you one!

@sfatdisk

This comment has been minimized.

sfatdisk commented Dec 26, 2015

Awesome! Thumbs up!

@gasparkf

This comment has been minimized.

gasparkf commented Jan 10, 2016

Thank you, well done!

@vdavid

This comment has been minimized.

vdavid commented Jan 18, 2016

Thanks a lot! :)

@lupsaa

This comment has been minimized.

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.

lookub commented Mar 28, 2016

this will simplify my works :) thank you

@krupalshah

This comment has been minimized.

krupalshah commented Apr 2, 2016

thank you 👍

@thitoo

This comment has been minimized.

thitoo commented Apr 7, 2016

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

@iiredalert

This comment has been minimized.

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.

kiratheone commented Jun 14, 2016

Wow, its very useful

Many Thanks (y)

@klauskpm

This comment has been minimized.

klauskpm commented Jul 1, 2016

Thank you 👍

@gotoark

This comment has been minimized.

gotoark commented Jul 7, 2016

Thank You.!!!!!

@Prawesome

This comment has been minimized.

Prawesome commented Jul 14, 2016

Thats amazing, thank you very much

@imshenyz

This comment has been minimized.

imshenyz commented Sep 27, 2016

Thanks for saved my times!

@rohithramachandran

This comment has been minimized.

rohithramachandran commented Oct 6, 2016

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

@HEIXE

This comment has been minimized.

HEIXE commented Oct 16, 2016

Thanks

@gurleensethi

This comment has been minimized.

gurleensethi commented Nov 11, 2016

Dam bro!

@markfarber

This comment has been minimized.

markfarber commented Jan 16, 2017

thanks!

@jkpark

This comment has been minimized.

jkpark commented Feb 8, 2017

thanks

@MmtBkn

This comment has been minimized.

MmtBkn commented Apr 18, 2017

thanks!

@mdavalos1993

This comment has been minimized.

mdavalos1993 commented Apr 27, 2017

Thanks bro!

@hugocastelani

This comment has been minimized.

hugocastelani commented Jun 19, 2017

Thank you!

@arifullahjan

This comment has been minimized.

arifullahjan commented Jul 1, 2017

thanks

@jesster2k10

This comment has been minimized.

jesster2k10 commented Jul 1, 2017

amazing

@jackz314

This comment has been minimized.

jackz314 commented Sep 19, 2017

Thanks a lot my friend!

@fburel

This comment has been minimized.

fburel commented Oct 23, 2017

Amazing! Thks a lot!

@theapache64

This comment has been minimized.

theapache64 commented Nov 25, 2017

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

@YassinAJDI

This comment has been minimized.

YassinAJDI commented Feb 5, 2018

thanks

@bennythejudge

This comment has been minimized.

bennythejudge commented Apr 3, 2018

thanks!!

@rohitratanpara

This comment has been minimized.

rohitratanpara commented May 14, 2018

thank you so much

@eldafito

This comment has been minimized.

eldafito commented Aug 2, 2018

I <3 U

@fbtw

This comment has been minimized.

fbtw commented Nov 21, 2018

NICE

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