异常教程

HTML 颜色值（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在网页设计与开发中，颜色是塑造视觉体验的核心元素之一。无论是构建一个简洁的登录页面，还是设计复杂的交互界面，合理使用 HTML 颜色值都能显著提升用户体验。对于编程初学者而言，颜色值的学习往往从简单的预设名称开始；而中级开发者则需要掌握更灵活的表示方法，如十六进制代码、RGB 和 HSL 函数式语法。本文将系统性地讲解 HTML 颜色值的原理、类型及应用场景，并通过案例演示如何高效实现色彩控制。

一、HTML 颜色值的基础概念

1.1 什么是 HTML 颜色值？

HTML 颜色值是用于指定网页元素颜色的编码系统，开发者可通过这些编码精确控制文本、背景、边框等元素的颜色。其本质是将颜色转化为计算机可识别的数值或符号，例如 red、#FF0000 或 rgb(255,0,0)。

1.2 颜色值的分类

HTML 颜色值主要分为以下三类：

  1. 预定义颜色名称：如 blue、green 等，共 140 种标准名称；
  2. 十六进制颜色代码：以 # 开头的 3 或 6 位十六进制数，例如 #00FF00；
  3. 函数式表示法：通过 rgb()、rgba()、hsl() 或 hsla() 函数定义颜色，支持透明度控制。

二、预定义颜色名称：快速上手的颜色选择

2.1 简单直接的使用方式

预定义颜色名称是 HTML 颜色值中最基础的类型，适合快速开发。例如：

<p style="color: crimson;">这段文字是深红色</p>  
<div style="background-color: lightblue;">这是一个浅蓝色背景的容器</div>

2.2 优缺点分析

优点：

  • 记忆成本低，适合新手；
  • 兼容性极强，所有浏览器均支持。

缺点：

  • 颜色选项有限，无法精确控制色调；
  • 名称可能因浏览器或操作系统存在细微差异。

2.3 常用颜色名称推荐

下表列出了一些高频使用的颜色名称及其对应的十六进制代码：

颜色名称十六进制代码预览效果
red#FF0000⬜⬛⬛⬛⬛⬛⬛⬛
blue#0000FF⬜⬛⬛⬛⬛⬛⬛⬛
green#00FF00⬜⬛⬛⬛⬛⬛⬛⬛
lightgray#D3D3D3⬜⬛⬛⬛⬛⬛⬛⬛

三、十六进制颜色代码：精确控制的“数字调色盘”

3.1 十六进制编码的原理

十六进制颜色代码通过 RRGGBB 格式表示红、绿、蓝三种颜色的强度值，每个通道的取值范围是 00（最小）到 FF（最大）。例如：

<!-- 纯绿色 -->  
<div style="background-color: #00FF00"></div>  

<!-- 浅灰色 -->  
<div style="background-color: #D3D3D3"></div>

3.2 简写形式：从 6 位到 3 位的压缩

当每对颜色通道的十六进制值相同时，可以简化为 3 位代码。例如：

  • #00FF00 可简化为 #0F0（红 00，绿 FF，蓝 00）；
  • #D3D3D3 可简化为 #DDD。

3.3 十六进制的进阶技巧

  • 渐变色设计：通过调整数值实现平滑过渡；
  • 工具辅助：使用在线工具（如 Adobe Color）生成配色方案。

四、函数式表示法：灵活控制透明度与色相

4.1 RGB 模型：基于光的混合原理

RGB（Red-Green-Blue）模型通过三个数值分别表示红、绿、蓝三原色的强度，取值范围为 0-255。例如：

<!-- 纯蓝色 -->  
<div style="color: rgb(0,0,255)">Hello World</div>  

<!-- 半透明灰色 -->  
<div style="background: rgba(128,128,128,0.5)">半透明背景</div>

其中，rgba() 的第四个参数 0.5 表示 50% 透明度。

4.2 HSL 模型：基于人类感知的色彩控制

HSL（Hue-Saturation-Luminance）模型更贴近人类对颜色的直观理解：

  • 色相（Hue）：颜色在光谱中的位置，0°（红色）到 360°（红色循环）；
  • 饱和度（Saturation）：颜色的纯度，0% 为灰色，100% 为最鲜艳；
  • 亮度（Luminance）：颜色的明暗程度，0% 为黑色，100% 为白色。

示例代码：

<!-- 饱和度为 50% 的蓝色 -->  
<div style="background: hsl(240,50%,50%)"></div>  

<!-- 低亮度的紫色 -->  
<div style="color: hsla(300,100%,50%,0.8)">紫色文字</div>

4.3 函数式语法的适用场景

  • 动态效果：通过 JavaScript 实时调整颜色参数；
  • 无障碍设计：通过调整亮度确保颜色对比度达标。

五、实战案例：构建色彩渐变导航栏

5.1 需求分析

设计一个包含三个标签的导航栏，要求：

  1. 活动标签的背景色为渐变色；
  2. 非活动标签的背景色为低饱和度的灰色；
  3. 文字颜色随背景色变化保持可读性。

5.2 代码实现

<style>  
.nav {  
  display: flex;  
  gap: 20px;  
  padding: 10px;  
}  

.nav__item {  
  padding: 10px 20px;  
  border-radius: 5px;  
  color: hsl(0,0%,100%); /* 白色文字 */  
}  

.nav__item--active {  
  background: linear-gradient(  
    to right,  
    #FF6B6B, /* 十六进制红色 */  
    hsl(360,100%,50%) /* 饱和度 100% 的红色 */  
  );  
}  

.nav__item--inactive {  
  background: rgba(128,128,128,0.3); /* 半透明灰色 */  
}  
</style>  

<div class="nav">  
  <div class="nav__item nav__item--active">首页</div>  
  <div class="nav__item nav__item--inactive">产品</div>  
  <div class="nav__item nav__item--inactive">关于我们</div>  
</div>

5.3 效果解析

  • 渐变色：通过 linear-gradient() 结合十六进制和 HSL 实现动态过渡；
  • 可读性保障：白色文字在深色背景上对比度高，符合 WCAG 标准；
  • 代码复用：通过 CSS 类名分离样式与结构，便于维护。

六、进阶技巧：颜色值的调试与优化

6.1 开发者工具的实时调试

在 Chrome 或 Firefox 的开发者工具中，可通过以下步骤快速调整颜色：

  1. 右键点击目标元素，选择“检查”；
  2. 在“Styles”面板中找到颜色属性；
  3. 点击颜色值旁的色块，进入调色板选择颜色。

6.2 色彩对比度检查

使用工具如 WebAIM Contrast Checker 验证文本与背景的对比度，确保无障碍访问。例如：

<!-- 不符合标准的组合 -->  
<div style="background: #000; color: #121212">文字太暗</div>  

<!-- 优化后的版本 -->  
<div style="background: #000; color: #FFF">可读性提升</div>

6.3 自动化工具的辅助

  • PostCSS 插件：将颜色值转换为更兼容的格式；
  • CSS 预处理器：通过变量统一管理全局颜色（如 Sass 的 $primary-color）。

结论

掌握 HTML 颜色值不仅是技术基础，更是提升设计能力的关键。从预定义名称到函数式语法，开发者需根据场景选择最合适的表示方式。通过结合十六进制的精准控制、HSL 的人性化学理解释，以及透明度的灵活运用，可以创造出既美观又实用的网页界面。未来随着 CSS 变量和现代框架的普及，颜色管理将更加智能化，但其底层逻辑始终围绕着本文讲解的核心原理展开。

关键词布局说明（仅作内部参考，非文章内容）

  • 标题与段落中自然嵌入“HTML 颜色值”关键词；
  • 在代码示例和案例中通过注释间接关联；
  • 结尾总结部分强化核心概念的关联性。

最新发布

查看更多文章