🎨

Color Converter

Convert between RGB, HEX and HSL color formats.

图像工具
#00d4aa
HEX#00d4aa
RGB rgb(0, 212, 170)
HSL hsl(168, 100%, 42%)
HSV hsv(168, 100%, 83%)
对比度检查 (WCAG)
白色背景
对比度: 1.91:1Fail - 不足
深色背景
对比度: 11.00:1AAA - 优秀
颜色方案
HEX
#
RGB
HSL
°
%
%
HSV
°
%
%
预设调色板
Material Design
Flat UI
Pastel
最近使用

什么是颜色转换器

颜色转换是在不同颜色表示格式之间进行转换的过程。颜色转换工具支持四种常用的颜色表示格式之间的相互转换:HEX(十六进制)、RGB(红绿蓝)、HSL(色相饱和度亮度)和 HSV(色相饱和度明度)。还提供对比度检查、颜色方案生成等高级功能。

支持的格式

  • HEX:十六进制颜色码,格式为 #RRGGBB,例如 #00d4aa
  • RGB:红绿蓝三原色值,每个值范围 0-255,例如 rgb(0, 212, 170)
  • HSL:色相、饱和度、亮度,例如 hsl(168, 100%, 42%)
  • HSV:色相、饱和度、明度,例如 hsv(168, 100%, 83%)

核心功能

  • 格式转换:支持 HEX、RGB、HSL、HSV 四种格式的实时相互转换
  • 对比度检查:基于 WCAG 标准检查颜色与白色/黑色的对比度,评估可访问性
  • 颜色方案生成:自动生成互补色、三色、四色、相似色等配色方案
  • 预设调色板:提供 Material Design、Flat UI、Pastel 等经典调色板
  • 颜色历史:自动记录最近使用的颜色,方便快速选择

对比度评级

  • AAA:对比度 ≥ 7:1,优秀,适合正文和重要内容
  • AA:对比度 ≥ 4.5:1,良好,满足基本可访问性要求
  • A:对比度 ≥ 3:1,一般,仅适合大号文字
  • Fail:对比度 < 3:1,不足,不符合可访问性标准

使用场景

  • CSS 开发:在不同颜色格式间转换,生成配色方案
  • 设计工具:将设计稿中的颜色转换为代码格式
  • 主题定制:调整颜色参数创建主题色,检查对比度
  • 可访问性:确保颜色对比度符合 WCAG 标准
  • 配色设计:快速生成和谐的配色方案