W3.CSS 颜色

W3.CSS 中使用的默认配色方案受到 Material Design Colors（营销、路标和便签中使用的颜色）的启发。

为 HTML 元素着色

这个w3-颜色和w3-文本-颜色类可用于为任何 HTML 元素着色：

容器：

伦敦是英国人口最多的城市，大都市区人口超过 900 万。

按钮：

文本：

红色的紫色的蓝色的绿色的橙子

边框：

红色的

绿色的

蓝色的

黄色的

灰色的

黑色的

表格：

姓名	积分
吉尔·史密斯	50
伊芙·杰克逊	94
亚当·约翰逊	67

牌：

汽车是一种用于运输的轮式自驱动机动车辆。该术语的大多数定义都指定汽车主要在道路上运行，可容纳一到八人，通常有四个轮子。（维基百科）

背景颜色

这个w3-颜色类设置任何 HTML 元素的背景颜色：

伦敦

伦敦是英国人口最多的城市，大都市区人口超过 900 万。

伦敦

伦敦是英国人口最多的城市，大都市区人口超过 900 万。

伦敦

伦敦是英国人口最多的城市，大都市区人口超过 900 万。

示例

<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

亲自试一试»

颜色灰色的和灰色的在所有 W3.CSS 类中可以互换。

文字颜色

这个w3-文本-颜色类设置任何 HTML 元素的文本颜色：

伦敦

伦敦是英国人口最多的城市，大都市区人口超过 900 万。

伦敦

伦敦是英国人口最多的城市，大都市区人口超过 900 万。

示例

<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>

亲自试一试»

悬停颜色

这个w3-悬停-颜色类定义任何 HTML 元素的背景悬停颜色：

伦敦

伦敦是英国人口最多的城市，大都市区人口超过 900 万。

示例

<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

亲自试一试»

这个w3-悬停文本-颜色类定义任何 HTML 元素的文本悬停颜色：

伦敦

伦敦是英国人口最多的城市，大都市区人口超过 900 万。

示例

<div class="w3-container w3-orange w3-hover-text-white">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

亲自试一试»

颜色库

除了标准的 W3.CSS 颜色之外，W3.CSS 还可以使用许多不同颜色库中的颜色：

窗户颜色：

酸橙

绿色的

橄榄

翠

青色

钢

青色

蓝色的

靛青

钴

紫色

紫红色

粉色的

品红

红色的

橙子

琥珀色

黄色的

棕色的

灰褐色

赭色

赤红

单击此处了解有关 Windows 颜色的更多信息

时尚颜色：

火焰

绿化

码头

报春花
黄色的

中性灰

阴影
云杉

海军
牡丹

黄褐色
港口

单击此处了解有关时尚色彩的更多信息

公路颜色：

红色的

绿色的

蓝色的

黄色的

单击此处了解有关颜色库的更多信息

在本教程的后续章节中，您将学到更多有关颜色的知识。

红色的	粉色的
紫色的	深紫色
靛青	蓝色的
浅蓝色	青色
阿夸	青色
绿色的	浅绿色
酸橙	沙
卡其色	黄色的
琥珀色	橙子
深橙色	蓝灰色
棕色的	浅灰
灰色的	深灰色
淡红色	淡黄色
浅绿色	淡蓝