Color Converter
Convert any colour between HEX, RGB and HSL formats.
About the Color Converter
The same colour wears three outfits in web work: HEX (#4f46e5) in design tools and brand guides, RGB (rgb(79, 70, 229)) in JavaScript and image editors, HSL (hsl(243, 75%, 59%)) in modern CSS where its human-readable hue/saturation/lightness makes palette adjustments sane. Handoffs constantly require translating between them — the designer sends HEX, the CSS uses HSL, the canvas API wants RGB numbers. Paste a colour in any of the three formats and this converter returns all three, exactly equivalent.
It accepts the common variants people actually paste: 3-digit shorthand hex (#abc expands to #aabbcc), hex with or without the #, and rgb()/hsl() with or without an alpha slot. Unparseable input gets a clear error showing the accepted formats rather than a silently wrong colour.
A word for HSL, the underused one: because it separates what the colour is (hue, 0–360°) from how vivid (saturation) and how bright (lightness) it is, palette work becomes arithmetic. A hover state is the same HSL with lightness dropped 10 points; a muted background is the brand hue with saturation cut to 20% and lightness raised to 95%; a complementary accent is hue + 180. Try converting your brand colour here and reading its HSL — many developers find they finally understand their own palette. Everything runs locally in your browser.
Frequently asked questions
- Which format should I use in CSS?
- All three work everywhere. HEX is compact and conventional; HSL is easiest to modify programmatically (lightness for hover states, saturation for muted variants). Pick one per project and stay consistent.
- What about alpha (transparency)?
- This converter works with the opaque colour. For transparency, append the alpha in your CSS — rgba(79, 70, 229, 0.5), hsl with / 50%, or 8-digit hex — the underlying colour conversion is the same.
- Why does my HSL round-trip to a slightly different HEX?
- HSL values are conventionally rounded to whole degrees and percentages, which can shift the RGB result by a point or two — imperceptible in practice.
Related tools
Build linear and radial CSS gradients and copy the code.
Image Color PickerClick anywhere on an image to get its exact hex and RGB colour.
Favicon GeneratorGenerate a full set of favicon PNGs plus the HTML to reference them.
Meta Tag GeneratorGenerate a complete HTML head block — title, description, Open Graph and Twitter tags.