颜色转换器

为网页设计师和开发者提供的综合颜色转换工具。实时转换HEX、RGB、HSL、HSV等各种颜色格式并即时预览。使用颜色选择器和滑块直观地找到所需颜色，或使用预设颜色快速工作。
102
126
234
HEX
#667eea
RGB
rgb(102, 126, 234)
HSL
hsl(228, 77%, 66%)
CMYK
cmyk(56%, 46%, 0%, 8%)
颜色和谐
互补色
类似色
三角配色
分割互补色
预设颜色

颜色代码转换完整指南

01

什么是颜色代码转换？

颜色代码转换是数字设计中使用的各种颜色表示方式（HEX、RGB、HSL、HSV）之间的相互转换过程。在网页设计、图形设计、应用开发等领域中都是必不可少的。每种颜色代码格式都有其独特的优势，根据情况选择适当的格式非常重要。
02

主要颜色代码格式

HEX: #RRGGBB格式，网页中最广泛使用 (例: #FF0000是红色)
RGB: rgb(255, 0, 0)格式，每个通道0-255范围，支持透明度(rgba)
HSL: hsl(0, 100%, 50%)格式，通过色相/饱和度/亮度直观调整
HSV: 与HSL类似但亮度计算方式不同，主要在设计软件中使用
03

在网页设计中的应用

HEX代码在CSS中最常用（如品牌颜色#3498db），RGB在使用JavaScript进行动态颜色控制时很有用。HSL在创建颜色主题时特别方便，只改变色相（Hue）而保持饱和度和亮度不变，就可以轻松创建一致的颜色调色板。
04

颜色可访问性和对比度

根据WCAG可访问性指南，文本和背景之间的颜色对比度非常重要。普通文本需要至少4.5:1的对比度，大文本需要3:1。使用颜色转换器时，可以调整亮度（Lightness）值来确保适当的对比度以提高可读性。
05

颜色和谐与调色板

创建和谐调色板的方法:
单色配色: 相同Hue下只改变Saturation/Lightness
类似配色: Hue在30度以内变化
互补配色: Hue相反180度
三角配色: Hue每隔120度（0度、120度、240度）
06

颜色转换工具使用技巧

• 设计阶段: 使用HSL选择颜色（直观）
• CSS编写: 使用HEX或RGB
• JavaScript动画: RGB/RGBA（不透明度控制）
• 调色板生成: HSL（基于Hue的变化）
• 浏览器兼容性: HEX最安全
• 颜色保存: 以所有格式记录