Color Converter (HEX, RGB, HSL)
Convert colors between HEX, RGB, and HSL formats online. Instantly transform color codes with a live preview swatch and copy each format.
HEX: #3b82f6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
HEX#3b82f6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HEX (no #)3B82F6
RGB CSS59, 130, 246
What does this tool do?
The Color Converter converts colors between HEX, RGB, and HSL formats. Enter a color in any format and instantly see all three representations with a live color preview swatch.
How to use this tool
- Select the input mode: HEX, RGB, or HSL
- Enter the color value
- Click Convert to see all formats
- Copy any format using the individual Copy buttons
Supported formats
| Format | Example | Description |
|---|---|---|
| HEX | #3b82f6 | 6-digit hexadecimal, also accepts 3-digit shorthand |
| RGB | rgb(59, 130, 246) | Red/Green/Blue, each 0–255 |
| HSL | hsl(217, 91%, 60%) | Hue (0–360°), Saturation (0–100%), Lightness (0–100%) |
Common use cases
- Converting design colors between CSS formats
- Finding the HSL equivalent of a hex code for CSS animations
- Translating colors from design tools (Figma, Sketch) to CSS
- Computing RGB values for use in canvas or WebGL
- Converting between color spaces for accessibility contrast checks
- Generating CSS custom properties in all formats
Tips
- HEX shorthand
#fffis automatically expanded to#ffffff - Output includes both
rgb()and the bareR, G, Bvalues for Tailwind CSS usage - The live color swatch updates with each conversion
Privacy
All processing happens in your browser. Nothing is transmitted.