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