这个工具支持哪些颜色格式？

支持 HEX（6 位十六进制，如 #3b82f6）、RGB（每通道 0–255）、HSL（色调 0–360°，饱和度和亮度 0–100%）以及 Tailwind CSS 类名。编辑任意格式，其余格式即时更新。

Tailwind 颜色匹配是如何工作的？

工具使用 RGB 欧氏距离，将输入颜色与 Tailwind v3 调色板中全部约 242 种颜色（22 个色系 × 每系 11 个色阶）进行比对，返回最接近的类名，例如 'blue-500'。

Tailwind 匹配结果一定精确吗？

不一定。如果输入颜色恰好是 Tailwind 调色板中的颜色，则精确匹配；对于任意颜色，返回的是最近邻，视觉上可能存在偏差。Tailwind 卡片旁的色块可帮助直观对比。

调色板来自哪个版本的 Tailwind？

查找表使用 Tailwind CSS v3 默认调色板，包含全部 22 个色系（slate、gray、zinc、neutral、stone、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose），每系 11 个色阶（50 至 950）。

可以直接输入 HSL 值吗？

可以。点击 H、S 或 L 任意输入框并输入数值。色调范围为 0–360 度，饱和度和亮度为 0–100%，输入后 HEX 和 RGB 字段会立即同步更新。

离线也能使用吗？

页面加载后可以离线使用。所有转换逻辑和 Tailwind 查找表均打包在 JavaScript 中，颜色转换过程不会发起任何网络请求。

颜色转换器

在 HEX、RGB、HSL 格式之间相互转换，并即时查找最接近的 Tailwind CSS 类名。

#6366F1

HEX

RGB

HSL

H°

Tailwind

indigo-500

最接近的 Tailwind 颜色类

即时转换 HEX、RGB、HSL 与 Tailwind 颜色

在不同颜色格式之间切换是构建 UI 时的常见摩擦点。Zolkit 颜色转换器支持 HEX、RGB 和 HSL 双向转换，还能自动查找最近的 Tailwind CSS 颜色类名，让你从设计工具的十六进制代码到工具类一步完成。

三格式同步

编辑任意格式（HEX、RGB 或 HSL），其他格式即时同步更新，始终保持一致。

Tailwind 颜色匹配

使用 RGB 欧氏距离，在完整 22 色系 Tailwind v3 调色板中自动找到最接近的颜色类名。

实时色块预览

大号拾色器提供直观的视觉预览，调整数值时即时显示当前颜色效果。

一键复制任意格式

每个格式卡片均提供一键复制功能，可复制 HEX 字符串、rgb() 函数、hsl() 函数或 Tailwind 类名。

完全私密

所有颜色计算均在浏览器本地完成，数据不会发送至任何服务器。

永久免费

无需账号，无使用限制，无付费墙，颜色转换完全免费。

如何转换颜色

1
点击拾色器，或在任意格式输入框（HEX、RGB 或 HSL）中直接输入数值。
2
其他格式输入框自动更新，Tailwind 卡片显示最接近的工具类名。
3
点击任意卡片上的复制按钮，将对应格式复制到剪贴板。