Skip to main content
appkiro.com
颜色

CSS 颜色名称（Colortone） 转 RGB

把用于易读的 CSS 关键字与便于理解的色样标签的 CSS 颜色名称（Colortone） 转为sRGB 中的红、绿、蓝整数通道，便于Canvas、像素数据、CSS 与图形 API。

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

1. 输入 颜色名称

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

HSLHSV

快速预设

2. 实时预览

rgb(255, 99, 71)

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. 结果

rgb(255, 99, 71)

其他格式

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） 转为sRGB 中的红、绿、蓝整数通道，便于Canvas、像素数据、CSS 与图形 API。 通道归一与整数/百分比格式化可能让 COLORTONE → RGB → COLORTONE 往返结果与初始值不同。

这个工具能做什么

把用于易读的 CSS 关键字与便于理解的色样标签的 CSS 颜色名称（Colortone） 转为sRGB 中的红、绿、蓝整数通道，便于Canvas、像素数据、CSS 与图形 API。 当输入已经是 CSS 颜色名称（Colortone）、下一套系统明确需要 RGB 时使用此专用页面；若要同时查看多种表示，请使用综合转换器。

已验证的功能

COLORTONE 输入要求

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

解读 RGB 结果

sRGB 中的红、绿、蓝整数通道

检查准确性边界

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

适用场景

  • 当输入已经是 CSS 颜色名称（Colortone）、下一套系统明确需要 RGB 时使用此专用页面；若要同时查看多种表示，请使用综合转换器。
  • 把用于易读的 CSS 关键字与便于理解的色样标签的 CSS 颜色名称（Colortone） 转为sRGB 中的红、绿、蓝整数通道，便于Canvas、像素数据、CSS 与图形 API。
  • COLORTONE → RGB: Canvas、像素数据、CSS 与图形 API.

使用步骤

  1. 输入源颜色

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

  2. 检查规范化预览

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

  3. 复制目标值

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

  4. 检查准确性边界

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

控件说明

COLORTONE 输入要求

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

解读 RGB 结果

sRGB 中的红、绿、蓝整数通道. 工作台按 sRGB 的 0–255 通道处理，并会对归一后的数值取整。

结果如何生成

从内置列表选择 CSS 颜色名称；规范化后匹配不区分大小写。 工作台先把输入转换为 sRGB 三通道，再格式化为sRGB 中的红、绿、蓝整数通道。Colortone 是 AppKiro 对 CSS 颜色名称查找的称呼，并非标准色彩空间；正向匹配使用 RGB 欧氏距离。工作台按 sRGB 的 0–255 通道处理，并会对归一后的数值取整。

准确性与限制

  • 通道归一与整数/百分比格式化可能让 COLORTONE → RGB → COLORTONE 往返结果与初始值不同。
  • Colortone 是 AppKiro 对 CSS 颜色名称查找的称呼，并非标准色彩空间；正向匹配使用 RGB 欧氏距离。
  • 工作台按 sRGB 的 0–255 通道处理，并会对归一后的数值取整。

处理方式与隐私

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

实用建议

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

问题排查

为什么 COLORTONE 输入无效？

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

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

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

检查准确性边界

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

常见问题

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

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

为什么 COLORTONE 输入无效？

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

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

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

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

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

RGB 结果使用什么语法？

sRGB 中的红、绿、蓝整数通道. Canvas、像素数据、CSS 与图形 API. 工作台按 sRGB 的 0–255 通道处理，并会对归一后的数值取整。

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

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

继续颜色工作流

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

使用相关工具继续

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

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