Home » Android » How to use Android color swatches

How to use Android color swatches

Posted by: admin April 23, 2020 Leave a comment

Questions:

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?

How to&Answers:

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

Answer:

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>

Answer:

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

Answer:

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

Answer:

Swatches are a great way to maintain color consistency throughout your app by selecting different shades of a base color. I was generating shades manually using a color picker tool. But these palettes offer pre-selected shades to ease the whole color picking process! The .aco file can be loaded using Adobe Photoshop.

A cool easy-to-use tool for Windows is Instant Eyedropper

For Mac use Digital Color Meter (built-in)

enter image description here

Here is another great online tool to generate different shades of a particular color (not mentioned here), in case anyone wants to check it out: HSL Color Picker

Here’s another tool as a Google Chrome and Chromium extension: Eye Dropper

Answer:

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> 

Answer:

I use ColorZilla, a Firefox plugin, which works better for me.