Color Converter (HEX to RGB & HSL)
Convert color codes between HEX, RGB, and HSL formats with live interactive color preview.
RGB Color Equivalent
—
—
How to Convert Color Codes (HEX, RGB, HSL)
- Enter or pick any color code in HEX (#3B82F6), RGB rgb(59, 130, 246), or HSL format.
- View synchronized color conversions across CSS formats with one-click copy buttons.
Color Model Conversion Mathematics
-
HEX to RGB: Parses 2-digit hex pairs to 0-255 decimal values:
R = parseInt(hex[0..1], 16). - RGB to HSL: Computes hue angle (0-360°), saturation percentage, and perceived lightness.
Example
-
HEX:
#2563EB= RGB:rgb(37, 99, 235)= HSL:hsl(221, 83%, 53%).
Common Applications
- Web development CSS stylesheet color token definitions.
- Design handoff between Figma and frontend code.
- Creating programmatic color palette shades.
Frequently Asked Questions
What is the benefit of HSL over RGB?
HSL (Hue, Saturation, Lightness) is far more intuitive for humans when adjusting tint, shade, and contrast without altering underlying color hue.
Does this tool support 8-digit HEX with alpha channel?
Yes, hex opacity codes (#RRGGBBAA) are supported.