Skip to content

Instantly share code, notes, and snippets.

@greenlikeorange
Created May 7, 2015 08:36
Show Gist options
  • Save greenlikeorange/8a557d1130be74937985 to your computer and use it in GitHub Desktop.
Save greenlikeorange/8a557d1130be74937985 to your computer and use it in GitHub Desktop.
Material colors resource from google.com/design
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="white">#ffffff</color>
<color name="black">#000000</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">#29b6f6</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">#afb42b</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">#fff59d</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">#ffff8d</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">#fbe9e7</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">#dd2c00</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">#b0bec5</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>
// Run this at
// http://www.google.com/design/spec/style/color.html#color-ui-color-application
var colorGroups = document.getElementsByClassName("color-group");
colorGroups = Array.prototype.slice.call(colorGroups, 0, -1);
var xml = "";
var filter = Array.prototype.map.call(colorGroups, function(colorGroup, i){
var colorElems = colorGroup.getElementsByClassName("color");
var _res = [];
var name = colorElems[0].getElementsByClassName("name")[0].innerHTML;
colorElems = Array.prototype.slice.call(colorElems, 1);
Array.prototype.map.call(colorElems, function(colorElem, ii){
var code = colorElem.getElementsByClassName("hex")[0].innerHTML.trim();
var subName = name + "-" + colorElem.getElementsByClassName("shade")[0].innerHTML.trim();
subName = subName.toLowerCase().replace(/\s/g, "-");
_res.push({
name: subName,
code: code
});
xml += `<color name="${subName}">${code}</color>\n`;
});
xml += "\n";
return _res;
});
console.log(xml);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment