颜色选择器 & 转换器

最后更新:

关于此工具

颜色转换器在 HEX(#FACC15)、RGB、HSL 之间互相转换。HSL 把色相、饱和度、明度分开,生成调色板、悬停态、暗色变体比直接调 RGB 直观得多。

使用方法

  1. Pick a color in the visual color picker, or type a HEX value directly.
  2. The RGB and HSL fields update live so you can read off any representation.
  3. Edit any individual channel (R, G, B, H, S, or L) to nudge the color along that axis.
  4. Copy the format your code needs — for example, hsl(48, 96%, 53%) for a Tailwind config or #FACC15 for CSS.
  5. Iterate by adjusting L for a hover state or S for a muted variant of the same hue.

常见用例

  • Converting a designer-supplied HEX from Figma to the rgba() format for a CSS shadow.
  • Generating hover and active states by adjusting only the lightness channel.
  • Building a Tailwind config palette in HSL so opacity utilities work cleanly.
  • Sampling a brand color and reproducing it in canvas/SVG code that needs RGB.
  • Producing accessibility-friendly variants by tracking lightness contrast.
  • Translating colors between dark mode and light mode by inverting lightness while keeping hue constant.

常见问题

Q. Why does the same HEX look different in two browsers?

A. Color profile handling. sRGB is assumed unless a profile is specified, but some browsers and OS-level color management apply additional gamma. The HEX value itself does not change.

Q. When should I prefer HSL over RGB?

A. When you need to derive related colors. HSL lets you change brightness or saturation independently of hue, which is impossible with RGB without color theory math.

Q. What about HSV / HSB — are those the same as HSL?

A. No. HSV and HSL share hue and saturation but differ on the third axis: HSV uses Value (peak brightness), HSL uses Lightness (midpoint between black and white). Most CSS workflows prefer HSL.

Q. How do I add transparency?

A. Use rgba() or hsla() with an alpha between 0 and 1, or modern CSS color-mix / 8-digit hex (#FACC15CC) where supported.