HCT转RGB的算法实现及Material Color Utilities使用咨询

快速实现转换（基于Material Color Utilities） #

你可以直接用库中的Hct类完成转换，以hct(156, 122, 50)为例，TypeScript代码如下：

import { Hct } from '@material/material-color-utilities';

// 创建HCT颜色实例
const hctColor = Hct.from(156, 122, 50);
// 转成十进制整数形式的RGB（如0x00894B）
const rgbInt = hctColor.toInt();
// 拆分出R、G、B分量
const r = (rgbInt >> 16) & 0xFF;
const g = (rgbInt >> 8) & 0xFF;
const b = rgbInt & 0xFF;

console.log(`rgb(${r}, ${g}, ${b})`); // 输出：rgb(0, 137, 75)

核心转换算法步骤 #

HCT转RGB本质是多个色彩空间的链式转换，流程如下：

1. Tone（明度）转L*：HCT的T值（0-100）直接对应CIELAB色彩空间的L*值，即L* = Tone。
2. HCT转CAM16：
   • 将L*转换为CAM16的J（感知明度），这一步依赖预设的观察条件做映射。
   • 用HCT的Chroma和Hue，结合J值计算CAM16的C（色度）和h（色相角），同时做色域约束，确保颜色在sRGB范围内。
3. CAM16转CIELAB：通过CAM16的J、C、h值，用色彩空间转换公式推导CIELAB的L*、a*、b*分量。
4. CIELAB转sRGB：对Lab*值做矩阵转换和伽马校正，最终得到0-255范围的R、G、B分量。

库中算法的代码位置 #

源码里的核心逻辑分散在这几个文件：

• src/hct/hct.ts：Hct类的from方法实例化颜色，toInt方法启动转换流程。
• src/hct/cam16.ts：负责HCT与CAM16色彩空间的互转逻辑。
• src/color_utils.ts：包含labToRgb函数，实现CIELAB到sRGB的最终转换，还有色域映射逻辑。
• src/viewing_conditions.ts：提供默认观察条件，用于CAM16的色彩计算。

内容的提问来源于stack exchange，提问作者David