颜色计算

数字颜色混合与透明度原理

了解屏幕颜色如何混合、Alpha 合成如何改变最终外观，以及如何生成有用的颜色过渡色阶。

发布于 2026/7/5 ·更新于 2026/7/5

数字混合组合的是屏幕发出的光，与实体颜料混合不是同一过程。简单的 sRGB 混合会在两个端点之间插值红、绿、蓝通道。

在 50% 比例下，#FF7F50 珊瑚色和 #008080 蓝绿色对结果贡献相同。可把这组颜色放入在线颜色混合器，比较 5 阶与 10 阶过渡。

Alpha 改变了什么

Alpha 表示从完全透明到完全不透明的覆盖程度。最终可见颜色还取决于背景：

.veil {
  background: rgb(255 127 80 / 50%);
}

这段颜色在白色背景上更亮，在黑色背景上更暗。颜色透明度计算器会同时显示编码后的透明值和合成结果。

八位十六进制把 Alpha 存放在最后两位。例如 #FF7F5080 是大约 50% 的珊瑚色，RGBA 与 HSLA 则用更直观的方式表达相同概念。

自动生成的色阶只是起点，并不天然构成完整设计系统。应检查每一阶的文字对比度、相邻颜色是否容易区分；需要视觉均匀时还可考虑 OKLCH 插值。sRGB 插值则适合匹配常见浏览器和图形工作流。

要理解输出格式，请继续阅读 HEX、RGB 与 HSL 的区别。