W3.CSS Colors (颜色)
W3.CSS 中使用的默认配色方案受“材料设计颜色”（营销，路标和便签中使用的颜色）的启发。
实例
<tr>
<td class="w3-panel w3-red" style="width:50%"><p><a target="_blank" href="tryit.asp?filename=tryw3css_colors_red"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">红</font></font></a></p></td>
</tr>
尝试一下 »
点击“尝试一下”按钮查看在线实例
着色HTML元素
w3-color 和 w3-text-color 类可用于着色任何 HTML 元素：
容器：
实例
<div class="w3-panel w3-orange">
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">伦敦是英国人口最多的城市，拥有超过900万居民。</font></font></p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
纽扣：
实例
<button class="w3-btn w3-margin-bottom w3-large w3-teal"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">蓝绿色</font></font></button>
尝试一下 »
点击“尝试一下”按钮查看在线实例
文本：
实例
<div>
<span class="w3-xlarge w3-text-red w3-margin-right"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">红色</font></font></span>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
边框：
实例
<div style="width:50%">
<div class="w3-panel w3-border w3-border-red"><p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">红</font></font></p></div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
表格：
实例
<table class="w3-table w3-bordered w3-light-gray">
<tbody><tr class="w3-black">
<th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">名称</font></font></th>
<th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">点数</font></font></th>
</tr>
</tbody>
</table>
尝试一下 »
点击“尝试一下”按钮查看在线实例
卡片：
实例
<<div class="w3-card-4 w3-yellow" style="width:50%">
<div class="w3-container">
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">汽车是用于运输的轮式自供电汽车。</font><font style="vertical-align: inherit;">该术语的大多数定义都规定汽车的设计主要是在道路上行驶，可容纳1至8人的座位，通常具有四个车轮。</font><font style="vertical-align: inherit;">（维基百科）</font></font></p>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
背景颜色
w3-color 类设置任何HTML元素的背景色：
gray 和 grey 在所有 W3.CSS 类中都是可以互换的。
文本颜色
w3-text-color 类别设置任何 HTML 元素的文本颜色：
伦敦
伦敦是英国人口最多的城市，拥有超过900万居民。
伦敦
伦敦是英国人口最多的城市，拥有超过900万居民。
实例
<div class="w3-text-red">
<h2>伦敦</h2>
<p>伦敦是英国人口最多的城市，拥有超过900万居民。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
悬停颜色
w3-hover-color 类定义为任何 HTML 元素的背景悬停颜色：
实例
<h2>伦敦</h2>
<p>伦敦是英国人口最多的城市，拥有超过900万居民。</p>
</div>尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-hover-text-color 类定义的任何 HTML 元素的文本悬停颜色：
实例
<div class="w3-container w3-orange w3-hover-text-white">
<h2>伦敦</h2>
<p>伦敦是英国人口最多的城市，拥有超过900万居民。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
颜色库
除了标准的 W3.CSS 颜色外，W3.CSS 还可以使用许多不同颜色库中的颜色：
Windows 颜色：
时尚色彩：
公路颜色：
在本教程的后续章节中，您将学到更多有关颜色的知识。