W3.CSS 颜色库

颜色库

颜色库是小型 CSS 文件,包含常用的颜色值,如安全标准、交通指示牌颜色、时尚颜色、伪装颜色等。

Schoolbus
Falcon Ridge Parkway
STOP


如何使用颜色库

颜色库很容易使用。只需在你的网页中添加一个到颜色库的链接:

<link rel="stylesheet" href="https://www.w3schools.cn/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

实例

<div class="w3-highway-red">STOP</div>
Try It Yourself »   Try All »   下载此 CSS »

美国高速公路颜色在联邦标准 595 中定义。


美国安全色

w3-safety-red
w3-safety-orange
w3-safety-yellow
w3-safety-green
w3-safety-blue
w3-safety-purple

实例

<div class="w3-safety-red">DANGER</div>
Try It Yourself »   Try All »   下载 CSS »

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>

Try It Yourself »  Try All »  Download the CSS »


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>

Try It Yourself »  Try All »  Download the CSS »

流行色选自色彩趋势


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>

Try It Yourself »  Try All »  Download the CSS »

流行色选自色彩趋势


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>

Try It Yourself »  Try All »  Download the CSS »

流行色选自色彩趋势


鲜艳的颜色

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 中定义。