颜色互转

在线颜色互转工具，附带颜色模型知识与转换公式

颜色转换器
#667eeaHEX 十六进制
102,126,234RGB 红绿蓝 (0-255)
228,76%,66%HSL 色相·饱和度·明度
56%,46%,0%,8%CMYK 青·品红·黄·黑
颜色模型知识

HEX 十六进制

十六进制颜色码，以 # 开头后跟 6 位十六进制数，每两位分别表示红、绿、蓝分量，范围 00–FF（对应十进制 0–255）。

例如 #FF6600：红=FF(255)，绿=66(102)，蓝=00(0)。简写形式 #F60 等同于 #FF6600。

// HEX → RGB R = parseInt(hex.slice(1,3), 16) G = parseInt(hex.slice(3,5), 16) B = parseInt(hex.slice(5,7), 16)

RGB 红·绿·蓝

加色模型，通过红(R)、绿(G)、蓝(B)三原色以不同强度叠加产生各种颜色。每个分量取值 0–255。

RGB 是显示器、屏幕等发光设备的标准颜色模型。当 R=G=B=0 时为黑色，R=G=B=255 时为白色。

// RGB → HEX r = r.toString(16).padStart(2, '0') g = g.toString(16).padStart(2, '0') b = b.toString(16).padStart(2, '0') hex = '#' + r + g + b // RGB → HSL（见下方）

HSL 色相·饱和度·明度

更直观的颜色模型，更接近人类感知颜色的方式：

色相 (Hue)：0°–360° 色环角度，0°红、120°绿、240°蓝。
饱和度 (Saturation)：0%–100%，0%为灰色，100%为最鲜艳。
明度 (Lightness)：0%–100%，0%为黑色，100%为白色，50%为纯色。

// RGB → HSL R'=R/255, G'=G/255, B'=B/255 max = Math.max(R',G',B') min = Math.min(R',G',B') L = (max + min) / 2 IF max == min: S = 0, H = 0 ELSE: d = max - min S = L > 0.5 ? d/(2-max-min) : d/(max+min) IF max == R': H = ((G'-B')/d) % 6 IF max == G': H = (B'-R')/d + 2 IF max == B': H = (R'-G')/d + 4 H = H * 60; IF H < 0: H += 360

CMYK 青·品红·黄·黑

减色模型，用于彩色印刷。通过青(Cyan)、品红(Magenta)、黄(Yellow)、黑(Key)四色油墨混合呈现颜色。

理论上 CMY 即可产生黑色，但实际印刷中黑色油墨更纯更省墨，故增加 K 通道。CMYK 值通常以百分比表示。

// RGB → CMYK R'=R/255, G'=G/255, B'=B/255 K = 1 - Math.max(R',G',B') C = (1 - R' - K) / (1 - K) || 0 M = (1 - G' - K) / (1 - K) || 0 Y = (1 - B' - K) / (1 - K) || 0
常用颜色参考
颜色术语
术语说明
色相 (Hue)颜色的基本属性，即颜色的名称（红、橙、黄、绿等），在色环上用角度表示。
饱和度 (Saturation)颜色的纯度或鲜艳程度。高饱和度颜色鲜艳；低饱和度颜色偏灰。
明度 (Lightness / Brightness)颜色的明亮程度。明度越高越接近白色，越低越接近黑色。
色温 (Color Temperature)颜色的冷暖属性。红、橙、黄为暖色；蓝、绿、紫为冷色。
互补色 (Complementary Colors)色环上相对的颜色（相差 180°），如红与青、蓝与黄。互补色并置可产生强烈对比。
类似色 (Analogous Colors)色环上相邻的颜色（相差 30°–60°），搭配和谐统一。
加色混合 (Additive Mixing)RGB 模型，通过叠加光线产生颜色。用于屏幕、显示器等发光设备。
减色混合 (Subtractive Mixing)CMYK 模型，通过吸收光线产生颜色。用于印刷、颜料等反射光线的介质。
关于 颜色互转

颜色互转工具支持 HEX、RGB、HSL、CMYK 四种常见颜色模型之间的相互转换。

所有计算在浏览器本地完成，数据不上传服务器。可任意修改任一输入框，其他格式自动同步更新。