256 Tools

颜色格式转换器

颜色值
HEX#3498DB
RGB52, 152, 219
HSL204, 70%, 53%
HSV204, 76%, 86%
CMYK76, 31, 0, 14
代码片段
CSS hex#3498db
CSS rgb()rgb(52, 152, 219)
CSS hsl()hsl(204, 70%, 53%)
SwiftUIColor(red: 0.204, green: 0.596, blue: 0.859)
Android XML<color name="color">#3498DB</color>
FlutterColor(0xFF3498DB)

相关外部网站

部分链接为联盟营销链接。

Adobe Color免费的在线配色工具，用于创建和探索色彩方案。使用色轮创建和谐配色，或从上传图片中提取颜色。色板可直接同步到Creative Cloud。Canva通过直观的拖放操作创建社交媒体帖子、演示文稿和海报的热门设计平台。提供海量免费和付费模板、图片及图形素材。无需设计经验即可上手。

相关工具

颜色转换在一个界面中互转 HEX、RGB、HSL、HSV 和 RGBA。改动任一数值其余实时联动，一键复制，支持透明度与 WCAG 对比度。配色生成器从基础色（HEX）生成互补色、类似色、三角等和谐配色。锁定颜色后重新生成其余，可导出为 CSS 变量、Tailwind 或 JSON。图片配色提取在浏览器本地从图片提取主色调与占比（%），无需上传。支持 HEX/RGB，可自定义颜色数量，一键复制或导出为 CSS/JSON。CSS 单位转换器在 px、rem、em、pt 和 % 之间相互转换，可设置根字号与父字号。全部在浏览器内计算。

输入 HEX、RGB 或 HSL 格式的颜色，转换器会以所有常见格式显示——HEX、RGB、HSL、HSV 和 CMYK——并生成可直接粘贴的 CSS、SwiftUI、Android、Flutter 代码。专为需要在不同语法间转换颜色的开发者设计，一切在浏览器中完成。

使用方法

  1. 以 HEX、rgb() 或 hsl() 格式粘贴颜色。
  2. 在实时预览中查看各格式的数值。
  3. 复制适用于当前平台的代码片段。

工作原理

无论您使用哪种语法，输入都会被解析为红、绿、蓝三个分量。从这些值出发，工具计算其他模型：HSL 和 HSV 描述色相、饱和度及明度，CMYK 是面向印刷的青-品红-黄-黑模型。每个平台的代码片段以该语言的精确语法生成，可直接粘贴到代码中。

同一颜色以 HEX、RGB、HSL、HSV 和 CMYK 格式显示。→HEX RGB HSLHSV CMYKCSS / Swift…

功能特点

五种颜色模型

一次查看任意颜色的 HEX、RGB、HSL、HSV 和 CMYK。

可复制代码

获取 CSS、SwiftUI、Android XML 和 Flutter 代码片段。

灵活输入

支持 HEX（3 或 6 位数字）、rgb() 和 hsl() 语法。

私密且即时

所有转换在浏览器中完成，不上传任何数据。

适用场景

网页开发

在 CSS 中切换 hex、rgb() 和 hsl() 颜色格式。

移动端应用

获取 SwiftUI、Android 或 Flutter 的正确颜色字面量。

印刷

查看面向印刷工作的 CMYK 分量。

设计转代码

将设计稿中的颜色精确转换为所需代码。

注意事项

  • HSV 在部分设计工具中也称为 HSB。
  • 此处的 CMYK 为简单数学转换，并非色彩管理配置文件。
  • Android 和 Flutter 代码片段假定颜色完全不透明。
  • 所有转换在本设备完成，不上传任何数据。

常见问题

支持哪些输入格式？
支持 HEX（3 或 6 位，带或不带 #）、rgb()/rgba() 以及 hsl()/hsla() 语法。
与普通颜色转换器有何不同？
本工具专注于开发者输出——提供 CSS、SwiftUI、Android 和 Flutter 的可粘贴代码，以及 HSV 和 CMYK 值。
CMYK 是否适合印刷？
这是标准数学转换。如需精确的印刷输出，请使用印刷商提供的色彩管理配置文件。
什么是 HSV？
色相、饱和度、明度——部分设计工具称之为 HSB。用于选取和调整颜色非常方便。
我的颜色会被上传吗？
不会。所有转换在浏览器中完成，数据不会离开您的设备。

我们使用 Cookie 用于广告和分析。