星点 星点-颜色工具 本系列首页
关于
版本 v1.0.0

颜色格式转换工具

输入任意颜色,一键换算为 HEX、RGB、HSL、HSV、CMYK、LAB、XYZ、LCH、HWB、OKLab、OKLCH 等格式,并生成 CSS / SCSS / Tailwind / CSS 变量代码。Alpha 独立处理,超出色域会提示。

颜色格式转换 · 工具介绍

不同工具与语言使用不同的颜色表示方式:网页常用 HEX 与 RGB,设计常用 HSL,印刷用 CMYK,专业色彩空间则使用 LAB、OKLab 等。

本工具提供统一入口:输入任一格式的颜色,即自动计算全部目标格式;每个格式单独一行,可逐个复制。

“颜色代码”区域还会生成可直接使用的 CSS、SCSS、Tailwind 配置与 CSS 变量写法,帮助前端与设计快速落地。

颜色空间以 sRGB / D65 为基准,转换公式明确;当颜色超出目标色域时会给出提示。

颜色格式转换 · 功能特点

  • HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK 互转
  • LAB / XYZ / LCH / HWB / OKLab / OKLCH 专业空间
  • Alpha 透明度独立处理,输出 RGBA/HSLA
  • 颜色代码:CSS / SCSS / Tailwind / CSS 变量
  • 批量模式:多行颜色一次转换
  • 超出色域提示,明确颜色空间
  • 全部结果一键复制

颜色格式转换 · 使用方法

  1. 在输入框输入颜色(如 #ff0000、rgb(255,0,0)、hsl(0,100%,50%));
  2. 查看下方各格式换算结果,逐个复制;
  3. 在“颜色代码”区复制 CSS / SCSS / Tailwind / 变量写法;
  4. 需要批量处理时切换到批量模式,每行一个颜色;
  5. 如提示超出色域,可根据裁剪后的值调整颜色。

颜色格式转换 · 常见问题

Q:支持哪些颜色格式?

支持 HEX、RGB、RGBA、HSL、HSLA、HSV、CMYK、LAB、XYZ、LCH、HWB、OKLab、OKLCH,以及 CSS 颜色名称解析。

Q:转换结果准确吗?

准确。sRGB 与 XYZ、LAB、OKLab 的转换矩阵与白点(D65)均采用标准公式,LAB/LCH 使用 D65 白点。

Q:“超出色域”是什么意思?

某些 LAB/OKLCH 颜色在 sRGB 中无法精确表示,工具会提示并给出裁剪到 sRGB 后的近似值。

Q:可以批量转换吗?

可以。切换到批量模式后每行输入一个颜色,工具会逐行输出转换结果,便于整理设计规范。

Q:CSS 变量和 Tailwind 代码能直接用吗?

可以。工具会按当前颜色生成 --color: #xxxxxx; 以及 Tailwind 的 colors 配置片段,直接复制到项目即可。

相关工具

继续使用本站其它颜色处理工具:

颜色选择器

色相/饱和度/明度面板取色,多格式实时同步与多点保存

打开工具

图片颜色工具

上传图片取色、提取主色与调色板、统计与聚类量化

打开工具

配色方案生成器

按色彩关系生成单色/类似/互补/三角/四角等配色方案

打开工具

CSS 渐变生成器

可视化制作线性/径向/锥形渐变并复制 CSS

打开工具

对比度检测

WCAG AA/AAA 对比度检测,给出最佳文字色与替代色

打开工具

颜色调整

滑块实时调整亮度/饱和度/透明度/色相/明度/对比度

打开工具

批量颜色处理

批量转换/提取/替换/去重/排序颜色代码

打开工具

设计辅助

主色/辅助色/状态色 → UI 结构预览 + Design Token 导出

打开工具

专业色彩

LAB/OKLab/OKLCH 转换、DeltaE 色差、色温与色域分析

打开工具

色觉模拟

模拟多种色觉类型,检查图片与配色的可辨识度

打开工具

标准与色库

CSS/Material/Tailwind/Ant/品牌/传统色等色库查询复制

打开工具