如何使用 Android 颜色调色板

Question

如何使用 Android 颜色调色板

androidcolorsmaterial-design

32

Android开发者网站的设计页面有一个关于颜色的分类。Color | Android Developers 有一些漂亮的颜色，他们很慷慨地提供了颜色样本的下载链接。我不知道如何使用它们。下载的.zip文件包含以下文件：

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

有人知道如何使用这些文件吗？我猜我需要一个程序来提取颜色值？

编辑：好的，看起来这是一个Adobe Color套件文件。有人知道一个免费的程序来使用这些文件吗？

- Diego Frehner

7个回答

11

ACO是Adobe Photoshop格式。http://www.nomodes.com/aco.html

GPL是GIMP格式（GIMP是免费的，也可以打开ACO）。http://www.gimp.org/

- logcat

1

如果您使用gimp，您需要导入颜色调色板：http://graphicssoft.about.com/od/gimptutorials/ss/Import-Color-Scheme_4.htm - josketres

Gimp可以通过打开窗口中的调色板选项卡，右键单击并按“导入调色板...”，然后选择文件位置来导入aco、gpl等格式的调色板。在Linux上，还可以在GPick中导入调色板并编辑或导出调色板 - 更多选项请参见此处。 - Wilf

8

另外，您可以使用任何颜色选择器程序，例如Pixeur，它将向您显示指针下的任何颜色的RGB值。

- Alexander Kulyakhtin

Pixie是另一个很棒的选择！ - Roy Lee

1

我使用gcolor2 - 在Linux下Pixeur不好用 :) - sunlock

6

以下是相关的颜色样本文件：

android-ics.aco - 适用于Photoshop android-ics.ase - 适用于Illustrator android-ics.gpl - 适用于GIMP

使用Photoshop方法如下：

方法1：

1. 打开Photoshop 2. 进入“窗口”--“色板”

3. 在“色板面板”中（单击右上角的小菜单图标）

4. 从下拉菜单中选择“加载色板”

5. 选择文件android-ics.aco

6. 选择追加（如果您想将Android颜色添加到当前色板中的颜色或替换为仅使用Android颜色）

方法2：

1. 在Windows上打开Adobe Photoshop文件夹，或者在Mac上打开应用程序

2. 进入Preset文件夹，找到Color Swatches文件夹

3. 将文件android-ics.aco复制到color swatches文件夹中

4. 现在启动Photoshop 5. 进入“窗口”--“色板”

6. 使用面板右侧的小菜单

7. 您会在菜单中看到Android ICS

8. 选择加载色板

如果您使用Illustrator或Gimp，您也可以类似地加载色板文件。

- Shibu

1

添加我的五分钱价值。


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

- kingchris

颜色白色的值应该是#ffffff。 - Ajil O.

1

"Swatches（色板）是一种通过选择基础颜色的不同阴影来保持应用程序中颜色一致性的好方法。我曾经使用取色器手动生成不同的阴影。但这些调色板提供了预选的阴影，以简化整个颜色选择过程！.aco文件可以在Adobe Photoshop中加载。

一个很酷易于使用的Windows工具是Instant Eyedropper 对于Mac，请使用内置的Digital Color Meter（数字颜色计）。"

enter image description here

这里有一个非常棒的在线工具，可以生成指定颜色（未在此处提及）的不同色调，如果有人想要查看，请使用HSL Color Picker。

以下是另一个工具，它是Google Chrome和Chromium扩展程序：Eye Dropper。

- Prince

0

我使用ColorZilla，这是一个Firefox插件，对我来说效果更好。

- siva636

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- damianow · Accepted Answer

如果您想跳过添加样品，我已创建一个包含下面所有值的XML。根据此页面，“01”是该组中最暗的，“14”是最亮的。

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