SummaryLog

Color Converter

Convert between HEX, RGB, and HSL color formats with live preview.

Color
Complementary
#c47d09
Formatted Values
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

This Color Converter turns a single color into all three common CSS formats at once: HEX, RGB, and HSL. Type a value into any field, or drag the visual picker, and the other formats recalculate instantly so you never have to do the math by hand.

It is handy when a design tool gives you HEX but your stylesheet uses HSL, when you want to fine-tune lightness without leaving the browser, or when you need a quick complementary color. Everything runs locally in your browser, so nothing is uploaded.

How to use

  1. Pick a color with the native color picker, or paste a 6-digit HEX code like #3b82f6 into the HEX field.
  2. Adjust the R, G, B numbers (0-255) or the H, S, L numbers (hue 0-360, saturation and lightness 0-100) to refine the shade.
  3. Watch the swatch and all three formatted values update live as you edit any single field.
  4. Use the Copy button next to HEX, RGB, or HSL to copy that exact CSS string to your clipboard.
  5. Check the Complementary swatch for the inverted color and copy its HEX if you need an accent.

FAQ

Which color formats does it support?
HEX (6-digit, like #ff8800), RGB (0-255 per channel), and HSL (hue 0-360 degrees, saturation and lightness 0-100 percent). Editing any one updates the other two automatically.
Are the RGB and HSL values clamped to valid ranges?
Yes. RGB channels are rounded and clamped to 0-255, hue to 0-360, and saturation and lightness to 0-100, so you cannot enter an out-of-range value.
How is the complementary color calculated?
It inverts each RGB channel (255 minus the value), which gives the opposite color on the wheel. It is a quick starting point for accents, not a full palette generator.
Does it support alpha or 3-digit shorthand HEX?
No. The HEX field expects a full 6-digit code without an alpha channel. Convert shorthand like #f80 to #ff8800 first, and handle transparency separately in your CSS.
Is my color data sent anywhere?
No. All conversion happens in your browser with JavaScript. Nothing is uploaded to a server, so the tool works offline once the page has loaded.