docs/html/design/style/color.jd

   1 page.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 <a class="notice-designers-material" href="http://www.google.com/design/spec/style/color.html">
  92   <div>
  93     <h3>Material Design</h3>
  94     <p>Color<p>
  95   </div>
  96 </a>
  97
  98 <p>Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast
  99 between visual components. Note that red and green may be indistinguishable to color-blind users.</p>
 100
 101     <div class="color-row-container">
 102       <ul class="color-row">
 103         <li><span>#33b5e5</span></li>
 104         <li><span>#aa66cc</span></li>
 105         <li><span>#99cc00</span></li>
 106         <li><span>#ffbb33</span></li>
 107         <li><span>#ff4444</span></li>
 108       </ul>
 109     </div>
 110
 111     <div class="color-row-container">
 112       <ul class="color-row">
 113         <li class="thin"><span>#0099cc</span></li>
 114         <li class="thin"><span>#9933cc</span></li>
 115         <li class="thin"><span>#669900</span></li>
 116         <li class="thin"><span>#ff8800</span></li>
 117         <li class="thin"><span>#cc0000</span></li>
 118       </ul>
 119     </div>
 120
 121 <h2 id="palette">Palette</h2>
 122
 123 <p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker
 124 shade that can be used as a complement when needed.</p>
 125 <p><a onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches (@color page)');"
 126       href="{@docRoot}downloads/design/Android_Design_Color_Swatches_20120229.zip">Download the swatches</a></p>
 127
 128 <img src="{@docRoot}design/media/color_spectrum.png">
 129
 130 <script>
 131   $(document).ready(function() {
 132     $('.color-row li').each(function() {
 133       var color = $(this).text();
 134       $(this).css('background-color', color);
 135       $(this).find('span')
 136           .css('color', color)
 137           .text(color.toUpperCase());
 138     });
 139
 140   });
 141 </script>