W3.CSS 颜色库

颜色库

颜色库是小型 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>

亲自试一试»

美国公路颜色

w3-高速公路-棕色

w3-高速公路-红色

w3-高速公路-橙色

w3-高速公路-校车

w3-高速公路-黄色

w3-高速公路-绿色

w3-高速公路-蓝色

示例

亲自试一试» 全部尝试 » 下载 CSS »

高速公路颜色定义为联邦标准 595。

美国安全色

w3-安全-红

w3-安全橙

w3-安全-黄

w3-安全-绿色

w3-安全-蓝色

w3-安全-紫色

示例

<div class="w3-safety-red">DANGER</div>

亲自试一试» 全部尝试 » 下载 CSS »

美国安全色定义于联邦标准 595。

欧洲信号颜色

w3-信号-黄色

w3-信号-橙色

w3-信号-红色

w3-信号-紫罗兰色

w3-信号-蓝色

w3-信号-绿色

w3-信号-灰色

w3-信号-棕色

w3-信号-白色

w3-信号-黑色

示例

亲自试一试» 全部尝试 » 下载 CSS »

欧洲信号颜色定义在RAL 颜色标准。

鲜艳的色彩

w3-鲜艳-粉色

w3-鲜红

w3-鲜艳的橙色

w3-鲜黄

w3-鲜绿色

w3-鲜艳的蓝色

w3-鲜艳的紫罗兰色

w3-鲜艳紫色

w3-鲜艳-黑色

w3-亮白

w3-鲜艳-黄-粉红

w3-鲜艳红橙色

w3-鲜艳橙黄色

w3-鲜艳的绿黄色

w3-鲜艳黄绿色

w3-鲜艳-蓝绿色

w3-鲜艳-绿-蓝

w3-鲜艳的紫蓝色

w3-鲜艳红紫色

w3-鲜艳紫红色

示例

<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>

亲自试一试» 下载 CSS »

鲜艳的颜色定义为ISCC-NBS。

食用色素

w3-食品-苹果

w3-食物-芦笋

w3-食品-杏

w3-食品-茄子

w3-食品-鳄梨

w3-食物-香蕉

w3-食物黄油

w3-食品-蓝莓

w3-食品-樱桃

w3-食品-巧克力

w3-食品-蔓越莓

w3-食品-咖啡

w3-食物-鸡蛋

w3-食品-葡萄

w3-食品-猕猴桃

w3-食物-柠檬

w3-食品-石灰

w3-食品-芒果

w3-食物-蘑菇

w3-食品-芥末

w3-食品-薄荷

w3-食品-橄榄

w3-食品-橙子

w3-食品-豌豆

w3-食品-桃子

w3-食品-梨

w3-食品-开心果

w3-食品-李子

w3-食品-覆盆子

w3-食品-藏红花

w3-食品-三文鱼

w3-食品-留兰香

w3-食物南瓜

w3-食品-草莓

w3-食物-番茄

w3-食品-小麦

w3-食品-酒

示例

<div class="w3-food-apple">Apple</div>
<div class="w3-food-banana">Banana</div>

亲自试一试» 全部尝试 » 下载 CSS »

迷彩颜色

w3-迷彩-棕色

w3-迷彩-红色

w3-迷彩-橄榄色

W3-迷彩-场

w3-迷彩-地球

w3-迷彩-沙色

W3-迷彩-棕褐色

w3-迷彩-砂岩

w3-迷彩-深绿色

w3-迷彩-森林

w3-迷彩-浅绿色

w3-迷彩-绿色

W3-迷彩-深灰色

w3-迷彩-灰色

w3-迷彩-黑色

示例

<div class="w3-camo-earth">Camouflaged Truck</div>
<div class="w3-camo-grey">Camouflaged Ship</div>

亲自试一试» 全部尝试 » 下载 CSS »

迷彩颜色定义在联邦标准 595。