图像工具

颜色转换器

RGB、HEX、HSL 颜色格式相互转换

#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 标准
  • 配色设计：快速生成和谐的配色方案

常见问题

HEX、RGB、HSL 各适合什么场景？
设计稿与 CSS 常用 HEX；需要程序化调整透明度时 RGB/RGBA 更直接；HSL 对人类最直观——调色改"色相、饱和度、明度"三个独立维度，生成同色系（只动色相）或深浅阶梯（只动明度）都比 HEX 方便得多。
为什么同一颜色在不同屏幕上看起来不一样？
颜色由设备色域和校色决定：同一 sRGB 值在不同面板、亮度、色彩配置下渲染有差异。对色彩准确性有要求（品牌色、印刷）时应基于色彩管理系统并校准显示器；网页端在 CSS 中统一声明 color-profile 可减少偏差。
怎么保证文字和背景色的对比度达标？
用 WCAG 对比度标准：正文至少 4.5:1，大字号（18pt+）3:1。工具显示的对比度数值可以直接核对——设计深色主题时，把灰色文字在两种背景上的对比度都查一遍，是提升可访问性最快的手段。