⚡DevTools12
VIEN
← Back to home

Color Converter — HEX, RGB, HSL, HSV + Tailwind Palette

Convert colors between HEX ↔ RGB ↔ HSL ↔ HSV simultaneously + opacity slider → rgba/hsla. Native color picker + 18 Tailwind palette quick-pick. 100% pure math.

4 formatsAlphaTailwind
HEX#22d3ee
RGBrgb(34, 211, 238)
HSLhsl(188, 86%, 53%)
HSVhsv(188, 86%, 93%)
Tailwind palette

Why use this tool

🎨
4 formats in parallel

Change one input → HEX, RGB, HSL, HSV update simultaneously. Easy to compare formats.

🌈
Tailwind palette

18 Tailwind base colors (slate → rose) — click one to load HEX.

💧
Opacity slider

0-100% → rgba/hsla output in realtime. Useful for transparent overlays.

How to use

  1. 1Click the color picker or enter HEX (e.g. #22d3ee).
  2. 2Drag the opacity slider for alpha.
  3. 3Copy the format you want (HEX/RGB/HSL/HSV).

Color spaces

HEX (#RRGGBB): web standard, compact. HEX with alpha #RRGGBBAA (last 2 are opacity).

RGB (red green blue 0-255): screen native. rgba() adds alpha 0-1.

HSL (hue 0-360, saturation 0-100%, lightness 0-100%): perceptual, easier to lighten/darken while preserving hue.

HSV (hue saturation value): similar to HSL, V is the max channel value.

  • ✓HEX ↔ RGB ↔ HSL ↔ HSV bidirectional
  • ✓Native color picker (input[type=color])
  • ✓Opacity slider 0-100
  • ✓18 Tailwind base colors
  • ✓Realtime updates
  • ✓Copy per format

FAQ

HSL vs HSV — what's the difference?

Both use Hue (angle on the color wheel). HSL: L=0 black, L=50% pure color, L=100 white. HSV: V=0 black, V=100 pure color (saturation 100 = pure, saturation 0 = white/gray).

P3 / Display P3 support?

Not yet. Phase 1 is sRGB only. P3 (wider gamut) will come in Phase 2.

Why doesn't HSL output match Figma 100%?

Rounding during RGB ↔ HSL ↔ RGB conversion. ±1 error in S/L. Negligible visually.