颜色转换器

什么是颜色转换器？

颜色转换器是一款在线工具，可以实时将HEX、RGB、HSL三种颜色格式相互转换——这是网页设计和开发中必不可少的三种格式。无论您需要将Photoshop中的RGB值转换为CSS使用的HEX代码，还是切换到HSL来调整亮度同时保持相同的色相，这个工具都能轻松完成。

只需输入颜色值，即可立即转换为所有其他格式，同时实时预览显示实际颜色。一键即可复制转换后的颜色代码，立即用于您的项目，显著提高工作效率。

使用场景

• 网页开发 – 将设计稿中的RGB颜色转换为CSS样式表使用的HEX代码
• UI/UX设计 – 使用HSL调整亮度或饱和度，在保持相同色相的同时创建颜色变体
• 构建调色板 – 从基础颜色中提取多种具有一致色相的明暗色调
• 跨平台工作 – 在Photoshop（RGB）、Illustrator（HEX）和CSS（多种格式）之间统一颜色值
• 无障碍测试 – 获取精确的颜色值以计算对比度
• 演示文稿 – 快速查找并复制幻灯片和文档所需的颜色代码

主要功能

• 实时双向转换 – 输入任何HEX、RGB或HSL值，其他格式会立即更新。无需点击转换按钮。
• 可视化颜色选择器 – 直接从色轮中选择颜色。即使不知道确切的值，也能直观地找到想要的颜色。
• 一键复制CSS代码 – 只需点击一下即可复制如color: #D4AF37;的CSS代码。可选择HEX、RGB或HSL输出格式。
• 自动保存颜色历史 – 您使用过的颜色会自动保存，方便重复使用。关闭浏览器后历史记录仍然保留。
• 随机颜色生成 – 需要新灵感时，可以生成随机颜色为您的设计提供新思路。
• 直观的输入控制 – RGB使用0-255范围输入，HSL使用色轮（0-360°）和百分比——每种格式都针对其特性进行了优化。

使用方法

1. 选择颜色 – 点击颜色选择器从色轮中选择，或直接在HEX/RGB/HSL输入框中输入已知的值。
2. 实时预览 – 您选择的颜色会立即显示在预览区域。同时自动计算并显示所有三种格式。
3. 复制代码 – 点击任何格式旁边的”复制”按钮即可复制到剪贴板。如需CSS代码，请使用下方的”复制CSS”按钮。
4. 使用颜色历史 – 之前使用过的颜色会自动保存在历史记录中。点击任何颜色块即可立即应用该颜色。

颜色格式详解

HEX（十六进制颜色代码）

网页上使用最广泛的颜色格式。以#RRGGBB形式表示，其中红（R）、绿（G）、蓝（B）值分别用00到FF的两位十六进制数表示。

• 示例： #D4AF37（金色）、#FF5733（橙色）、#3498DB（蓝色）
• 简写： 当每个颜色通道的两位数字相同时，可以简写为3位。#FF0000 → #F00
• 优点： 简短精炼，CSS/HTML中的标准格式，便于复制粘贴
• 使用场景： CSS样式表、HTML内联样式、设计系统文档

RGB（红、绿、蓝）

基于光的三原色的加色模型。每个颜色通道的值从0到255，三种颜色混合决定最终颜色。

• 示例： rgb(212, 175, 55)（金色）、rgb(255, 255, 255)（白色）、rgb(0, 0, 0)（黑色）
• 工作原理： 所有值为0时显示黑色；所有值为255时显示白色
• 优点： 直观理解颜色混合，与Photoshop等图形工具兼容，便于在编程中进行颜色计算
• 使用场景： 图形软件、JavaScript颜色操作、动画颜色过渡

HSL（色相、饱和度、亮度）

更接近人类感知颜色方式的表示法。使用色轮上的角度（Hue）、颜色鲜艳度（Saturation）和亮度级别（Lightness）来定义颜色。

• 示例： hsl(46, 67%, 52%)（金色）、hsl(0, 100%, 50%)（纯红色）
• H（色相）： 0° = 红色，60° = 黄色，120° = 绿色，180° = 青色，240° = 蓝色，300° = 品红
• S（饱和度）： 0% = 灰度，100% = 纯色
• L（亮度）： 0% = 黑色，50% = 纯色，100% = 白色
• 优点： 在保持色相的同时轻松调整亮度/饱和度，非常适合创建调色板，直观理解颜色关系
• 使用场景： 基于CSS变量的主题系统、悬停效果（仅改变亮度）、创建一致的调色板

选色技巧

• 品牌色变体： 将基础品牌色转换为HSL后，只调整L（亮度）值，即可轻松创建保持相同色相的明暗变体。
• 寻找互补色： 在HSL中，将H（色相）值加180即可得到互补色。例如：蓝色（240°）的互补色是黄色（60°）。
• 寻找相邻色： 以30°为间隔调整H值，可以创建和谐的相邻色调色板。
• 无障碍考虑： WCAG建议文本与背景之间的对比度至少为4.5:1。检查亮度（L）值的差异是否足够。

常见问题