Skip to content

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

  1. Input Recognition Paste any valid CSS color: #RRGGBB, rgb(r g b), hsl(h s l), or their alpha variants.

  2. Live Conversion The tool immediately converts between RGB and HSL color spaces using standard algorithms.

  3. Interactive Sliders

  4. Interactive Sliders Adjust hue (0-360°), saturation (0-100%), and lightness (0-100%) via synced sliders.

  5. Harmony Generation Automatically creates complementary, triadic, tetradic, analogous, and split-complementary palettes.

  6. Accessibility Check Calculates WCAG contrast ratios against white and black for accessibility verification.

  7. CSS Output One-click copy of the color in hsl() or hsla() format ready for CSS.

Examples

Convert RGB to HSL

Convert the RGB color (59, 130, 246) to its HSL equivalent.

rgb(59, 130, 246)
hsl(217 91% 60%)

Convert HSL to RGB

Convert the HSL color (120 100% 50%) to its RGB equivalent.

hsl(120 100% 50%)
rgb(0, 255, 0)

Parse CSS Color

Parse a CSS color string including alpha channel.

hsla(217 91% 60% / 0.5)
rgba(59, 130, 246, 0.5)

Frequently asked questions

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?

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?

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?

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?

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?

No. All calculations happen locally in your browser. Colors, histories, and conversions never leave your device.

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?

Absolutely. A Copy button next to each CSS-ready string instantly copies hsl() or hsla() code to your clipboard.

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.

Color

CMYK to RGB

Convert CMYK print colors to RGB values instantly with live preview, hex output, and copy-ready results.
Color

Color Blindness Simulator

Preview how images and designs appear to people with protanopia, deuteranopia, tritanopia, and other color vision deficiencies
Color

Color Escape Code Generator

Generate ANSI terminal color escape codes for styles, foregrounds, and backgrounds across bash, python, javascript, and more.