Color Converter
Convert colors between hex, RGB, HSL, and CSS named colors. Live preview swatch.
| Hex | #ff6347 |
| RGB | rgb(255, 99, 71) |
| HSL | hsl(9, 100%, 64%) |
| Name | tomato |
About Color Converter
Type a color in any common format — hex (#ff5733), RGB (rgb(255, 87, 51)), HSL (hsl(11, 100%, 60%)), or a CSS named color (tomato) — and see it converted to every other format with a live preview swatch. Useful when designing, debugging, or translating between CSS and design tools.
When to use it
- Converting design-tool color values to CSS
- Inspecting what color a hex value represents
- Finding the HSL equivalent of an RGB color (good for tweaking lightness)
- Looking up a CSS named color's hex value
How it works
The input is parsed against a series of color formats. Hex, RGB, and HSL are recognized via regex; CSS named colors are matched against the full HTML4/CSS3 named-color list. The parsed RGB value is then converted to every other format and displayed.
Examples
tomato
Hex: #ff6347 RGB: rgb(255, 99, 71) HSL: hsl(9, 100%, 64%) Name: tomato
Frequently asked questions
- Which formats are recognized?
- Hex (#fff or #ffffff or #ffffffff for 8-digit with alpha), RGB/RGBA (rgb(r,g,b) or rgba(r,g,b,a)), HSL/HSLA, and the CSS named-color set (~150 names).
- Is alpha supported?
- Yes for 8-digit hex (#rrggbbaa), rgba(), and hsla(). The output also shows alpha when it's not 100%.