Color Converter
Convert colors between HEX, RGB, and HSL formats with a live color preview. Perfect for web developers and designers working with CSS, design tools, and accessibility standards.
How to Use This Calculator
- Use the color picker, type a HEX code, or enter RGB/HSL values — all fields update instantly in real time.
- Watch the preview box update to show the current color.
- Click "Copy HEX Value" to copy the color code for use in CSS, design tools, or anywhere you need a color value.
Formula
Converts using the min/max of R, G, B channels to determine hue angle and lightness, then derives saturation from the difference.
Examples
#1877F2 → RGB(24, 119, 242) → HSL(214°, 89%, 52%)
#0d6efd → RGB(13, 110, 253) → HSL(221°, 83%, 53%)
background-color: rgb(59, 130, 246); or hsl(217, 91%, 60%); — Convert to HSL to easily adjust lightness for WCAG contrast requirements.
Frequently Asked Questions
What is HEX color?
HEX notation represents colors as #RRGGBB where RR, GG, BB are hexadecimal values (00–FF) for red, green, and blue channels. Short form #RGB expands each digit (e.g., #F0F → #FF00FF).
What is HSL?
HSL stands for Hue, Saturation, Lightness. Hue is the color angle (0°=red, 120°=green, 240°=blue). Saturation is vividness (100%=full color, 0%=gray). Lightness is brightness (50%=normal, 100%=white, 0%=black).
Why use HSL over HEX?
HSL is more intuitive for designers. Want a darker blue? Decrease lightness. Want a lighter blue? Increase lightness. Want a washed-out blue? Decrease saturation.
What about transparency (alpha)?
This converter handles RGB and HSL without alpha. For transparency, use rgba() or hsla() with an alpha value between 0 and 1.