Skip to main content
appkiro.com
颜色

CSS 颜色名称（Colortone） 转 HEX

把用于易读的 CSS 关键字与便于理解的色样标签的 CSS 颜色名称（Colortone） 转为规范化的 6 位 sRGB 表示，便于简洁的网页色值与设计令牌。

色值由页面内的本地 TypeScript 函数转换，无需上传到服务器。

1. 输入 颜色名称

可直接选色、使用滑块或粘贴数值。

RGBHSLHSV

快速预设

2. 实时预览

#FF6347

tomato

预览

原图

rgb(255, 99, 71)

提亮 20%

rgb(255, 130, 108)

加深 20%

rgb(204, 79, 57)

互补

rgb(71, 227, 255)

颜色信息

颜色名称：tomato亮度：56%相对亮度：0.306与白色的对比度：2.95 : 1与黑色的对比度：7.13 : 1

视觉对比

Aa

搭配白字

Aa

搭配黑字

3. 结果

#FF6347

其他格式

HEX#FF6347
RGBrgb(255, 99, 71)
RGBArgba(255, 99, 71, 1)
HSLhsl(9, 100%, 64%)
HSLAhsla(9, 100%, 64%, 1)
HSVhsv(9, 72%, 100%)
CMYKcmyk(0%, 61%, 72%, 0%)
名称tomato

配色方案

你知道吗？

支持 EyeDropper API 的浏览器可直接从屏幕取色。

直接回答

把用于易读的 CSS 关键字与便于理解的色样标签的 CSS 颜色名称（Colortone） 转为规范化的 6 位 sRGB 表示，便于简洁的网页色值与设计令牌。 通道归一与整数/百分比格式化可能让 COLORTONE → HEX → COLORTONE 往返结果与初始值不同。

这个工具能做什么

把用于易读的 CSS 关键字与便于理解的色样标签的 CSS 颜色名称（Colortone） 转为规范化的 6 位 sRGB 表示，便于简洁的网页色值与设计令牌。 当输入已经是 CSS 颜色名称（Colortone）、下一套系统明确需要 HEX 时使用此专用页面；若要同时查看多种表示，请使用综合转换器。

已验证的功能

COLORTONE 输入要求

从内置列表选择 CSS 颜色名称；规范化后匹配不区分大小写。

解读 HEX 结果

规范化的 6 位 sRGB 表示

检查准确性边界

通道归一与整数/百分比格式化可能让 COLORTONE → HEX → COLORTONE 往返结果与初始值不同。 再次使用前，请按目标环境的要求核对结果。

适用场景

  • 当输入已经是 CSS 颜色名称（Colortone）、下一套系统明确需要 HEX 时使用此专用页面；若要同时查看多种表示，请使用综合转换器。
  • 把用于易读的 CSS 关键字与便于理解的色样标签的 CSS 颜色名称（Colortone） 转为规范化的 6 位 sRGB 表示，便于简洁的网页色值与设计令牌。
  • COLORTONE → HEX: 简洁的网页色值与设计令牌.

使用步骤

  1. 输入源颜色

    从内置列表选择 CSS 颜色名称；规范化后匹配不区分大小写。 在“使用步骤: 输入源颜色”中，此说明专门适用于CSS 颜色名称（Colortone） 转 HEX。

  2. 检查规范化预览

    可使用滑块、直接输入、预设色样或可用的系统取色器；预览会显示转换为 HEX 前的规范化结果。

  3. 复制目标值

    复制 HEX 行；其他格式仅用于对照，本页核心任务仍是 COLORTONE → HEX。

  4. 检查准确性边界

    通道归一与整数/百分比格式化可能让 COLORTONE → HEX → COLORTONE 往返结果与初始值不同。 再次使用前，请按目标环境的要求核对结果。 复制 HEX 前先检查预览，以便发现解析错误。

控件说明

COLORTONE 输入要求

从内置列表选择 CSS 颜色名称；规范化后匹配不区分大小写。 在“控件说明: COLORTONE 输入要求”中，此说明专门适用于CSS 颜色名称（Colortone） 转 HEX。

解读 HEX 结果

规范化的 6 位 sRGB 表示. HEX 是 RGB 通道值的记法，并不是独立色域。

结果如何生成

从内置列表选择 CSS 颜色名称；规范化后匹配不区分大小写。 工作台先把输入转换为 sRGB 三通道，再格式化为规范化的 6 位 sRGB 表示。Colortone 是 AppKiro 对 CSS 颜色名称查找的称呼，并非标准色彩空间；正向匹配使用 RGB 欧氏距离。HEX 是 RGB 通道值的记法，并不是独立色域。

准确性与限制

  • 通道归一与整数/百分比格式化可能让 COLORTONE → HEX → COLORTONE 往返结果与初始值不同。
  • Colortone 是 AppKiro 对 CSS 颜色名称查找的称呼，并非标准色彩空间；正向匹配使用 RGB 欧氏距离。
  • HEX 是 RGB 通道值的记法，并不是独立色域。

处理方式与隐私

色值由页面内的本地 TypeScript 函数转换，无需上传到服务器。

实用建议

  • 对照舍入后的 HEX 时，请保留原始 COLORTONE 值。
  • 复制 HEX 前先检查预览，以便发现解析错误。

问题排查

为什么 COLORTONE 输入无效？

从内置列表选择 CSS 颜色名称；规范化后匹配不区分大小写。 在“问题排查: 为什么 COLORTONE 输入无效？”中，此说明专门适用于CSS 颜色名称（Colortone） 转 HEX。

为什么 COLORTONE 转 HEX 再转回后数值会变化？

通道归一与整数/百分比格式化可能让 COLORTONE → HEX → COLORTONE 往返结果与初始值不同。 在“问题排查: 为什么 COLORTONE 转 HEX 再转回后数值会变化？”中，此说明专门适用于CSS 颜色名称（Colortone） 转 HEX。

检查准确性边界

通道归一与整数/百分比格式化可能让 COLORTONE → HEX → COLORTONE 往返结果与初始值不同。 先重置工具并用已知受支持的值重试，再判断是否为算法错误。

常见问题

什么时候应该使用专门的 COLORTONE 转 HEX 工具？

当输入已经是 CSS 颜色名称（Colortone）、下一套系统明确需要 HEX 时使用此专用页面；若要同时查看多种表示，请使用综合转换器。 在“什么时候应该使用专门的 COLORTONE 转 HEX 工具？”中，此说明专门适用于CSS 颜色名称（Colortone） 转 HEX。

为什么 COLORTONE 输入无效？

从内置列表选择 CSS 颜色名称；规范化后匹配不区分大小写。 在“为什么 COLORTONE 输入无效？”中，此说明专门适用于CSS 颜色名称（Colortone） 转 HEX。

为什么 COLORTONE 转 HEX 再转回后数值会变化？

通道归一与整数/百分比格式化可能让 COLORTONE → HEX → COLORTONE 往返结果与初始值不同。 在“为什么 COLORTONE 转 HEX 再转回后数值会变化？”中，此说明专门适用于CSS 颜色名称（Colortone） 转 HEX。

如何选择最接近的 CSS 颜色名称？

Colortone 是 AppKiro 对 CSS 颜色名称查找的称呼，并非标准色彩空间；正向匹配使用 RGB 欧氏距离。 在“如何选择最接近的 CSS 颜色名称？”中，此说明专门适用于CSS 颜色名称（Colortone） 转 HEX。

HEX 结果使用什么语法？

规范化的 6 位 sRGB 表示. 简洁的网页色值与设计令牌. HEX 是 RGB 通道值的记法，并不是独立色域。

转换前如何规范化 COLORTONE 输入？

从内置列表选择 CSS 颜色名称；规范化后匹配不区分大小写。 Colortone 是 AppKiro 对 CSS 颜色名称查找的称呼，并非标准色彩空间；正向匹配使用 RGB 欧氏距离。

继续颜色工作流

当输入已经是 CSS 颜色名称（Colortone）、下一套系统明确需要 HEX 时使用此专用页面；若要同时查看多种表示，请使用综合转换器。 在“继续颜色工作流”中，此说明专门适用于CSS 颜色名称（Colortone） 转 HEX。

使用相关工具继续

完成专用的 COLORTONE → HEX 转换后，如需继续处理，可打开第一个相关工具。

HEX、RGB、HSL、LAB 与 OKLCH 颜色转换