One color, three notations
CSS accepts the same color as #ff6347, rgb(255, 99, 71) or hsl(9, 100%, 64%), and real projects end up using all three: hex from design tools and brand guides, rgb() from JavaScript and image pipelines, hsl() when you want to tweak lightness or hue by hand. This converter auto-detects whichever format you paste — including 3-digit hex shorthand — and returns all three as CSS-ready strings, with a live swatch so you can confirm it is the color you meant.
Conversion is exact: hex and rgb() are the same 0–255 integers in different bases, and HSL is derived from them with the standard formulas. Everything runs locally in your browser.
How to convert a color
- Paste a color in any supported format into the input.
- Check the preview swatch matches what you expect.
- Copy the hex, RGB or HSL string straight into your stylesheet.
From conversion to a working palette
Converting a color is usually step one of a bigger job. Each valid color links to its own page in our colors section — a full breakdown with CMYK values, tints and shades, harmony palettes and WCAG contrast ratios against black and white. When you need a coordinated set rather than a single value, the Color Palette Generator builds shades and complementary schemes from any base color, and the CSS Gradient Generator turns two of them into a ready-made background.
Frequently asked questions
How does a hex code map to RGB values?
A 6-digit hex code is three pairs of hexadecimal digits — red, green, blue — each pair running 00 to ff, which is 0 to 255 in decimal. So #ff6347 means red 255 (ff), green 99 (63) and blue 71 (47). Converting is just base-16 to base-10 arithmetic per channel; the color itself is identical either way.
What is HSL good for?
HSL describes a color the way people reason about it: hue (the angle on the color wheel, 0–360°), saturation (how vivid) and lightness (how bright). That makes systematic adjustments easy — lighten a button hover by raising L, build a tint scale by stepping lightness, or find a complement by rotating hue 180°. RGB is what screens mix; HSL is what designers think in.
What is the difference between 3-digit and 6-digit hex?
A 3-digit hex like #f63 is shorthand where each digit is doubled: #f63 expands to #ff6633. It only exists for colors whose channel pairs happen to be doubles, so it covers 4,096 of the 16.7 million possible colors. This tool accepts both and always outputs the unambiguous 6-digit form.
Do hex, rgb() and hsl() affect rendering or performance?
No. They are three notations for the same sRGB color, and the browser parses them all into the same internal value — there is no rendering or speed difference. Choose by ergonomics: hex is compact and universal, rgb() is handy when values come from code, and hsl() is easiest to adjust by hand.