分类

← View All Tools

颜色转换器

在不同颜色格式之间转换

示例结果

2 个示例

HEX 转 RGB

将 HEX 颜色代码转换为 RGB 格式

rgb(255, 87, 51)
查看输入参数
{ "colorInput": "#FF5733", "inputFormat": "hex", "outputFormat": "rgb" }

RGB 转 HSL

将 RGB 颜色转换为 HSL 格式

hsl(11, 100%, 60%)
查看输入参数
{ "colorInput": "rgb(255, 87, 51)", "inputFormat": "rgb", "outputFormat": "hsl" }

关键信息

分类
Design
输入类型
text, select
输出类型
text
样本覆盖
4
支持 API
Yes

概览

颜色转换器是一款高效的在线工具，旨在帮助设计师和开发者在 HEX、RGB 和 HSL 等主流颜色格式之间进行快速、准确的转换，确保在不同设计环境和代码实现中保持色彩一致性。

适用场景

  • •在网页开发中需要将设计稿的 HEX 颜色值转换为 CSS 所需的 RGB 或 HSL 格式时。
  • •在不同设计软件之间迁移配色方案，且软件支持的颜色输入格式不统一时。
  • •需要快速获取特定颜色的不同数值表示，以便进行色彩微调或对比时。

工作原理

  • •在“颜色输入”框中输入您需要转换的颜色代码。
  • •在“输入格式”下拉菜单中选择当前颜色的格式（HEX、RGB 或 HSL）。
  • •在“输出格式”下拉菜单中选择您希望转换的目标格式。
  • •点击转换按钮，即可立即获取对应的颜色数值。

使用场景

前端开发人员将设计工具导出的 HEX 色值转换为 CSS 兼容的 RGB 格式。
UI 设计师在调整配色方案时，通过 HSL 格式更直观地修改颜色的饱和度和亮度。
跨平台开发时，将不同系统要求的颜色格式进行统一转换。

用户案例

1. HEX 转 RGB

前端开发工程师
背景原因
在编写 CSS 样式时，设计稿提供的是 HEX 格式颜色，但项目规范要求统一使用 RGB 格式以支持透明度设置。
解决问题
需要将 #FF5733 转换为 RGB 格式。
如何使用
输入 #FF5733，设置输入格式为 HEX，输出格式为 RGB。
效果
成功获取 rgb(255, 87, 51)，可直接复制到 CSS 代码中使用。

2. RGB 转 HSL

UI 设计师
背景原因
设计师需要基于现有的 RGB 颜色创建一个色调一致的深色版本，使用 HSL 格式调整亮度会更加方便。
解决问题
需要将 rgb(255, 87, 51) 转换为 HSL 格式。
如何使用
输入 rgb(255, 87, 51)，设置输入格式为 RGB，输出格式为 HSL。
效果
成功获取 hsl(11, 100%, 60%)，方便后续通过调整 L 值进行配色。

用 Samples 测试

design
颜色代码示例
用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色）
title token color
sample
十六进制/Unicode转换样本
十六进制和Unicode转义序列转换的测试样本
task convert,format
sample
大小写转换样本
不同命名约定之间的大小写转换测试样本
task convert,format
sample
Web Python 图像处理示例
Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
task convert,format
sample

相关专题

DesignConvert工具专题
探索 98 个围绕 design 的 convert 工作流工具，快速找到相近能力。
DesignGenerate工具专题
探索 19 个围绕 design 的 generate 工作流工具，快速找到相近能力。
JsonConvert工具专题
探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。
ImageConvert工具专题
探索 100 个围绕 image 的 convert 工作流工具，快速找到相近能力。

常见问题

该工具支持哪些颜色格式？

目前支持 HEX (#RRGGBB)、RGB (rgb(r,g,b)) 和 HSL (hsl(h,s%,l%)) 三种常用格式。

转换后的颜色会失真吗？

不会。该工具使用标准的数学公式进行转换，确保颜色数值在不同格式间精确对应。

我可以批量转换颜色吗？

该工具目前设计为单次转换，您可以快速连续输入多个颜色进行处理。

输入颜色时需要注意什么？

请确保输入的格式与您选择的“输入格式”一致，例如选择 HEX 时输入 #FF5733。

该工具是否需要安装？

不需要，这是一个完全基于网页的在线工具，打开浏览器即可直接使用。

API 文档

请求端点

POST /zh/api/tools/color-converter

请求参数

参数名 类型 必填 描述
colorInput text 是 -
inputFormat select 是 -
outputFormat select 是 -

响应格式

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
文本: 文本

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-color-converter": {
      "name": "color-converter",
      "description": "在不同颜色格式之间转换",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=color-converter",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]