🎨

颜色转换器

即时转换HEX、RGB、HSL、HWB、LCH、CMYK和颜色名称等不同颜色格式。支持实时转换、高级颜色选择器和预览功能。

在HEX、RGB、HSL、HWB、LCH、CMYK和颜色名称之间转换。支持实时转换和颜色选择器。
颜色选择器
#1EA54C
HEX
RGB
HSL
HWB
LCH
CMYK
名称

什么是 颜色转换器

颜色转换器支持 RGB、HSL、HEX、CMYK、HWB、LCH 等多种颜色模型,提供颜色格式互转、调色板生成和对比度检查功能。RGB 使用红绿蓝三原色(0-255),HEX 使用十六进制表示(#FFFFFF),HSL 使用色相、饱和度、亮度。广泛应用于 Web 设计、UI 界面开发、品牌配色方案制定,帮助设计师快速选择和管理颜色。

功能特点

🚀

8种不同的颜色格式,包括HEX、RGB、HSL、CMYK

支持 HEX(#FFFFFF)、RGB(rgb(255,255,255))、HSL(hsl(0,0%,100%))、CMYK(印刷四色)、HSV、LAB、XYZ 等8种颜色格式的相互转换。每种格式都有特定的应用场景:HEX 用于网页,RGB 用于屏幕显示,CMYK 用于印刷,HSL 用于直观的颜色调整。

实时转换,输入或选择即显示

修改任何一种格式的颜色值,其他所有格式自动同步更新。支持颜色选择器拾色、手动输入颜色值、粘贴颜色代码等多种输入方式。提供实时预览,即时显示当前颜色效果。支持透明度(Alpha 通道)的转换。
🎯

一键复制每种格式

每种颜色格式都提供独立的复制按钮,点击即可复制到剪贴板。自动格式化为标准的 CSS 颜色值,可直接粘贴到代码中使用。支持批量复制所有格式的颜色值。提供颜色代码的不同变体(如 RGB、RGBA、rgb()、rgb(r g b))。
🔒

本地处理,数据不会发送到服务器

所有颜色转换计算在浏览器本地完成,不上传任何数据到服务器。完全离线可用,保护设计方案和配色隐私。支持保存常用颜色到本地收藏夹。无需注册或登录,打开即用。
🎯

Use Cases

DESIGN

Design asset preparation

Use Color Converter to create, inspect, adjust, or validate visual assets before adding them to websites, product screens, documents, or presentations.
QA

Visual quality checks

Color Converter helps catch image, color, metadata, layout, or accessibility issues early in the content production workflow.
HANDOFF

Team handoff

Prepare clearer outputs with Color Converter for designers, developers, marketers, support teams, and documentation maintainers.

📋使用指南

1️⃣
选择颜色
使用颜色选择器或输入颜色值
2️⃣
查看格式
所有颜色格式将自动显示
3️⃣
复制结果
点击复制按钮复制任何格式

📚技术介绍

🎨颜色模型和空间

颜色转换处理不同颜色模型之间的转换:RGB(屏幕使用每通道0-255值的红绿蓝加色法)、HSL(色相0-360°,饱和度/亮度0-100%感知模型)、HSV/HSB(色相-饱和度-值/明度替代圆柱模型)、CMYK(印刷的青品黄黑减色法)、HWB(色相-白度-黑度直观混合模型)、LAB(L*亮度,a*绿-红,b*蓝-黄设备独立空间)、LCH(亮度-色度-色相极坐标LAB)。转换器实现精确的数学转换:RGB↔HSL使用色度计算(max-min)和色相扇区确定;RGB↔CMYK应用K=1-max(R,G,B)然后CMY=(1-RGB)/(1-K);LAB↔XYZ使用D65光源参考白。它处理边缘情况:消色差颜色(未定义色相)、超出范围值的色域裁剪、用于准确亮度表示的伽马校正(sRGB使用2.2伽马)。

⚙️格式解析和验证

该工具通过基于正则表达式的提取和验证解析多样的颜色输入格式。支持的语法包括:带有可选井号的HEX(#RGB、#RRGGBB、#RRGGBBAA)、CSS函数表示法(rgb()、rgba()、hsl()、hsla()、hwb()、lab()、lch())、传统格式(rgb(255 255 255)、hsl(180deg 50% 50%))、CSS颜色Level 4(rgb(100% 50% 0)、oklch()、oklab())、命名颜色(不区分大小写的CSS关键字)。验证实现:每个颜色模型的范围检查(RGB 0-255、色相0-360、百分比0-100%)、单位解析(角度的deg/rad/turn,百分比的%)、alpha通道验证(0-1或0-100%)、无效语法的错误消息。转换器处理模糊输入:纯数字值默认为RGB、尝试从值模式检测格式、提供纠正建议。输出格式化提供:可配置精度(小数位数)、大写/小写HEX、百分比vs十进制RGB、逗号vs空格分隔符、压缩vs可读格式。

💡颜色和谐和可访问性

该工具基于色彩理论生成配色方案:互补色(180°色相旋转)、类似色(±30°色相)、三元色(120°间距)、四元/方形(90°间距)、分裂互补、单色(相同色相,变化亮度/饱和度)。它实现WCAG可访问性检查:使用相对亮度公式计算对比度、根据WCAG 2.1级别验证(AA要求普通文本4.5:1,大文本3:1;AAA要求7:1和4.5:1)、建议颜色调整以满足标准、提供通过/失败指示器。色盲模拟模型:红色盲(protanopia)、绿色盲(deuteranopia)、蓝色盲(tritanopia)、全色盲(achromatopsia),使用Brettel/Viénot算法。导出功能提供:带有变量名的调色板JSON/CSS/SCSS、设计工具集成(Adobe ASE、Sketch、Figma)、渐变代码生成(CSS、SVG、Canvas)、带有可访问性说明的配色方案文档。

常见问题

这个颜色转换器工具用来做什么?

这个颜色转换器工具用于在不同颜色格式之间转换,包括 HEX、RGB、HSL、HWB、LCH、CMYK 和颜色名称。提供实时转换、可视化颜色选择器和即时预览。非常适合网页设计师、UI 开发者和平面设计师快速选择和管理不同平台和格式的颜色。
💬

如何使用颜色转换器?

只需使用交互式颜色选择器可视化选择颜色,或直接输入任何格式的颜色值(HEX、RGB、HSL 等)。所有其他格式将自动实时转换并显示。点击任何格式旁边的复制按钮,即可将其复制到剪贴板以在您的项目中使用。
🔍

这个颜色转换器工具免费吗?

是的,这个颜色转换器完全免费使用。无需注册,无需付费。所有颜色转换都在您的浏览器本地处理,确保隐私和安全。您可以无限制地转换颜色。
💡

这个颜色转换器有什么特别之处?

本转换器支持 8 种以上的颜色格式,包括 LCH 和 LAB 等现代色彩空间。提供实时转换、带滑块的可视化颜色选择器、预设调色板、随机颜色生成和每种格式的一键复制。所有处理都在浏览器本地完成,保护隐私并支持离线使用。
📚

什么时候应该使用不同的颜色格式?

使用 HEX (#FFFFFF) 进行网页开发和 CSS,RGB (rgb(255,255,255)) 用于 JavaScript 和屏幕显示,HSL (hsl(0,100%,50%)) 用于直观的颜色调整,CMYK 用于印刷设计,LAB/LCH 用于设备独立的颜色,颜色名称(red, blue)用于快速原型制作。每种格式都针对特定用例进行了优化。

💡How To & Tips

颜色值验证

输入颜色值时确保格式正确。HEX 格式需 # 前缀(#FFFFFF),RGB 值范围 0-255,HSL 色相 0-360°,饱和度/亮度 0-100%

选择合适的颜色空间

根据用途选择:HEX/RGB 用于网页和屏幕显示;HSL 用于直观调色;CMYK 用于印刷;LAB 用于设备无关的精确颜色

注意色域限制

不同颜色空间有不同的色域范围。某些 RGB 颜色转换为 CMYK 时可能无法完全还原,注意查看转换警告

🔗Related Documents

📖W3C CSS Color Module Level 3-CSS 颜色模块的官方规范文档
🎓W3C CSS Color Module Level 4-最新的 CSS 颜色规范和新颜色空间
ISO/IEC 61966-2-1 - sRGB 颜色空间-sRGB 颜色空间的国际标准
🔬CIE 1931 颜色空间-CIE 1931 颜色空间的科学定义

User Comments

0 / 2000
Loading...