HTML 颜色
一、什么是 HTML 颜色
HTML 颜色用于在网页中为文字、背景、边框及其他元素指定视觉效果。颜色不仅提升页面美观，还能改善可读性和交互体验。
在 HTML 中，我们通常通过 CSS 来设置颜色，常见的属性包括 color（字体颜色）、background-color（背景颜色）、border-color（边框颜色）等。
二、颜色表示方法
1. 颜色名称（Named Colors）
HTML 支持 140 多种标准颜色名称，如 red、blue、lightgreen 等。使用简单，但可选范围有限。
<p style="color: tomato;">该文字显示为番茄红</p>
2. 十六进制（Heximal）
以 # 开头，后跟 3 或 6 位十六进制数：
#RRGGBB：例如#FF0000表示纯红。- 简写
#RGB：例如#F00等同于#FF0000。
<p style="color: #4CAF50;">该文字显示为绿色</p>
3. RGB 颜色（RGB）
使用 rgb(r, g, b)，每个值范围 0–255：
<p style="color: rgb(255, 165, 0);">该文字显示为橙色</p>
4. RGBA 颜色（RGBA，带透明度）
在 RGB 基础上添加 alpha 通道 alpha（0.0–1.0）：
<div style="background-color: rgba(0, 0, 255, 0.3); width:200px; height:50px;">
半透明蓝色背景
</div>
5. HSL 颜色（Hue, Saturation, Lightness）
使用 hsl(hue, saturation%, lightness%)：
<p style="color: hsl(120, 100%, 25%);">深绿色文字</p>
6. HSLA 颜色（带透明度的 HSL）
<p style="background-color: hsla(200, 100%, 50%, 0.4);">半透明天蓝背景</p>
7. CSS 变量（Custom Properties）
可定义变量，便于全局统一管理：
:root {
--主色: #3498db;
--辅色: #2ecc71;
}
.button-primary {
background-color: var(--主色);
color: white;
}
三、如何在 HTML/CSS 中使用颜色
1. 内联样式（Inline Style）
<p style="color: #333;">内联样式文本</p>
2. 内部样式表（Internal CSS）
<style>
h2 { color: teal; }
.highlight { background-color: #ffeb3b; }
</style>
3. 外部样式表（External CSS）
<link rel="stylesheet" href="styles.css">
/* styles.css */
.title { color: #8e44ad; }
.card { border: 1px solid #ddd; }
四、配色建议与工具
- 对比度：确保文字与背景有足够对比度，遵循 WCAG 2.1 标准（对比度建议至少 4.5:1）。
- 配色工具：
- Adobe Color：https://color.adobe.com/zh/create
- Coolors：https://coolors.co/
- 色轮、配色板插件（如 VS Code 中的 Color Highlight、Live Sass Compiler）。
五、常见场景示例
- 导航栏高亮
.nav-item.active { color: #e74c3c; }
- 按钮渐变背景
.btn-gradient {
background: linear-gradient(90deg, #ff7e5f, #feb47b);
color: white;
}
- 暗黑模式支持
@media (prefers-color-scheme: dark) {
body { background-color: #121212; color: #e0e0e0; }
}
六、学习资源
- MDN 颜色入门：https://developer.mozilla.org/zh-CN/docs/Web/CSS/color
- W3Schools 颜色教程：https://www.w3schools.com/colors/default.asp
- CSS-Tricks 颜色技巧：https://css-tricks.com/almanac/properties/c/color/
以上内容帮助你全面掌握 HTML 与 CSS 中的颜色设置与应用，提升页面视觉效果与可访问性。