在 Web 开发与 UI 设计的世界里，色彩不仅仅是视觉的装饰，更是传递情感、引导用户交互和建立品牌识别度的核心要素。作为开发者，我们经常需要在代码中精确地定义颜色。你一定在 CSS 文件或设计稿中无数次地见过 INLINECODEe5edff24 或 INLINECODE81b09c28 这样的代码。但你是否真正思考过这些数值背后的含义？或者当设计师向你描述一种“带有深红色的酒红”时，你该如何在代码中精准地实现它？
在这篇文章中，我们将不仅仅停留在表面的颜色列表上，而是要深入探讨色彩表示背后的技术原理。我们将为你详细介绍各种红色调的名称及其对应的十六进制（HEX）、RGB 和 HSL 数值。更重要的是，我们将通过实际代码演示，教你如何在现代 Web 开发中灵活运用这些色彩模型。
色彩模型深度解析：为什么我们需要三种表示法？
在开始列出具体的色值之前，让我们先快速回顾一下这三种最常用的色彩模型。了解它们的区别，能帮你写出更高效、更易维护的代码。
- HEX (十六进制): 这是你最可能在 HTML 和 CSS 中看到的格式，例如 INLINECODE946cd834。它本质上是为计算机（基于二进制）优化的。每两个字符代表红、绿、蓝（RGB）通道中的一个，取值范围从 INLINECODE0d0c19b3 到
FF（即十进制的 0-255）。
- RGB (红绿蓝): 这是一个基于光的加色模型。在 CSS 中，我们通常写为
rgb(255, 0, 0)。它是直接对应屏幕显示原理的模型。
- HSL (色相, 饱和度, 亮度): 这是一个基于人类感知的模型。
hsl(0, 100%, 50%)。对开发者来说，HSL 往往是最直观的。当你想要“把红色变暗一点”或者“降低饱和度”时，你只需要调整 L 或 S 的值，而不需要像在 RGB 中那样去心算红、绿、蓝三个数值的复杂平衡。
颜色库与交互式组件：从静态到动态
为了让我们对颜色的探索更加生动，我们设计了一个模拟的“交互式颜色卡片”组件。这不仅仅是一个静态的表格，而是一个你可以直接在项目中使用的 UI 模式。让我们来看看如何用简单的 HTML、CSS 和 JavaScript 实现它。
#### 实战案例：构建动态色彩卡片
设想一下，你需要在一个页面中展示一组主题色，并允许用户点击后复制该颜色的代码，或者改变页面的主题色。以下是一个完整的代码示例，展示了如何结合上述色彩模型来实现这一功能。
HTML 结构:
我们创建一个简单的卡片布局，包含一个颜色预览区和信息显示区。
Blood Red
HEX: #880808
RGB: rgb(136, 8, 8)
CSS 样式:
这里我们使用 CSS 变量来管理颜色，这是现代前端开发的最佳实践。它可以让我们轻松地实现“即时变色”功能。
/* :root 定义全局 CSS 变量，方便统一管理 */
:root {
--current-color: #880808; /* 初始颜色：Blood Red */
--text-color: #333;
}
body {
font-family: ‘Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
}
.color-card {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
width: 300px;
text-align: center;
transition: transform 0.3s ease;
}
.color-card:hover {
transform: translateY(-5px);
}
/* 动态预览区域：使用 var() 引用变量 */
.color-preview {
width: 100%;
height: 150px;
background-color: var(--current-color);
border-radius: 8px;
margin-bottom: 15px;
transition: background-color 0.5s ease; /* 平滑过渡效果 */
}
.color-info p {
font-size: 0.9rem;
color: var(--text-color);
margin: 5px 0;
font-family: monospace; /* 使用等宽字体显示代码更专业 */
}
.controls {
margin-top: 20px;
display: flex;
gap: 10px;
}
.btn-theme {
padding: 8px 16px;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #333;
color: white;
transition: opacity 0.2s;
}
.btn-theme:hover {
opacity: 0.8;
}
JavaScript 逻辑:
现在，让我们编写脚本来处理交互。我们将不仅更新视觉颜色，还会动态计算并显示 RGB 和 HSL 值。
// 更新颜色的主函数
function updateColor(hexCode, colorName) {
// 1. 更新 CSS 变量，实现即时视觉反馈
document.documentElement.style.setProperty(‘--current-color‘, hexCode);
// 2. 更新文本内容
document.querySelector(‘.color-card h3‘).textContent = colorName;
document.getElementById(‘hex-val‘).textContent = hexCode;
// 3. 将 HEX 转换为 RGB 并更新
const rgb = hexToRgb(hexCode);
document.getElementById(‘rgb-val‘).textContent = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
// 实用见解：你可以在这里添加复制到剪贴板的功能
console.log(`颜色已切换为: ${colorName} - ${hexCode}`);
}
// 辅助函数：HEX 转 RGB
function hexToRgb(hex) {
// 去掉 # 号
hex = hex.replace(/^#/, ‘‘);
// 解析数值
const bigint = parseInt(hex, 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return { r, g, b };
}
性能优化与最佳实践
在上面的代码中，我们使用了 CSS 变量（INLINECODE427471f6）而不是直接用 JavaScript 操作每个元素的 INLINECODE4a4cfb7f。这是一个重要的性能优化点。
- CSS 变量 vs. 直接样式操作: 通过只修改根元素上的一个变量值，浏览器会自动重绘所有引用该变量的地方。这比 JS 遍历 DOM 树去修改每个元素要高效得多。
- 过渡效果: 注意 CSS 中的
transition: background-color 0.5s ease;。这行代码通过硬件加速提供了流畅的 60fps 动画体验，避免了颜色突变给用户带来的突兀感。
常见错误与解决方案
问题：为什么我的红色在不同屏幕上看起来不一样？
这是一个让无数前端开发者头疼的问题。原因在于色彩空间。INLINECODEfbe5f814 在 sRGB（Web 标准）和 P3（广色域显示器）标准下显示出的物理色度是不同的。如果你正在开发一个对色彩要求极高的专业设计工具，你需要考虑使用 CSS Color Module Level 4 中引入的新颜色函数，如 INLINECODEc9079f79，以确保在现代显示器上色彩的一致性。
红色系色彩名称及 HEX、RGB、HSL 数值速查表
为了方便你在项目中快速查找，我们整理了这份详尽的红色系色卡。你可以直接将这些数值应用到你的 CSS 变量定义中。
Name
RGB Code
—
—
Blood Red
rgb(136, 8, 8)
Brick Red
rgb(170, 74, 68)
Bright Red
rgb(238, 75, 43)
Brown
rgb(165, 42, 42)
Burgundy
rgb(128, 0, 32)
Burnt Umber
rgb(110, 38, 14)
Burnt Orange
rgb(204, 85, 0)
Burnt Sienna
rgb(233, 116, 81)
Byzantium
rgb(112, 41, 99)
Cadmium Red
rgb(210, 43, 43)
Cardinal Red
rgb(196, 30, 58)
Carmine
rgb(215, 0, 64)
Cerise
rgb(222, 49, 99)
Cherry
rgb(210, 4, 45)
Chestnut
rgb(149, 69, 53)
Claret
rgb(129, 19, 49)
Coral Pink
rgb(248, 131, 121)
Cordovan
rgb(129, 65, 65)
Crimson
rgb(220, 20, 60)
Dark Red
rgb(139, 0, 0)
Falu Red
rgb(123, 24, 24)
Garnet
rgb(154, 42, 42)
Mahogany
rgb(192, 64, 0)
Maroon
rgb(128, 0, 0)
Marsala
rgb(152, 104, 104)
Mulberry
rgb(119, 7, 55)
Neon Red
rgb(255, 49, 49)
Oxblood
rgb(74, 4, 4)
Pastel Red
rgb(250, 160, 160)
Persimmon
rgb(236, 88, 0)
Poppy
rgb(227, 83, 53)
Puce
rgb(169, 92, 104)
Raspberry
rgb(227, 11, 92)
Red
rgb(255, 0, 0)
Red Brown
rgb(165, 42, 42)
Red Ochre
rgb(145, 56, 49)
Red Orange
rgb(255, 68, 51)
Red Purple
rgb(149, 53, 83)
Rose Red
rgb(194, 30, 86)
Ruby Red
rgb(224, 17, 95)
Russet
rgb(128, 70, 27)
Salmon
rgb(250, 128, 114)
Scarlet
rgb(255, 36, 0)
Sunset Orange
rgb(250, 95, 85)
Terra Cotta
rgb(227, 115, 94)
Tuscan Red
rgb(124, 48, 48)
Tyrian Purple
rgb(99, 3, 48)
Venetian Red
rgb(164, 42, 4)
Vermillion
rgb(227, 66, 52)
Wine
rgb(114, 47, 55)
结语：色彩的艺术与科学的融合
通过这篇文章，我们不仅列出了各种红色的数值，更重要的是，我们探讨了如何在代码中动态地管理和操作这些颜色。从简单的 HEX 代码到复杂的交互式组件，掌握色彩的处理能力将极大地提升你应用的用户体验。
在接下来的项目中，建议你尝试创建一个自己的“主题管理器”。试着结合 HSL 模型，让用户不仅能选择颜色，还能调整颜色的明暗和饱和度，从而生成属于他们自己的个性化主题。记住，优秀的前端工程师不仅是代码的编写者，更是用户体验的塑造者。让我们继续探索，用代码为世界增添更多色彩吧！