HEX, RGB & HSL Color Converter
Convert colors between HEX, RGB, and HSL with a live preview.
About HEX ↔ RGB ↔ HSL Converter
Type any color in HEX (#rrggbb or #rgb), RGB (r, g, b), or HSL (h, s%, l%) and instantly see all three formats with a live color preview. Copy any format directly for use in CSS, Tailwind, or Figma.
Use Cases
Converting Figma hex colors to CSS HSL, translating design system colors, matching brand colors across tools, building CSS custom properties, learning color theory.
How It Works
Parses input color string, converts through RGB as an intermediate format, then derives HSL via the standard mathematical formulas for color space conversion.
Frequently Asked Questions
What is the difference between RGB and HSL?
RGB defines color by its red/green/blue channel intensities. HSL defines it by Hue (color wheel angle), Saturation (intensity), and Lightness — more intuitive for humans.
Does it support 8-digit HEX (with alpha)?
Currently solid (opaque) colors only. RGBA and HSLA support coming soon.