Color Converter
One color in, every format out. With a swatch so you can actually see it.
#ff6600 (#f60)rgb(255, 102, 0)hsl(24, 100%, 50%)What this does
Type a color in any format and see it converted to HEX, RGB, and HSL with a live swatch preview. Understands hex codes with or without the #, rgb() and hsl() function notation, shorthand hex like #f60, and bare hex strings like ff6600.
Common use cases
Grabbing a color from a design file in one format and needing it in another. Figma gives you hex. Your CSS wants hsl() because you're adjusting lightness in a theme. A data visualization library wants RGB values as separate integers. One paste, all three.
Debugging why two "same" colors look different. Paste both hex values, compare the HSL. Usually it's a lightness or saturation mismatch that's invisible in hex but obvious when you see hsl(210, 80%, 45%) next to hsl(210, 80%, 52%).
Converting between notations when a tool or config file insists on a specific format. Tailwind config wants hex. CSS custom properties might use HSL for easier theming. Your API might return RGB integers. This tool is the Rosetta Stone for color.
Things to know
Shorthand hex gets shown when available. #ff6600 displays with #f60 noted in parentheses. The copy button grabs the full six-character version.
RGB values get clamped to 0-255. HSL hue wraps at 360 degrees, saturation and lightness stay between 0% and 100%. Type something out of range and we'll bring it back in bounds quietly.
The swatch renders using your browser's actual color engine. What you see is what your users will see. No approximation, no simulated color space.
HSL-to-RGB conversion rounds to the nearest integer, which means converting a color to HSL and back might shift an RGB channel by 1. That's inherent to the math, not a bug. For pixel-perfect work, stick with hex or RGB as your source of truth.
Privacy
Pure math in your browser. Your brand colors, your client's secret palette, your questionable neon green experiments. All stay on your machine.