跳转到内容
Tutorial

通过一次 API 调用在十六进制、RGB 和 HSL 之间转换颜色

| 5 min read

以 HEX、RGB 或 HSL 形式发送颜色,并在一个 POST 中返回所有三种表示形式。 构建设计标记、规范 CMS 输入并生成主题比例,无需颜色库。

Code editor generating color design tokens from a brand color
Photo by Safar Safarov on Unsplash

颜色转换数学是一种您编写一次的代码,会犯一些微妙的错误,然后在之间复制 永远的项目。 十六进制到 RGB 很简单; RGB 到 HSL 是存在一定程度错误的地方 住。 该端点采用三种格式中任意一种的颜色并立即返回所有三种格式,因此 你不再携带转换函数。

请求

响应给出了十六进制字符串,一个 {`{ r, g, b }`} 对象,以及一个 {`{ h, s, l }`} 一起对象:

输入格式并不重要。 经过 rgb(62, 201, 151) 或者一个 HSL 字符串,你会得到 同样的三个表示回来。 无论有或没有,十六进制都可以工作 #:

从一种品牌颜色生成设计标记量表

HSL 是值得构建的格式。 因为它将色调与亮度分开,所以您可以产生 通过保持色调和饱和度稳定并逐步调整亮度值来实现完整的色调和阴影比例。 将您的品牌十六进制转换为 HSL 一次,然后轻松生成 50 到 900 的比例 a 设计系统需求:

在构建步骤中运行它并将输出写入 CSS 变量文件。 你会得到一个协调的 调色板来自单一源颜色,并且更改品牌颜色会重新生成整个比例:

需要完整的调色板而不是单一的转换? 这 /v1/color/palette 端点采用一种基色并返回一组协调的色调和互补色, 这样您就可以围绕品牌颜色进行主题设计,而无需手动挑选每个样本。

标准化粘贴到 CMS 中的颜色

内容编辑器以设计工具导出的任何格式粘贴颜色:Figma 的十六进制、 rgb() 来自屏幕截图工具、来自 CSS 片段的 HSL。 运行每个粘贴的值 通过端点保存并存储标准化的十六进制。 然后你的渲染代码处理一个 格式,编辑器会继续粘贴任何方便的内容。

适合的地方

对于浏览器中的交互式 UI 数学,本地函数就可以了。 API 在构建中赢得了一席之地 步骤、后端和任何没有纯色包的语言:单个 HTTP 调用取代 依赖性。 颜色转换是 botoi 上大约 200 个单一用途端点之一,全部落后 一键免费,每分钟 5 次请求。

尝试在中进行转换 互动游乐场, 浏览 完整的 API 文档, 或连接 MCP服务器 直接从 Claude 或 Cursor 转换颜色。

FAQ

API 接受并返回哪些颜色格式?
以 HEX、RGB 或 HSL 形式发送颜色,响应会立即返回所有三种表示形式。 十六进制字符串可以使用或不使用前导 # 前缀。 一次调用即可为您提供十六进制字符串、一个 {r, g, b} 对象和一个 {h, s, l} 对象,因此您无需手动编写转换数学。
为什么通过 API 而不是在浏览器中转换颜色?
对于一次性 UI 数学运算,请在浏览器中进行。 该 API 在构建步骤和后端中占有一席之地:在构建时生成设计令牌、标准化粘贴到 CMS 中的颜色,或者在您不想发送颜色库的服务器端生成主题资产。 它是来自任何语言的单个 HTTP 调用,包括没有良好颜色包的语言。
我可以生成完整的调色板,而不仅仅是转换一种颜色吗?
是的。 颜色/调色板端点采用基色并返回一组协调的色调和互补色。 当您有一种已知颜色并需要其其他表示形式时,请使用颜色/转换;当您有一种品牌颜色并需要一个比例来围绕它构建主题时,请使用颜色/调色板。
HSL 值如何帮助主题化?
HSL 将色调与饱和度和亮度分开,因此您可以通过保持色调和饱和度稳定并逐步调整亮度来构建色调和阴影比例。 这比推动三个 RGB 通道更容易推理。 将您的品牌十六进制转换为 HSL 一次,然后通过遍历亮度值生成 50 到 900 的范围。
颜色 API 可以免费使用吗?
是的。 颜色转换与 botoi 的其余部分处于相同的免费层:每分钟 5 个请求,无需 API 密钥,并且对付费计划有更高的限制。 它是一键下大约 200 个单一用途端点之一。

开始使用 botoi 构建

150+ 个 API 端点,涵盖查询、文本处理、图片生成和开发者工具。免费套餐,无需信用卡。