codecamp

W3.CSS Color (Libraries)

颜色库

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


禁止
  
通行
  
注意
  
指令

如何使用颜色库

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

<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3-colors-highway.css">

接着给你想着色的HTML元素添加一个类名:

实例

<div class="w3-highway-red">禁止</div>
<div class="w3-highway-green">通行</div>
<div class="w3-highway-yellow">注意</div>
<div class="w3-highway-blue">指令</div>

尝试一下 »

中国交通标志指示牌的颜色,下载此CSS

w3-higtway-棕色
w3-higtway-红色
w3-higtway-橙色
w3-higtway-绿色
w3-higtway-蓝色
w3-higtway-白色
w3-higtway-金色
w3-higtway-荧光色
w3-higtway-黑色

实例

<div class="w3-highway-red">禁止</div>

尝试一下 »  尝试所有 »

中国的安全色 下载此CSS

w3-higtway-红色
w3-higtway-绿色
w3-higtway-黄色
w3-higtway-蓝色

实例

<div class="w3-safety-red">禁止</div>

尝试一下 »  尝试所有 »

欧洲交通信号颜色 下载此CSS

w3-signal-黄色
w3-signal-橙色
w3-signal-红色
w3-signal-紫罗兰色
w3-signal-蓝色
w3-signal-绿色
w3-signal-灰色
w3-signal-棕色
w3-signal-白色
w3-signal-黑色

实例

<div class="w3-signal-red">禁止</div>
<div class="w3-signal-yellow">等待</div>
<div class="w3-signal-green">通行</div>

尝试一下 »  尝试所有 »

2019秋冬时尚色/ 2020秋冬时尚色 下载此CSS

Chili Fiesta
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">黑暗的切达干酪</div> 
<div class="w3-2019-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">假日红</div>
<div class="w3-2019-princess-blue">公主蓝</div>

尝试一下 »  尝试所有 »

2018年流行色 下载此CSS

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
w32018-lime-punch
w3-2018-sailor-blue
w3-2018-harbor-mist
w3-2018-warm-sand
w3-2018-coconut-milk

实例

<div class="w3-2018-ultra-violet">紫外线</div> 
<div class="w3-2018-cherry-tomato">樱桃番茄</div> 

尝试一下 »  尝试所有 »

2017年流行色 下载此CSS

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">绿色植物</div> 
<div class="w3-2017-flame">火焰</div> 

尝试一下 »  尝试所有 »

鲜艳的色彩 下载此CSS

w3-鲜艳-粉色
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>伦敦是英国人口最多的城市,其都市区人口超过900万。</p> 
</div>

尝试一下 »  

食物的颜色 下载此CSS

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">青苹果</div>
<div class="w3-food-banana">香蕉</div>

尝试一下 »  尝试所有 »

迷彩颜色 下载此CSS

w3-迷彩-棕色
w3-迷彩-红色
w3-迷彩-紫罗兰色
w3-迷彩-田野色
w3-迷彩-土色
w3-迷彩-沙色
w3-迷彩-古铜色
w3-迷彩-砂岩色
w3-迷彩-暗绿色
w3-迷彩-森林色
w3-迷彩-青绿色
w3-迷彩-绿色
w3-迷彩-暗灰色
w3-迷彩-灰色
w3-迷彩-黑色

实例

<div class="w3-camo-earth">伪装卡车</div> 
<div class="w3-camo-grey">伪装船</div> 

尝试一下 »  尝试所有 »

W3.CSS Color (iOS)
W3.CSS Color (方案)
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }