How to use Android color swatches

Question

The Design Page of Android Developers Site has a category about colors. Color | Android Developers

There are good looking colors and they gratefully provide a download link for the color swatches. I don't know how to use them. The downloaded .zip contains the following files:

• Android-ics.aco
• Android-ics.ase
• Android-ics.gpl
• NOTICE.txt
• values.txt

Does anybody know how to use these files? I guess I need a program to extract the color values?

Edit: OK it looks like it is an Adobe Color suite file. Does anybody know a free program to use these files?

Solution 1

aco is adobe photoshop format http://www.nomodes.com/aco.html

gpl is gimp format (gimp is free and also can open aco http://www.gimp.org/)

Solution 2

If you're looking to skip adding the swatches, I created an XML with all of the values below. "01" is the darkest of the set, and "14" is the lightest, according to this page.

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

<color name="blue01">#0099CC</color>
<color name="blue02">#079DD0</color>
<color name="blue03">#0FA1D3</color>
<color name="blue04">#16A5D7</color>
<color name="blue05">#1DA9DA</color>
<color name="blue06">#24ADDE</color>
<color name="blue07">#2CB1E1</color>
<color name="blue08">#33B5E5</color>
<color name="blue09">#50C0E9</color>
<color name="blue10">#6DCAEC</color>
<color name="blue11">#8AD5F0</color>
<color name="blue12">#A8DFF4</color>
<color name="blue13">#C5EAF8</color>
<color name="blue14">#E2F4FB</color>

<color name="purple01">#9933CC</color>
<color name="purple02">#A041D0</color>
<color name="purple03">#A750D3</color>
<color name="purple04">#AC59D6</color>
<color name="purple05">#B368D9</color>
<color name="purple06">#BA75DC</color>
<color name="purple07">#C182E0</color>
<color name="purple08">#C58BE2</color>
<color name="purple09">#CB97E5</color>
<color name="purple10">#CF9FE7</color>
<color name="purple11">#D6ADEB</color>
<color name="purple12">#DDBCEE</color>
<color name="purple13">#E5CAF2</color>
<color name="purple14">#F5EAFA</color>

<color name="green01">#669900</color>
<color name="green02">#6DA000</color>
<color name="green03">#75A800</color>
<color name="green04">#7CAF00</color>
<color name="green05">#83B600</color>
<color name="green06">#8ABD00</color>
<color name="green07">#92C500</color>
<color name="green08">#99CC00</color>
<color name="green09">#A8D324</color>
<color name="green10">#B6DB49</color>
<color name="green11">#C5E26D</color>
<color name="green12">#D3E992</color>
<color name="green13">#E2F0B6</color>
<color name="green14">#F0F8DB</color>

<color name="orange01">#FF8A00</color>
<color name="orange02">#FF9105</color>
<color name="orange03">#FF9909</color>
<color name="orange04">#FFA00E</color>
<color name="orange05">#FFA713</color>
<color name="orange06">#FFAE18</color>
<color name="orange07">#FFB61C</color>
<color name="orange08">#FFBD21</color>
<color name="orange09">#FFC641</color>
<color name="orange10">#FFD060</color>
<color name="orange11">#FFD980</color>
<color name="orange12">#FFE3A0</color>
<color name="orange13">#FFECC0</color>
<color name="orange14">#FFF6DF</color>

<color name="red01">#CC0000</color>
<color name="red02">#D30A0A</color>
<color name="red03">#DB1313</color>
<color name="red04">#E21D1D</color>
<color name="red05">#E92727</color>
<color name="red06">#F03131</color>
<color name="red07">#F83A3A</color>
<color name="red08">#FF4444</color>
<color name="red09">#FF5F5F</color>
<color name="red10">#FF7979</color>
<color name="red11">#FF9494</color>
<color name="red12">#FFAFAF</color>
<color name="red13">#FFCACA</color>
<color name="red14">#FFE4E4</color>


</resources>

Solution 3

Alternatively, you can use any color picker program such as Pixeur and it will show you RGB values of any color under cursor

Solution 4

These are color swatch files for

android-ics.aco - for photoshop android-ics.ase - for illustrator android-ics.gpl - for gimp

To use for photoshop METHOD 1:

1. Open Photoshop
2. Go to Windows.. Swatches
3. In the Swatches Panel (click on the small menu icon on the top right)
4. Select Load Swatch from the drop down menu
5. Choose the file android-ics.aco
6. Select Append (if you want to add the android colors to the current set of colors in the swatch or replace to use only android colours

METHOD 2: 1. Open Adobe Photoshop folder in Program Files on Windows or Applications on Mac 2. Go the folder Presets, inside find folder Color Swatches 3. Copy the file android-ics.aco into the color swatches folder 4. Now start Photoshop 5. Go to Windows .. Swatches 6. Use the small menu on the right of swatches panel 7. You will see Android ICS listed in the menu 8. Select to load the swatches

If you use Illustrator or Gimp you can similarly load the swatch files..

Solution 5

To add my 5 cents worth

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

<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>

<color name="black">#000000</color>
<color name="white">#fffff</color>

</resource>

View more solutions

Comments

[Roy Lee]

pixie is another great alternative!

[sunlock]

I use gcolor2 - Pixeur is no good under Linux :)

[josketres]

If you use gimp, you'll need to import the color palette: graphicssoft.about.com/od/gimptutorials/ss/…

[Zyoo]

how did you create this?

[damianow]

Manually, using an eyedropper to pick up each of the colors on the developer website, I gathered all the hex values and created a colors.xml file that associates a name to each hex. Nothing fancy, all manual. Just figured it's never been done.

[Gishu]

See also - google.com/design/spec/style/color.html#color-color-palette

[Wilf]

Gimp can import aco, gpl etc by opening the Palettes tab in a window, right clicking and pressing 'Import Palette...', and then selecting the location of the file. On linux it is also possible to import he palette in GPick and edit or export the palette - more options here

[Ajil O.]

the value for color white should be #ffffff