W3.CSS 顏色庫
顏色庫
顏色庫是小型 CSS 檔案，其中包含常用的顏色值，例如安全標準、公路顏色、時尚顏色、迷彩顏色等。
校車色
Falcon Ridge Parkway
停止
如何使用顏色庫
顏色庫易於使用。只需在您的網頁中新增一個顏色庫的連結即可。
<link rel="stylesheet" href="https://w3schools.tw/lib/w3-colors-highway.css">
然後，將類名新增到您想著色的 HTML 元素上。
<div class="w3-highway-schoolbus">校車色</div>
<div class="w3-highway-green">獵鷹嶺公園</div>
<div class="w3-highway-red">停止</div>
自己試試 »
美國公路顏色
| 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 |
美國安全顏色定義在 聯邦標準 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">停止</div>
<div class="w3-signal-yellow">等待</div>
<div class="w3-signal-green">前進</div>
自己動手試試 » 全部試試 » 下載 CSS »歐洲訊號顏色定義在 RAL 顏色標準 中。
鮮豔的顏色
| 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>倫敦是英國人口最多的城市，</p>
大都市區人口超過 900 萬。（維基百科）</p>
</div>
自己動手試試 » 下載 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 |
迷彩顏色
| 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">迷彩卡車</div>
<div class="w3-camo-grey">迷彩船</div>
自己動手試試 » 全部試試 » 下載 CSS »迷彩顏色定義在 聯邦標準 595 中。
