1. 加色法 (RGB/HEX) vs. 减色法 (CMYK)
网页与屏幕显示采用 RGB 加色法，透过红、绿、蓝三原色光发光叠加出色彩；HEX 为 RGB 的十六进制简写。
而实体印刷则采用 CMYK 减色法，青、品红、黄、黑，借助油墨吸收光线来呈现颜色。
←
色码转换与调色板工具
HEX、RGB、HSL、HSV 与 CMYK 实时跨格式精准转换与微调。
调色板
#3B82F6
RGB 通道
R59
G130
B246
HSL 通道
H217
S91
L60
转换数值
HEX
RGB
HSL
HSV
CMYK
最近使用色彩
同色系阶梯调色板
#E7F0FE
#B6D1FC
#85B2F9
#5593F7
#2474F5
#0A5ADB
#0846AA
#06327A
#031E49
#021027
色彩空间与色码转换指南
了解 HEX、RGB、HSL 与 CMYK 色彩模型在网页设计、UI 开发与印刷上的差异。
2. 为什么 UI 设计师偏好使用 HSL / HSV？
RGB 对人类视觉并不直观。HSL (色相/饱和度/亮度) 与 HSV (色相/饱和度/明度) 将色彩抽离为直觉的参数。
设计师只需固定色相，即可轻松调配出系统组件的 Hover 悬停态、Active 按压态或 Disabled 禁用态。
3. 什么是 Tints（加白明亮色）与 Shades（加黑深色）？
在色彩学与 UI 设计规范（如 Tailwind CSS）中，同色系色阶通常由原始主色（Base Color）衍生：
- Tints（明亮色阶）： 在主色中加入白色（提高 Lightness 亮度），用于背景块、卡片 Hover 底色或 Hover 高亮态。
- Shades（深暗色阶）： 在主色中加入黑色（降低 Lightness 亮度），常用于文字颜色、深度阴影或边框线条。
色码转换与 CSS 配色 FAQ
Q：为什么将 CMYK 色码转成网页 RGB 时，颜色看起来会有色差或不那么鲜艳？
这是因为两种色彩模型的“色域”涵盖范围不同。RGB的色域比CMYK广得多，很多发光的荧光蓝、荧光绿在 CMYK 是无法被印出来的。
网页上的 CMYK 数值是透过标准算式数学模拟折算，若需要精准印刷色彩，建议参考 Pantone 专色卡。
Q：在写 CSS 或 Tailwind 时，该选择 HEX、RGB 还是 HSL 格式？
常规开发建议使用 HEX 最简短且通用；若需要动态调整透明度，可以使用 RGBA 或带 Alpha 的 8 位 HEX。
而若使用 CSS 原生变量规划 Design Tokens，强烈推荐使用 HSL，方便透过 CSS 算式动态衍生色阶。