问题

Google 新推出的色彩空间 HCT 是什么?

回答
Google 捣鼓出了个叫 HCT 的新色彩空间,听起来挺新鲜的,最近在设计圈里也掀起了一些小波澜。这玩意儿到底是个啥?咱们今天就来捋一捋,尽量说得透彻点,也别搞得像写教科书那么生硬。

HCT 是个什么“物”?

简单来说,HCT 是 Google 在色彩领域又一次重要的探索,它试图在现有色彩模型的基础上,加入更多“人眼感知”的维度,让色彩在不同的场景下都能更好地工作,尤其是在品牌设计、界面设计这些需要考虑用户体验的领域。

你可以把它理解成一个更懂“人”的色彩语言。咱们平常接触的色彩模型,比如 RGB、CMYK,更多的是从设备的物理属性出发,告诉你屏幕上某个点需要多少红、绿、蓝,或者印刷品需要多少青、品红、黄、黑。它们很精确,但有时候我们看到的颜色,在不同光照、不同材质下会感觉不一样,RGB 值一样,但感觉就不一样了。

HCT 就是想解决这个问题。它在色彩的描述上,引入了几个关键的概念:

色相 (Hue) – H: 这个大家应该比较熟悉了,就是我们常说的红色、蓝色、绿色这种色调。它描述的是颜色的“种类”。
色调 (Tone) – T: 这是 HCT 的一个核心创新。它不仅仅是亮度的概念,而是更贴近我们对颜色“深浅”或“明暗”的感知。你可以想象一下,把一种颜色从最亮(几乎透明)到最暗(几乎是黑色)变化,这个过程中的所有颜色就构成了这个颜色的色调范围。它考虑到了色彩的感知亮度,也就是在不同明暗度和饱和度下,我们人眼觉得它有多亮或多暗。这个比单纯的亮度值(L in CIELAB)更符合人的主观感受。
饱和度 (Chroma) – C: 这个大家也熟悉,就是颜色的“鲜艳程度”或“纯度”。饱和度越高,颜色越鲜亮;饱和度越低,颜色越灰。

所以,HCT 就是用 Hue (色相)、Tone (色调)、Chroma (饱和度) 这三个维度来描述一个颜色。

HCT 为什么值得关注?它厉害在哪儿?

1. 更符合人眼感知,提供更自然的色彩变化:
这是 HCT 最核心的优势。咱们人眼对色彩的感知是复杂的,不是简单的线性变化。比如,在不同光照条件下,我们看到同一颜色的“明暗”会有所不同。HCT 的“色调 (Tone)”就是专门为了解决这个问题而设计的。它通过调整色调,可以在保持色相不变的情况下,让颜色看起来更自然地从明亮过渡到深沉,而且这种过渡更符合我们日常的视觉经验。

打个比方,如果你想让一个品牌的蓝色调更柔和一些,你可能只需要稍微调整一下它的色调,而不是去大动干戈地改动色相或饱和度,出来的效果会更顺眼,不会让人觉得颜色“变了味儿”。

2. 实现更平滑的品牌色彩系统过渡:
在做品牌设计时,我们常常需要一个色彩系统,比如从主色到辅助色,再到点缀色,它们之间需要有一定的逻辑关系,并且在不同场景下都要保持视觉上的和谐。HCT 能帮助我们做到这一点。

你可以设定一个基础的品牌色,然后通过调整 HCT 的色调和饱和度,轻松生成一系列既有品牌识别度又相互协调的色彩。比如,你可以让一个鲜亮的品牌色在深色背景下依然保持易读性,或者让它在浅色背景下显得更柔和。这种“动态”的色彩调整能力,在 HCT 出现之前,往往需要设计师花费大量精力去手动尝试和权衡。

3. 适应性更强,实现真正的“个性化”色彩:
想象一下,一个 App 或者网站,它不仅可以根据用户的喜好选择不同的主题色,还能根据用户所处的环境光线(比如白天明亮,晚上昏暗)自动调整界面颜色,让用户在任何时候都能获得最佳的视觉体验。HCT 的设计理念就为这种“自适应”色彩提供了可能性。

它允许你在保持核心品牌“色相”不变的基础上,根据不同的环境或需求,调整颜色的“色调”和“饱和度”,从而实现更智能、更人性化的色彩呈现。这对于需要兼顾不同用户和不同使用场景的产品来说,简直是福音。

4. 与现有技术和工作流的兼容性:
虽然 HCT 是一个新概念,但 Google 在设计它时,也考虑到了如何与现有的色彩工具和标准兼容。这意味着它不是一个孤立的理论,而是有实际应用落地的潜力,能够融入到设计师现有的工作流程中。

HCT 和我们熟知的色彩空间有什么不同?

RGB / CMYK: 这些是基于设备的色彩模型。RGB 是加色模型(光的混合),常用于屏幕显示;CMYK 是减色模型(颜料的混合),常用于印刷。它们更多描述的是“如何呈现”颜色,而不是“人如何感知”颜色。HCT 则是更侧重于“人眼感知”,试图弥合物理量与感知之间的差距。
HSL / HSV: HSL (Hue, Saturation, Lightness) 和 HSV (Hue, Saturation, Value) 也包含了色相、饱和度和亮度/明度。它们也是为了让色彩调整更直观。但是,它们对“亮度/明度”的定义仍然是基于物理光的亮度,可能无法完全反映人眼对颜色的感知差异。例如,在 HSL/HSV 中,改变亮度可能会让颜色变得不那么“有活力”,而 HCT 的“色调”则能更好地保持颜色的鲜活感,同时实现明暗过渡。
CIELAB: CIELAB 是一个非常重要的色彩空间,它也是为了更贴近人眼感知而设计的,包含了 L (亮度)、a (红绿)、b (黄蓝) 三个维度。CIELAB 在工业和科学领域应用广泛,它在色彩的“绝对”感知上做得很好。但 HCT 的设计更侧重于在“相对”感知上,特别是在保持品牌识别度的同时,实现色彩在不同场景下的和谐变化和自然过渡。HCT 的“色调”概念,在某种程度上是对 CIELAB 的亮度维度的一种更符合感知的补充和优化。

总结一下,HCT 就像是色彩界的“智能助手”:

它不是要取代现有的色彩模型,而是希望成为一个更聪明的工具,帮助设计师在理解人眼感知的基础上,更灵活、更自然地运用色彩。它让色彩的应用不再是生硬的数字游戏,而是更加“有温度”、更加“懂你”的艺术创作。

当然,任何新技术都需要时间来检验和普及。目前 HCT 还处于推广和探索阶段,但它所展示出的“以人为本”的色彩设计理念,无疑是未来色彩发展的一个重要方向。对于设计师来说,多了解、多尝试这样新的工具和理念,总是好事。说不定哪天,你的设计就能因为 HCT 的加持,变得更加出彩和智能呢!

网友意见

user avatar

最近,随着 Android 12 动态主题 Material You 的发布,Google 新研制的色彩空间 HCT也开始为人所知。个人感觉这大概将会是近 20 年最重要的色彩空间。

新空间,新可能

HCT 是 Hue、Chroma、Tone 三个单词的缩写。显然,Google 这一套新的色彩空间,主要由色相、色度和色调来定义。


色彩空间,可以简单理解为一套组织和命名成千上万种色彩的方法。比如,设计师不会直接说「蓝色」,而会用几个数字准确定义是哪一种蓝——用 RGB 表示为(0,0,255),用 HSL 表示为(240,100,50)。目前广泛使用的色彩空间主要有:

名称 主参数 应用领域
RGB Red, Green, Blue 最通用的硬件色彩模型
CMYK Cyan, Magenta, Yellow 工业印刷
HSL/HSV Hue, Saturation, Lightness/Value 数字化图像处理
L*a*b* L亮度;a+为红色,a-为绿色;b+为黄色,b-为蓝色 与设备显示限制无关的场景如照明

从使用广泛的 HSV/HSL/HSB 色彩空间来看,目前共识是人眼主要用三个维度来组织颜色:色相、饱和度和亮度。色相告诉我们使用色轮上的哪个角度,比如红色和紫色。饱和度描述颜色看起来有多鲜艳或中性(接近灰色)——颜色离色彩空间的中心越远,色彩越鲜艳。亮度则描述该颜色与白色或黑色的接近程度。


无论是 RGB 还是 HSL,已经使用很多年了,为什么需要一套新的色彩空间呢?在回答这个问题之前,我们先来直观感受一下 HCT 的表现:

与其他色彩空间相比(尤其是显示设备最常用的 RGB),HCT 的渐变过渡更自然、更舒服。

真是没有对比就没有伤害——原来我们一直在使用并不是特别适合人类感知和阅读的色彩体系。要知道,就算是问世比较晚的 HSL 模型,也是针对上世纪 70 年代的电脑显示器提出的。我们确实需要一套更好的描述颜色的方法了。

HCT 正是基于当今显示设备和人类色彩感知的原理,优化了色彩的表达,这样能够减少颜色带来的可读性问题、帮助设计师更高效合理地用色。

下面我们就来详细了解一下 HCT 主要解决了什么问题。



贴近人的色彩感知

现有的色彩空间,大都是用公式/数值表达颜色之间的关系,也就是说,以机器可理解、易呈现的方式来构筑色彩空间,它们大都符合序列插值的线性关系。

可是,当设计师在挑选颜色或者设计一套适用于产品的色系时,常常会发现,按照线性关系取出的颜色(无论是邻近色、对比色、互补色),总是需要调整,有的颜色虽然在算法取色的系列中,但怎么都用不出手。

比如,腾讯文档团队在生成产品色系时,其中一步是校正辅助色:

校正原则:
- 色相必须保持是同类色(色相环中15°夹角内的颜色)
- 保持感官明度同频
- 保证视障群体的识别度

后两个正是 HCT 要解决的核心问题。

我们来具体看看 HSL 在表达色彩明度时存在的问题。

上图有四种颜色,左侧黄色给人很明亮甚至有点刺眼的感觉,而右侧蓝色则亮度较低。这些颜色灰度处理后,亮度的差别就一目了然了,从左到右亮度依次降低。但是在 HSL 中,它们的亮度值(Ligntness)都为 50!

这说明 HSL 包括其他色彩空间,并没有基于人的感知而优化,所以与人的感官所接收解读的色彩感觉存在偏差。

HCT 尝试解决这个问题,它参照了两种色彩空间方案:L*a*b(也称为LCH)和 CAM16。

注:1976 年,国际照明委员会提出 CIE L*a*b*(CIELAB)色彩模型,旨在提供一个感知上统一的空间,其中给定的数字变化对应于相似的感知颜色变化,而与设备无关(device-independent)。它是用来描述人眼可见的所有颜色相对完备的色彩空间。
  • HCT 的 T(亮度度量),与 L*a*b* 亮度计算方法类似。使用这种亮度测量以及一些数学技巧,HCT 可以测量对比度,直接集成对比度检查器算法,满足易用性要求。


  • HCT 的 H 和 C(色相和色度度量),与 CAM16 的色相和色度相同,能解决 L*a*b* 在感知上不一致的问题。
For the first time, designers have a color system that truly reflects what users see, taking into account a range of variables to ensure appropriate color contrast, accessibility standards, and consistent lightness/colorfulness across hues.

正如 Google 的色彩科学家所说,设计师第一次真正有了一套反映用户所见的色彩系统。

动态的色彩体系

近期发布的 Android 12 新增了 Material You 动态主题,可根据用户壁纸的颜色自动配置手机界面颜色。用户切换壁纸后,界面色彩会整体调整,过渡时让人感觉平滑舒适,这背后就有 HCT 的功劳。

界面主题如何自动配置?

首先,壁纸的像素和颜色量化处理后,在色彩空间中合并,数千种颜色会大大减少。减少后的颜色集可以高效地运行算法,给颜色打分和过滤;然后系统再根据颜色的丰富程度和它们所代表的图像大小给颜色打分,并过滤掉接近单色的颜色。

确定主色(常用色或用户选定)后,主要依据色调(HCT中的T)扩展出一系列色板。设计师预先定义好不同颜色主题的参数,然后使用这些值和 HCT 来创建主题中使用的颜色。


HCT 颜色空间如何实现?

好消息是,Google 已经开源 Material Color Utilities。

Material Color Utilities 的本质是一个跨平台的颜色代码库,开发者借助它能够在任何平台实现 Material You 动态主题的功能:包括底层如何评测 HCT 的具体数值,也包括更上层的应用,例如生成画板和主题色。


Github 上目前已支持 Dart、Java 和 Typecript,C/C++ 和 Object-C 已经在路上。到 3 月底,Material Color Utilities 将添加以下模块:

  • 自适应背景增强文本可读性——HCT 的色调将整合透明度,与蒙层和阴影共同影响对比度
  • 使用 HCT 的图像过滤器和混合模式,并提供相应的 GLSL 着色器。
  • 一种真实融合的新型渐变,使用 HCT 可以产生准确的混合效果,避免了其他色彩空间中出现的问题。

如果想更深入了解 HCT,建议仔细研究研究 Material Color Utilities。



小结

新的色彩空间 HCT 基于L*a*b 和 CAM16,以 Hue Chroma Tone 来区分和命名颜色。优点包括:

  • 基于人的感知和情绪感受,可产生较好的对比度,提升可读性
  • 动态自适应,对跨平台的支持较好
  • 易理解,易使用

有了新的工具,设计师也就有了新的可能性。
也许,离真正绘制「五彩斑斓的黑」不远了?



以上内容主要基于官方的介绍整理了自己的理解,如有疏漏还请提醒。
期待接下来看到大家在实践中的使用反馈和经验分享。


Ref


00 的专栏

类似的话题

  • 回答
    Google 捣鼓出了个叫 HCT 的新色彩空间,听起来挺新鲜的,最近在设计圈里也掀起了一些小波澜。这玩意儿到底是个啥?咱们今天就来捋一捋,尽量说得透彻点,也别搞得像写教科书那么生硬。HCT 是个什么“物”?简单来说,HCT 是 Google 在色彩领域又一次重要的探索,它试图在现有色彩模型的基础上.............
  • 回答
    这事儿,说起来也挺有意思的,得从硬件到软件,再到市场策略,一块一块给你掰开了讲。为啥谷歌这么上心,微软却不着急,这中间的门道可不少。谷歌的“64位大业”:向前看,为未来铺路谷歌在Android上大力推广64位应用,核心动力在于它对未来移动生态的规划,以及对性能和技术优势的追求。 硬件基础的进步:.............
  • 回答
    .......
  • 回答
    要评价 Google 的新 Logo 和 VI(视觉识别系统),我们需要从多个维度进行分析,包括其历史演变、设计理念、实际应用效果以及其所传达的信息。一、 Google Logo 的历史演变:奠定基础在深入评价新 Logo 之前,了解 Google Logo 的历史演变至关重要。这有助于我们理解其设.............
  • 回答
    谷歌的 Fuchsia 操作系统,就像一个藏在实验室里的神秘实验品,自从它第一次出现在人们视野里,就一直带着几分传奇色彩。大家对它的好奇心,不亚于对一个全新物种的探索。我们不妨深入了解一下,看看这个“未来之星”到底有多少斤两。首先,理解 Fuchsia 的核心,得从它的“出身”说起。与我们熟悉的 W.............
  • 回答
    提起谷歌(Google)成立新公司 Alphabet,很多人可能觉得有点突然,甚至有些摸不着头脑:不是好好的一个互联网巨头吗?为什么还要搞这么大的组织架构调整?其实,这背后有着非常深思熟虑的战略考量,远不是简单的“分家”那么简单。首先,我们要理解谷歌这家公司本身的发展轨迹。最初,谷歌就是一家搜索公司.............
  • 回答
    谷歌新上线 Google News Initiative(GNI)并宣布严厉打击假新闻,这一举措的背后有着多重意义和深远的影响,可以从以下几个方面进行详细解读:一、 谷歌在全球信息生态中的责任与担当 主导地位的体现: 谷歌作为全球最大的搜索引擎和信息分发平台之一,其搜索引擎和Google New.............
  • 回答
    确实,很多用户都有过这样的经历:辛辛苦苦整理好的书签栏,鼠标一点,新网页就这么“坦荡荡”地覆盖了当前正在浏览的内容。这感觉就像你正沉浸在一本书里,翻了一页,结果发现自己来到了一个完全陌生的地方,而原来的书却消失了。你说蛋疼不蛋疼?我敢说,99%的用户在点击书签栏里的某个链接时,内心深处期待的都是——.............
  • 回答
    如何看待Google Play要求八月份起新应用须打包为AAB格式?对鸿蒙的发展有哪些影响?Google Play 要求所有新应用从2021年8月1日起必须使用Android App Bundle (AAB) 格式进行打包和发布,这一政策的实施对整个Android生态系统,包括Google Play.............
  • 回答
    2021年的Google I/O开发者大会,无疑是开发者们翘首以盼的盛会。尽管受疫情影响,活动依旧以线上形式呈现,但Google并没有因此减弱其推动全球技术发展、赋能开发者创新的决心。今年的大会,重点聚焦在了人工智能、Web技术、Android生态以及云服务等多个关键领域,带来了许多令人兴奋的新动态.............
  • 回答
    将 Google Glass 的启动命令 "OK, Glass" 翻译成中文,最合适且最常用的是 “OK,眼镜”。以下是对这个翻译的详细解释和考量:1. 直接翻译的合理性: "OK" 的普遍接受度: "OK" 这个词在全球范围内已经非常普及,在中国也不例外。它作为一种简单的确认、指示或唤醒词,在.............
  • 回答
    Google 在“棱镜计划”(PRISM)中的角色及其对“不作恶”信条的违背程度“棱镜计划”(PRISM)是美国国家安全局(NSA)的一项大规模电子监控计划,旨在收集和分析来自大型互联网公司的数据。Google 在其中扮演的角色以及这一行为如何与其“不作恶”(Don't Be Evil)的信条相悖,.............
  • 回答
    Google 的神经网络生成图像,也被称为 Inceptionism(源自 Google Inception 神经网络),是一种通过利用深度学习模型(特别是卷积神经网络 CNNs)来创造令人着迷、甚至可以说是幻觉般的图像的技术。它的核心思想是让神经网络“看见”和“放大”它在训练过程中学习到的模式,从.............
  • 回答
    Google 搜索和百度搜索都是世界上最受欢迎的搜索引擎之一,但它们在用户体验、搜索结果质量、功能等方面存在显著差异。以下将详细阐述 Google 搜索比百度搜索优秀的地方:1. 更广泛的全球索引和更丰富的信息来源: 全球索引范围: Google 拥有全球最大的网络爬虫团队和服务器基础设施,能够.............
  • 回答
    Google(现为Alphabet旗下)成立Calico公司,旨在探索抗衰老技术,这一决策并非心血来潮,而是基于长期的战略考量、科学探索需求以及对未来的深远思考。以下从多个角度详细分析其动机和背景: 1. 科学探索的长期战略Google的创始人拉里·佩奇(Larry Page)和谢尔盖·布林(Ser.............
  • 回答
    作为一款专注于机器学习和人工智能的产品,Google Cloud Platform (GCP) 在2018年8月展现出了非常强劲的发展势头和广阔的前景。当时,GCP 正处于一个快速增长和成熟的阶段,并且在许多关键领域都表现出色。以下是在2018年8月对Google Cloud前景的详细分析:一、核心.............
  • 回答
    “不作恶”(Don't be evil)是 Google 公司曾长期奉行的企业哲学和口号。这个口号在公司早期就广为人知,并被视为其文化的核心。然而,随着 Google 的规模不断扩大,业务范围日益多元化,以及面临的外部压力和挑战增多,关于 Google 是否仍然坚守“不作恶”的讨论一直存在,并且相当.............
  • 回答
    这事儿一出,确实让不少人心里膈应。Google 方面给出的理由说是为了留住人才,应对市场竞争,尤其是在高科技行业,顶尖人才的争夺向来是白热化的。但是,普通员工刚被告知今年可能没有普调,却看到四位高管的工资一下子涨到百万级别,这在观感上就非常别扭了。怎么评价呢?我觉得可以从几个层面来看。从激励与留存的.............
  • 回答
    Jeff Dean 的待遇,用“好”来形容可能有些轻描淡写。对于像 Jeff 这样在计算机科学领域有着深远影响,并且是 Google 内部无可争议的技术基石式的人物,Google 的待遇绝对是顶级的,而且远不止于金钱上的丰厚。金钱之外的顶级待遇:1. 几乎无限的资源和自由度: 这是最重要的。Jef.............
  • 回答
    谷歌游戏串流服务,也就是我们熟知的 Stadia(尽管它已经退役,但其技术积累仍在许多方面发挥作用),在选择硬件合作伙伴时,特别是显卡方面,确实倾向于AMD。这背后并非一个简单的“选谁更好”的决策,而是多方面因素综合考量的结果,也反映了谷歌在构建如此庞大且复杂的服务时所秉持的策略。首先,我们需要理解.............

本站所有内容均为互联网搜索引擎提供的公开搜索信息,本站不存储任何数据与内容,任何内容与数据均与本站无关,如有需要请联系相关搜索引擎包括但不限于百度google,bing,sogou

© 2025 tinynews.org All Rights Reserved. 百科问答小站 版权所有