Color Converter

Color preview

#3b82f6

Color Converter - HEX, RGB, HSL

Free color converter with live swatch preview. Convert HEX, RGB, and HSL instantly.

Enter HEX, RGB, or HSL — other formats and the preview update live.

HEX is compact for stylesheets, RGB is intuitive for image processing, and HSL makes hue/saturation/lightness adjustments easier. A converter eliminates manual math and copy-paste errors.

WaiHub's Color Converter syncs all three formats instantly as you type and shows a real-time preview — all processing happens locally in your browser.

  • HEX ↔ RGB ↔ HSL conversion
  • Live color preview swatch
  • Edit any format, others sync
  • One-click copy per format
  • Supports shorthand HEX
  • Privacy-first browser processing

Features

  • HEX to RGB conversion
  • RGB to HSL conversion
  • HSL to HEX conversion
  • Live preview swatch
  • Bidirectional sync on edit
  • Copy HEX, RGB, or HSL
  • Shorthand HEX support (#f00)
  • Invalid format feedback
  • Monospace color values
  • Runs locally in browser

How To Use

  1. Enter a color

    Type a value in HEX, RGB, or HSL — any format works as the starting point.

  2. Review synced values

    The other two formats update automatically to match.

  3. Check the preview

    The preview swatch shows the current color at a glance.

  4. Copy the format you need

    Click copy next to HEX, RGB, or HSL to grab the value for your CSS.

Examples

Blue

HEX

#3b82f6

RGB / HSL

rgb(59, 130, 246) / hsl(217, 91%, 60%)

Red shorthand

HEX

#f00

RGB / HSL

rgb(255, 0, 0) / hsl(0, 100%, 50%)

FAQ

Is this color converter free?
Yes. Completely free with no signup.
Short HEX like #f00?
Yes — shorthand HEX is expanded automatically.
Alpha channel?
Opaque colors only in this version (no alpha).
Is my data uploaded?
No. Conversion runs entirely in your browser.
Can I use it commercially?
Yes. Free for personal and commercial use.

Related Tools