1page.title=Color
2@jd:body
3
4<style>
5  .color-row {
6    width: 760px;
7    margin:0;
8
9    display: -webkit-box;
10    display:    -moz-box;
11    display:         box;
12
13    -webkit-box-orient: horizontal;
14       -moz-box-orient: horizontal;
15            box-orient: horizontal;
16
17    cursor: pointer;
18
19    -webkit-user-select: none;
20            user-select: none;
21    /* nested user-select in FF is broken as of Jan 2012, don't use it */
22  }
23
24  .color-row-container {
25    line-height: 0; /* to remove more top space in FF for -moz-box elements */
26  }
27
28  .color-row-container + .color-row-container {
29    margin-top: -10px !important;
30  }
31
32  .color-row li {
33    margin-left: 0 !important;
34    position: relative;
35    list-style-type: none;
36    height: 80px;
37    display: block;
38
39    -webkit-box-flex: 1;
40       -moz-box-flex: 1;
41            box-flex: 1;
42  }
43
44  .color-row li:before {
45    display: none;
46  }
47
48  .color-row li.thin {
49    height: 40px;
50  }
51
52  .color-row li span {
53    display: none;
54    position: absolute;
55    top: -30px;
56    left: 50%;
57    margin-left: -2.5em;
58    width: 5em;
59    background-color: #fff;
60    padding: 10px;
61    font-weight: 600;
62    line-height: 20px;
63    text-align: center;
64    box-shadow: 0 5px 5px rgba(0,0,0,0.1);
65    cursor: text;
66
67    -webkit-user-select: text;
68            user-select: text;
69    /* nested user-select in FF is broken as of Jan 2012, don't use it */
70  }
71
72  .color-row li:hover span {
73    display: block;
74  }
75
76  /* triangle callout */
77  .color-row li span:after {
78    content: '';
79    display: block;
80    position: absolute;
81    left: 50%;
82    bottom: -16px;
83    border: 8px solid transparent;
84    border-top-color: #fff;
85    width: 0;
86    height: 0;
87    margin-left: -8px;
88  }
89</style>
90
91<p>Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast
92between visual components. Note that red and green may be indistinguishable to color-blind users.</p>
93
94    <div class="color-row-container">
95      <ul class="color-row">
96        <li><span>#33b5e5</span></li>
97        <li><span>#aa66cc</span></li>
98        <li><span>#99cc00</span></li>
99        <li><span>#ffbb33</span></li>
100        <li><span>#ff4444</span></li>
101      </ul>
102    </div>
103
104    <div class="color-row-container">
105      <ul class="color-row">
106        <li class="thin"><span>#0099cc</span></li>
107        <li class="thin"><span>#9933cc</span></li>
108        <li class="thin"><span>#669900</span></li>
109        <li class="thin"><span>#ff8800</span></li>
110        <li class="thin"><span>#cc0000</span></li>
111      </ul>
112    </div>
113
114<h2 id="palette">Palette</h2>
115
116<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
117shade that can be used as a complement when needed.</p>
118<p><a onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches (@color page)');"
119      href="{@docRoot}downloads/design/Android_Design_Color_Swatches_20120229.zip">Download the swatches</a></p>
120
121<img src="{@docRoot}design/media/color_spectrum.png">
122
123<script>
124  $(document).ready(function() {
125    $('.color-row li').each(function() {
126      var color = $(this).text();
127      $(this).css('background-color', color);
128      $(this).find('span')
129          .css('color', color)
130          .text(color.toUpperCase());
131    });
132
133  });
134</script>
135