🎨 Color Converter
Translate any color between HEX, RGB, and HSL and preview it live — paste one format, get the other two, and see the exact swatch, all in your browser.
🌈 HEX · RGB · HSL
What is a Color Converter?
A color converter turns one color notation into the others so you can move a value between CSS, design tools, and code without hand-math. HEX and RGB describe the same red-green-blue mix; HSL reframes it as hue, saturation, and lightness for more intuitive adjustments.
Reach for it when a design spec gives you a HEX and your code wants RGB, or when you want to nudge a color lighter or more vivid using HSL and then export it back to HEX.
❓ Frequently Asked Questions
What color formats does this support?
It converts between the three formats used most in web and UI work: HEX (#rrggbb, including the 3-digit shorthand like #f00), RGB (rgb(r, g, b) with channels 0–255), and HSL (hsl(hue, saturation%, lightness%)). Enter a color in any of them and you get the other two plus a live preview swatch.
What is the difference between RGB and HSL?
RGB describes a color by how much red, green, and blue light it mixes, which matches how screens emit light. HSL describes the same color by hue (its position on the color wheel), saturation (how vivid it is), and lightness (how bright). HSL is often easier for humans to reason about when tweaking a palette.
Does the 3-digit hex shorthand work?
Yes. A 3-digit hex like #f80 is expanded by doubling each digit, so it becomes #ff8800 before conversion. This is the same rule browsers use, so the shorthand you see in CSS produces identical results here.
Is my color data kept private?
Yes. Every conversion runs locally in your browser with no network calls, so the colors you test are never uploaded or logged. You can experiment with brand palettes or unreleased designs without anything leaving your machine.