颜色格式转换 使用教程
详细使用指南、最佳实践与常见问题解答
使用场景
颜色格式转换器适用于前端开发调色、设计稿还原、CSS 变量编写、品牌色管理、调色板生成等场景。当你拿到一个 HEX 颜色需要转成 RGB 写进 canvas，或从设计稿取色后需要 HSL 来派生明暗变体时，这个工具能快速完成转换。
Use Cases
The color converter is useful for frontend color tuning, design restoration, CSS variable authoring, brand color management, and palette generation. Use it to turn a HEX color into RGB for canvas, or to derive HSL light/dark variants after picking a color from a design.
功能特点
- 四种格式互转：HEX、RGB、HSL、HSV
- 浏览器原生取色器：点击色块即可从屏幕取色
- RGB 滑块：独立调节 R/G/B 通道，带数字输入
- HSL 滑块：独立调节色相/饱和度/亮度，便于派生变体
- 一键复制：点击任一格式卡片即可复制对应值
Features
- Four-format conversion: HEX, RGB, HSL, HSV
- Native color picker: click the swatch to pick from screen
- RGB sliders: independent R/G/B channels with numeric input
- HSL sliders: independent hue/saturation/lightness for variant derivation
- One-click copy: click any format card to copy its value
使用示例
示例 1：场景一：设计师给的品牌色是 #D97706，前端要写 tailwind 配置，粘贴 HEX 后点击 RGB 卡片复制得到 rgb(217, 119, 6)。
示例 2：场景二：需要为主色生成 hover/active 变体，拖动 HSL 的 L 滑块到 60% 得到浅色版本，到 40% 得到深色版本。
示例 3：场景三：从设计稿截图取色后想转成 HSV 用于 PS 调整，点击色块取色，查看 HSV 卡片值。
Examples
Example 1: Scenario 1: Designer hands you #D97706; paste it in HEX, click the RGB card to copy rgb(217, 119, 6) for tailwind config.
Example 2: Scenario 2: Need hover/active variants? Drag the HSL L slider to 60% for a lighter shade, 40% for a darker one.
Example 3: Scenario 3: Picked a color from a design screenshot and need HSV for Photoshop — click the swatch, read the HSV card.
最佳实践
- CSS 优先用 HSL：派生明暗变体只需改 L，派生互补色只需改 H ± 180
- 设计系统用 HEX 作为权威值，RGB/HSL 作为派生值
- 避免 HSV 用于 CSS（浏览器不直接支持），它主要用于图像编辑软件
- 注意取色器受显示器色彩空间影响，对色彩精度要求高的场景应用专业校色
Best Practices
- Prefer HSL in CSS: derive light/dark variants by changing L; complementary colors by ±180 on H
- Use HEX as the source of truth in design systems, RGB/HSL as derived values
- Avoid HSV in CSS (browsers don't support it directly) — it is mainly for image editors
- Note: the picker is affected by display color space; use professional calibration for color-critical work
常见问题
HSL 和 HSV 有什么区别？
HSL 的 L=100% 是纯白；HSV 的 V=100% 是纯色（最饱和）。HSL 更适合 CSS 设计变体，HSV 更贴近图像编辑软件的调色逻辑。
为什么输入 HEX 后 RGB 没更新？
请确认 HEX 格式正确：3 位（#FFF）或 6 位（#FFFFFF），仅含 0-9 与 A-F。本工具会容错解析，无效时保留上一个有效值。
可以取屏幕上任意像素的颜色吗？
可以。点击色块会弹出浏览器原生取色器，部分浏览器支持从屏幕任意位置取色（如 Chrome 桌面端）。
HSL 怎么派生互补色？
互补色在色相环上相差 180°。读取当前 H 值，加或减 180（结果对 360 取模），保持 S/L 不变即可。
FAQ
What is the difference between HSL and HSV?
In HSL, L=100% is pure white; in HSV, V=100% is the pure color (most saturated). HSL suits CSS variant design; HSV mirrors how image editors mix colors.
Why doesn't RGB update after I type HEX?
Ensure HEX is valid: 3 chars (#FFF) or 6 chars (#FFFFFF), digits 0-9 and A-F only. The tool parses tolerantly and keeps the last valid value on invalid input.
Can I pick any pixel on screen?
Yes. Click the swatch to open the native browser picker; some browsers (e.g. desktop Chrome) support picking any pixel on screen.
How do I derive a complementary color from HSL?
Complementary colors are 180° apart on the hue wheel. Take the current H, add or subtract 180 (mod 360), keep S and L unchanged.