如何转换HEX和RGB颜色：设计师和开发者指南

颜色模型是数字化表示颜色的数学系统。无论你从事Web开发、平面设计、品牌建设还是任何视觉学科，都需要了解至少三种模型：HEX、RGB和HSL。每种模型根据使用场景有不同的优势。

现代CSS接受这三种格式。同一种红色可以这样写：

• HEX：#FF0000
• RGB：rgb(255, 0, 0)
• HSL：hsl(0, 100%, 50%)

三者产生完全相同的颜色，但实用性不同。HEX在CSS中简洁。RGB在考虑光混合时直观。HSL在不改变色调的情况下调整亮度或饱和度时最理想。

使用NexTools颜色转换器可以在所有格式间即时转换，并实时预览颜色。

HEX（十六进制）格式用#号加6个十六进制数字（0-9，A-F）表示颜色。数字按对分组：前两位表示红色，中间两位表示绿色，最后两位表示蓝色。

结构：#RRGGBB

每对从00（十进制0，没有该颜色）到FF（十进制255，最大强度）：

HEX简写：如果每对数字相同，可以缩写：#FF0000 = #F00。但#A1B2C3不能缩写。

带透明度的HEX：添加两个数字表示透明度：#FF000080是50%不透明度的红色。

RGB模型基于加色混合。每个分量从0到255，混合后可产生1677万种颜色。

CSS中：rgb(红, 绿, 蓝)

实例：

• rgb(255, 165, 0) = 橙色
• rgb(128, 0, 128) = 紫色
• rgb(0, 128, 128) = 蓝绿色

带透明度（RGBA）：rgba(255, 0, 0, 0.5) = 50%不透明度的红色。

HEX转RGB：将每个十六进制对转为十进制。#3A7BF2：3A=58，7B=123，F2=242。结果：rgb(58, 123, 242)。

RGB转HEX：将每个十进制值转为2位十六进制。rgb(58, 123, 242)：58=3A，123=7B，242=F2。结果：#3A7BF2。

HSL模型将颜色分为三个易于理解的维度：

• Hue（色相）：基础颜色，0到360度。0°/360°=红，120°=绿，240°=蓝。
• Saturation（饱和度）：颜色的"鲜艳"程度，0%（灰色）到100%（纯色）。
• Lightness（亮度）：明暗程度，0%（黑色）到100%（白色）。50%是纯色。

HSL的优势：如果你有蓝色按钮hsl(220, 80%, 50%)，想要悬停时更亮的版本，只需增加亮度：hsl(220, 80%, 60%)。

使用调色板生成器实验颜色搭配。

网页设计中最常见的颜色及其对应值：

使用颜色选择器找到任何网站的精确颜色。

RGB和HEX用于屏幕（光），而CMYK（青、品红、黄、黑）是印刷用（油墨）模型。

为什么印刷的颜色看起来不同：屏幕发光（RGB），纸张反射光（CMYK）。CMYK的色域比RGB小，意味着屏幕上某些鲜艳的颜色无法在纸上精确复制。

• 电光蓝和霓虹绿在CMYK中会失去鲜艳度
• 红色和橙色通常保持良好
• CMYK中的纯黑是C:75 M:68 Y:67 K:90（称为"rich black"）

选择颜色不仅是美学问题。WCAG 2.1指南规定了文本和背景之间的最低对比度：

• AA（最低要求）：普通文本4.5:1，大文本3:1
• AAA（最优）：普通文本7:1，大文本4.5:1

使用对比度检查工具始终验证颜色组合的对比度。

事实：约8%的男性和0.5%的女性有某种程度的色觉障碍。切勿仅用颜色传达关键信息。

在现代Web开发中，颜色通过CSS自定义属性（CSS变量）管理，以便于主题和暗色模式：

:root {
  --color-primary: #C75B39;
  --color-background: #FFFFFF;
  --color-text: #1A1A1A;
}
.dark {
  --color-primary: #E8956E;
  --color-background: #1A1A1A;
  --color-text: #F5F5F5;
}

使用这种方法，更改整个网站的配色方案只需修改变量，而不是每个选择器。

提示：创建暗色主题时，不要简单地反转颜色。稍微降低饱和度，使用暖灰色代替纯黑（#1A1A1A代替#000000）。

使用渐变生成器为你的主题创建自定义CSS渐变。