🎨 颜色选择器

选择颜色并转换格式

操作

📖 使用指南

免费在线颜色选择器 - 支持HEX、RGB、HSL和RGBA格式

⚡ 快速开始

三步选择和转换颜色：

1
选择颜色

点击颜色选择框选择你需要的颜色

2
查看格式

下方自动显示 HEX、RGB、HSL 等多种格式

3
复制代码

点击各格式旁的"复制"按钮即可使用

🎨 颜色格式详解

HEX 格式（十六进制）
  • 格式：#RRGGBB，如 #FF5733
  • 含义：R(红) G(绿) B(蓝)，各占 2 位十六进制数字
  • 范围：00-FF（十进制 0-255）
  • 用途：Web 开发、CSS 样式表
  • 示例：
    • #FFFFFF - 白色
    • #000000 - 黑色
    • #FF0000 - 红色
RGB 格式
  • 格式：rgb(R, G, B)，如 rgb(255, 87, 51)
  • 含义：红、绿、蓝三个分量的十进制值
  • 范围：0-255
  • 用途：CSS、JavaScript、图形设计
  • 示例：
    • rgb(255, 255, 255) - 白色
    • rgb(0, 0, 0) - 黑色
    • rgb(0, 128, 255) - 天蓝色
HSL 格式
  • 格式：hsl(H, S%, L%)，如 hsl(9, 100%, 60%)
  • H (色调 Hue)：0-360 度（360 度回到红色）
  • S (饱和度 Saturation)：0-100%（0% 是灰色，100% 最艳丽）
  • L (亮度 Lightness)：0-100%（0% 黑色，50% 正常，100% 白色）
  • 用途：颜色调整、渐变生成
  • 示例：
    • hsl(0, 0%, 100%) - 白色
    • hsl(0, 0%, 0%) - 黑色
    • hsl(120, 100%, 50%) - 纯绿色
RGBA 格式（带透明度）
  • 格式：rgba(R, G, B, A)，如 rgba(255, 87, 51, 0.8)
  • A (透明度 Alpha)：0-1（0 完全透明，1 完全不透明）
  • 用途：半透明效果、阴影、覆盖层
  • 示例：
    • rgba(0, 0, 0, 0.5) - 半透明黑色
    • rgba(255, 255, 255, 0.7) - 半透明白色

🔄 颜色操作

生成随机颜色
  • 功能：随机生成一个新颜色
  • 用途：快速获得灵感、测试配色
  • 技巧：多次点击找到满意的颜色
反转颜色
  • 功能：生成当前颜色的补色（相反的颜色）
  • 计算方式：RGB 的每个值用 255 减去当前值
  • 用途：创建高对比度的配色方案
  • 示例：红色 (255,0,0) ↔ 青色 (0,255,255)
变亮 / 变暗
  • 变亮：增加颜色的亮度，向白色靠近
  • 变暗：降低颜色的亮度，向黑色靠近
  • 原理：通过调整 HSL 的亮度分量
  • 用途：生成配色系列（如按钮悬停效果）

❓ 常见问题

Q: HEX 和 RGB 是否相同？

A: 本质相同，只是表示方式不同。HEX 用十六进制表示，RGB 用十进制表示。转换工具会自动相互转换。

Q: 什么时候用 HSL，什么时候用 RGB？

A: HSL 更直观，便于调整（改亮度就改 L 值）；RGB 是行业标准，大多数工具都支持。

Q: 如何选择补色？

A: 使用"反转颜色"按钮即可获得补色。补色是色轮上相对的颜色，创建最高的对比度。

Q: RGBA 中的透明度怎么理解？

A: 0 是完全透明（看不见），0.5 是半透明，1 是完全不透明。常用于半透明效果。

Q: 能否手动输入颜色代码？

A: 可以在各输入框中直接粘贴或编辑代码，格式会自动转换更新。

🌐 Web开发应用

CSS 中使用
  • HEX：background-color: #FF5733;
  • RGB：color: rgb(255, 87, 51);
  • HSL：border-color: hsl(9, 100%, 60%);
  • RGBA：box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
JavaScript 中使用
  • document.body.style.backgroundColor = "#FF5733";
  • element.style.color = "rgb(255, 87, 51)";
HTML 属性中使用
  • <input type="color" value="#FF5733">
  • <svg><rect fill="#FF5733"></rect></svg>

📚 使用示例

Web 设计

选择主题颜色

获取 HEX 代码

应用到 CSS

对比度检查

选择文字颜色

反转获得背景色

检查可读性

配色方案

选择基础颜色

变亮/变暗生成系列

形成完整调色板

透明效果

选择颜色

获取 RGBA 代码

调整透明度参数

💡 使用建议

  • 记住常用颜色：保存经常使用的颜色代码
  • 对比度考虑：选择颜色时考虑文本可读性
  • 利用配色工具：使用变亮/变暗生成协调的颜色系列
  • HSL 调整更直观：需要微调颜色时用 HSL，改动更明确
  • RGBA 用于叠加效果：透明度对阴影和覆盖层很有用
  • 完全本地处理：所有转换都在浏览器内完成，无需上传