Convert between HEX / RGB / HSL with visual preview
Web colors are typically expressed in three formats: HEX (#RRGGBB) for CSS, RGB (rgb(r, g, b)) for direct math, and HSL (hsl(h, s%, l%)) for human-friendly tweaks like 'a bit lighter' or 'a bit more saturated'. They all describe the same color but optimize for different workflows.
This converter takes a color in any of the three formats and shows the other two at the same time, plus a visual swatch so you can see what you're typing. Useful when copying a HEX from a design file and needing the HSL to nudge a hue, or vice versa.
HEX: #FF5733RGB: rgb(255, 87, 51)
HSL: hsl(11, 100%, 60%)HSL: hsl(180, 100%, 50%)HEX: #00FFFF
RGB: rgb(0, 255, 255)Not currently — the converter handles opaque colors only. For RGBA / HSLA / 8-digit HEX (#RRGGBBAA) keep the alpha channel separate; the rendered swatch shows the underlying RGB color.
Standard sRGB, the same space CSS uses by default. We don't handle wide-gamut color spaces like Display-P3 or oklch — they need a different math and aren't yet universally supported in browsers.
HSL's L (lightness) goes from 0 (black) through pure color at 50% to 100 (white). HSV's V (value) goes from 0 (black) to pure color at 100. CSS uses HSL; many design tools (Photoshop, Figma's color picker) use HSV. They're related but not identical.
Not as input — type the HEX equivalent (#FF6347 for tomato). All 147 CSS named colors map to specific HEX values; you can look up the table in any CSS reference.
Close, but never perfectly. Browsers and design tools color-manage slightly differently, and your monitor's calibration matters more than the color value. For brand colors that need to be exact across mediums, work in a color-managed tool and export to HEX as the final step.