W3.CSS 颜色库
颜色库
颜色库是小型 CSS 文件，包含常用的颜色值，如安全标准、交通指示牌颜色、时尚颜色、伪装颜色等。
Schoolbus
Falcon Ridge Parkway
STOP
如何使用颜色库
颜色库很容易使用。只需在你的网页中添加一个到颜色库的链接:
<link rel="stylesheet"
href="https://www.w3ccoo.com/lib/w3-colors-highway.css">
然后，向要着色的HTML元素添加类名:
<div class="w3-highway-schoolbus">Schoolbus</div>
<div
class="w3-highway-green">Falcon Ridge Parkway</div>
<div
class="w3-highway-red">STOP</div>
Try It Yourself »
美国交通标志指示牌的颜色
| w3-highway-brown |
| w3-highway-red |
| w3-highway-orange |
| w3-highway-schoolbus |
| w3-highway-yellow |
| w3-highway-green |
| w3-highway-blue |
美国高速公路颜色在联邦标准 595 中定义。
美国安全色
| w3-safety-red |
| w3-safety-orange |
| w3-safety-yellow |
| w3-safety-green |
| w3-safety-blue |
| w3-safety-purple |
The US safety colors are defined in Federal Standard 595.
欧洲交通信号颜色
| w3-signal-yellow |
| w3-signal-orange |
| w3-signal-red |
| w3-signal-violet |
| w3-signal-blue |
| w3-signal-green |
| w3-signal-grey |
| w3-signal-brown |
| w3-signal-white |
| w3-signal-black |
实例
<div class="w3-signal-red">Stop</div>
<div
class="w3-signal-yellow">Wait</div>
<div class="w3-signal-green">Go</div>
Try It Yourself »
Try All »
下载此 CSS »
The European signal colors are defined in the RAL Color Standard.
2019秋冬流行色/2020秋冬流行色
Chili Pepper
Biking Red
Crème de Pêche
Peach Pink
Rocky Road
Fruit Dove
Sugar Almond
Dark Cheddar
Galaxy Blue
Bluestone
Orange Tiger
Eden
2019年秋季流行色/2020年冬季经典色:
Vanilla Custard
Evening Blue
Paloma
Guacamole
实例
<div class="w3-2019-dark-cheddar">Dark Cheddar</div>
<div class="w3-2019-bluestone">Bluestone</div>
2019年春季时尚流行色
Fiesta
Jester Red
Turmeric
Living Coral
Pink Peacock
Pepper Stem
Aspen Gold
Princess Blue
Toffee
Mango Mojito
Terrarium Moss
Sweet Lilac
Soybean
Eclipse
Sweet Corn
Brown Granite
实例
<div class="w3-2019-fiesta">Fiesta</div>
<div class="w3-2019-princess-blue">Princess Blue</div>
流行色选自色彩趋势。
2018年流行色
| w3-2018-red-pear |
| w3-2018-valiant-poppy |
| w3-2018-nebulas-blue |
| w3-2018-ceylon-yellow |
| w3-2018-martini-olive |
| w3-2018-russet-orange |
| w3-2018-ultra-violet |
| w3-2018-crocus-petal |
| w3-2018-limelight |
| w3-2018-quetzal-green |
| w3-2018-sargasso-sea |
| w3-2018-tofu |
| w3-2018-almond-buff |
| w3-2018-quiet-gray |
| w3-2018-meerkat |
| w3-2018-meadowlark |
| w3-2018-cherry-tomato |
| w3-2018-little-boy-blue |
| w3-2018-chili-oil |
| w3-2018-blooming-dahlia |
| w3-2018-arcadia |
| w3-2018-pink-emperador |
| w3-2018-almost-mauve |
| w3-2018-spring-crocus |
| w3-2018-lime-punch |
| w3-2018-sailor-blue |
| w3-2018-harbor-mist |
| w3-2018-warm-sand |
| w3-2018-coconut-milk |
实例
<div class="w3-2018-ultra-violet">Ultra Violet</div>
<div class="w3-2018-cherry-tomato">Cherry Tomato</div>
流行色选自色彩趋势。
2017年流行色
| w3-2017-greenery |
| w3-2017-grenadine |
| w3-2017-tawny-port |
| w3-2017-ballet-slipper |
| w3-2017-butterum |
| w3-2017-navy-peony |
| w3-2017-neutral-grey |
| w3-2017-shaded-spruce |
| w3-2017-golden-lime |
| w3-2017-marina |
| w3-2017-autumn-maple |
| w3-2017-niagra |
| w3-2017-primrose-yellow |
| w3-2017-lapis-blue |
| w3-2017-flame |
| w3-2017-island-paradise |
| w3-2017-pale-dogwood |
| w3-2017-pink-yarrow |
| w3-2017-kale |
| w3-2017-hazelnut |
实例
<div class="w3-2017-greenery">Greenery</div>
<div class="w3-2017-flame">Flame</div>
流行色选自色彩趋势。
鲜艳的颜色
| w3-vivid-pink |
| w3-vivid-red |
| w3-vivid-orange |
| w3-vivid-yellow |
| w3-vivid-green |
| w3-vivid-blue |
| w3-vivid-violet |
| w3-vivid-purple |
| w3-vivid-black |
| w3-vivid-white |
| w3-vivid-yellowish-pink |
| w3-vivid-reddish-orange |
| w3-vivid-orange-yellow |
| w3-vivid-greenish-yellow |
| w3-vivid-yellow-green |
| w3-vivid-yellowish-green |
| w3-vivid-bluish-green |
| w3-vivid-greenish-blue |
| w3-vivid-purplish-blue |
| w3-vivid-reddish-purple |
| w3-vivid-purplish-red |
实例
<div class="w3-vivid-red">
<p>London is the most populous city in the
United Kingdom,
with a metropolitan area of over 9 million
inhabitants.</p>
</div>
Try It Yourself »
下载 CSS »
鲜艳的颜色在 ISCC-NBS 中定义。
食品颜色
| w3-food-apple |
| w3-food-aspargus |
| w3-food-apricot |
| w3-food-aubergine |
| w3-food-avocado |
| w3-food-banana |
| w3-food-butter |
| w3-food-blueberry |
| w3-food-cherry |
| w3-food-chocolate |
| w3-food-cranberry |
| w3-food-coffee |
| w3-food-egg |
| w3-food-grape |
| w3-food-kiwi |
| w3-food-lemon |
| w3-food-lime |
| w3-food-mango |
| w3-food-mushroom |
| w3-food-mustard |
| w3-food-mint |
| w3-food-olive |
| w3-food-orange |
| w3-food-pea |
| w3-food-peach |
| w3-food-pear |
| w3-food-pistachio |
| w3-food-plum |
| w3-food-raspberry |
| w3-food-saffron |
| w3-food-salmon |
| w3-food-spearmint |
| w3-food-squash |
| w3-food-strawberry |
| w3-food-tomato |
| w3-food-wheat |
| w3-food-wine |
实例
<div class="w3-food-apple">Apple</div>
<div
class="w3-food-banana">Banana</div>
Try It Yourself »
Try All »
下载 CSS »
迷彩颜色
| w3-camo-brown |
| w3-camo-red |
| w3-camo-olive |
| w3-camo-field |
| w3-camo-earth |
| w3-camo-sand |
| w3-camo-tan |
| w3-camo-sandstone |
| w3-camo-dark-green |
| w3-camo-forest |
| w3-camo-light-green |
| w3-camo-green |
| w3-camo-dark-grey |
| w3-camo-grey |
| w3-camo-black |
实例
<div class="w3-camo-earth">Camouflaged Truck</div>
<div
class="w3-camo-grey">Camouflaged Ship</div>
Try It Yourself »
Try All »
下载 CSS »
美国迷彩颜色在联邦标准 595 中定义。
