RGB to HSL Converter
Convert RGB colors to HSL and vice-versa with real-time preview, harmonies, and accessibility checks.
Updated
What is the RGB to HSL Converter?
Convert RGB colors to HSL and vice-versa with an intuitive, real-time interface. Instantly preview colors, generate harmonies, check contrast ratios, and copy CSS-ready values. Supports hex, rgb(), hsl(), and rgba/hsla formats with alpha transparency.
How it works
Input Recognition Paste any valid CSS color:
#RRGGBB,rgb(r g b),hsl(h s l), or their alpha variants.Live Conversion The tool immediately converts between RGB and HSL color spaces using standard algorithms.
Interactive Sliders
Interactive Sliders Adjust hue (0-360°), saturation (0-100%), and lightness (0-100%) via synced sliders.
Harmony Generation Automatically creates complementary, triadic, tetradic, analogous, and split-complementary palettes.
Accessibility Check Calculates WCAG contrast ratios against white and black for accessibility verification.
CSS Output One-click copy of the color in
hsl()orhsla()format ready for CSS.
Examples
Convert RGB to HSL
Convert the RGB color (59, 130, 246) to its HSL equivalent.
Convert HSL to RGB
Convert the HSL color (120 100% 50%) to its RGB equivalent.
Parse CSS Color
Parse a CSS color string including alpha channel.
Frequently asked questions
What formats does the converter accept?
What formats does the converter accept?
You can input CSS colors in hex, rgb(), rgba(), hsl(), or hsla() notation. Examples: #3b82f6, rgb(59 130 246), hsl(217 91% 60%), hsla(217 91% 60% / 0.5).
Does it support transparency/alpha?
Does it support transparency/alpha?
Yes. Both RGBA and HSLA values are fully supported. Alpha values (0–1) are preserved during conversion and displayed in the CSS output.
How are color harmonies calculated?
How are color harmonies calculated?
The tool uses standard color theory rules:
- Complementary = hue + 180°
- Triadic = hue + 120° and +240°
- Tetradic = four colors spaced 90° apart
- Analogous = hue ±30°
- Split-complementary = hue +150° and +210°.
What is the WCAG contrast ratio?
What is the WCAG contrast ratio?
It measures how readable text is against a background color. Values ≥ 4.5:1 meet WCAG AA; ≥ 7:1 meets WCAG AAA. The tool shows contrast against pure white and pure black.
Can I adjust colors with sliders?
Can I adjust colors with sliders?
Yes. Drag the hue, saturation, and lightness sliders to tweak the color in real-time; the input field updates automatically.
Is my data stored or sent anywhere?
Is my data stored or sent anywhere?
No. All calculations happen locally in your browser. Colors, histories, and conversions never leave your device.
How accurate are the conversions?
How accurate are the conversions?
Results match the W3C CSS Color Module Level 4 specification; expect pixel-perfect parity with browsers and design tools.
Can I copy the CSS directly?
Can I copy the CSS directly?
Absolutely. A Copy button next to each CSS-ready string instantly copies hsl() or hsla() code to your clipboard.
Does it work on mobile?
Does it work on mobile?
Yes. The interface is responsive with touch-friendly sliders and large tap targets on phones and tablets.
Related tools
More utilities you might find handy.
CMYK to RGB
Convert CMYK print colors to RGB values instantly with live preview, hex output, and copy-ready results.
Color Blindness Simulator
Preview how images and designs appear to people with protanopia, deuteranopia, tritanopia, and other color vision deficiencies
Color Escape Code Generator
Generate ANSI terminal color escape codes for styles, foregrounds, and backgrounds across bash, python, javascript, and more.