配色指南系列！四大章节帮你理解色彩空间理论

创作时间:

作者:

@小白创作中心

配色指南系列！四大章节帮你理解色彩空间理论

引用

来源

https://www.uisdc.com/color-space

在B端产品设计中，色彩的运用至关重要。从基础的RGB到更先进的HCT色彩空间，每一种模型都有其独特的应用场景和优势。本文将带你深入了解这些色彩空间的原理和使用方法，帮助你在设计工作中更加得心应手。

对于B端产品而言，我们经常会遇到颜色相关的问题，比如开发没有正确还原颜色、不知道如何进行色彩配置，以及如何科学地进行颜色搭配。本文将分为四篇文章，分别探讨B端设计如何理解色彩空间、B端产品怎样合理搭配颜色、B端项目的视觉风格，以及B端项目颜色的实战技巧。本篇文章是第一篇，主要介绍产品配色的基础——色彩空间与颜色管理。

色彩空间概述

色彩空间又叫色彩模型，是为了让系统能够准确地描述颜色、使用颜色，进而定义出来的一种颜色组织方式。例如，潘通色彩体系是基于印刷行业制定的特殊色彩空间；CMYK是为印刷从业者提供的色彩空间；Lab是一种更强调色彩亮度的色彩空间。在屏幕显示领域，主要使用的色彩空间包括RGB、HSB、HCT等。

RGB色彩空间

RGB是显示器中的颜色基础，通过红绿蓝三个颜色通道来表示颜色。每个通道的取值范围是0到255，其中0代表不发光，255代表最亮的灯光。RGB之所以选择256个等级，是因为计算机存储时一个字节（8个比特）可以表示256个不同的值，这样可以更高效地存储颜色信息。

在设计软件中，RGB模式通常会显示三个输入框，分别对应红绿蓝三个颜色通道。此外，还有RGB的精简版——Hex格式，它将每个颜色的三位数值缩减为两位数值（十进制变为十六进制），使得颜色表达更为简洁。例如，RGB中的(0,86,255)在Hex中表示为#0056FF。

HSB色彩空间

HSB（也叫HSV）是通过颜色的色相、饱和度、亮度来表示颜色的另一种色彩模型。其中，色相以0-360度表示，饱和度和亮度以百分比形式呈现。HSB色彩空间的分类模式更有利于颜色调整，因此在日常调色中经常使用。但是，HSB在颜色一致性方面仍存在不足，特别是在黄绿色的感知上。

HCT色彩空间

为了解决HSB的不足，Google在2021年提出了HCT色彩空间。HCT将颜色的感知度和亮度结合，重新调整了HSB的色彩空间。HCT主要分为色相（Hue）、色度（Chroma）和色调（Tone）三个维度。HCT优化了黄绿色的凸显问题，使得颜色更为准确，同时改善了颜色渐变的流畅性。

尽管HCT在色彩一致性方面表现出色，但其也存在一些问题，如设备兼容性差、计算复杂度高、认知成本较大等。因此，在实际应用中需要权衡利弊。

屏幕显示色彩空间

对于屏幕显示的色彩空间，我们需要重点关注sRGB和Display P3。sRGB是由惠普公司和微软公司共同开发的标准色彩空间，目的是提供一种通用的色彩标准，使得在不同的设备之间能够实现相对一致的色彩显示。Display P3则主要用于消费级显示器设备，显示效果更加生动艳丽，但主要在苹果设备和部分高端显示器中使用。

色彩空间的实际应用

在实际工作中，建议优先使用HSB进行调色，因为它是设计师最容易理解的色彩空间。同时，要注重色彩的数据化管理，通过观察数据之间的对比变化来调整颜色。在需要判断多辅助色的情况下，可以使用HCT进行辅助判断。对于B端系统中的颜色搭配场景，可以考虑引入HCT来完善工作流，通过开源的HCT计算公式实现用户自定义颜色配置。