Color Picker & Converter

Last updated:

About this tool

A color converter translates between the color models you actually use in code: HEX (#FACC15) for CSS, RGB for canvas and image processing, and HSL for design systems and theming. HSL exposes hue, saturation, and lightness as separate axes, which makes it dramatically easier to derive consistent palettes, hover states, and dark-mode variants than tweaking RGB by hand.

How to use

  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.

Common use cases

  • 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.

Frequently asked questions

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.