HSL to RGB Converter Free Online Tool 2026

Last updated March 22, 2026

Converting Basic HSL Colors to RGB

The HSL to RGB Converter makes it easy to translate intuitive HSL color values into the RGB format required by many design tools and CSS properties. Here are common conversions:

/* Pure red */
HSL: hsl(0, 100%, 50%)
RGB: rgb(255, 0, 0)
Hex: #FF0000

/* Pure green */
HSL: hsl(120, 100%, 50%)
RGB: rgb(0, 255, 0)
Hex: #00FF00

/* Pure blue */
HSL: hsl(240, 100%, 50%)
RGB: rgb(0, 0, 255)
Hex: #0000FF

/* White */
HSL: hsl(0, 0%, 100%)
RGB: rgb(255, 255, 255)
Hex: #FFFFFF

/* Black */
HSL: hsl(0, 0%, 0%)
RGB: rgb(0, 0, 0)
Hex: #000000

/* Medium gray */
HSL: hsl(0, 0%, 50%)
RGB: rgb(128, 128, 128)
Hex: #808080

Creating Color Variations with HSL

One of the biggest advantages of HSL is how easy it is to create color variations. Adjusting a single property changes the shade without affecting the hue identity:

/* Base brand color: blue */
HSL: hsl(210, 80%, 50%)
RGB: rgb(26, 115, 230)

/* Lighter variant (increase lightness) */
HSL: hsl(210, 80%, 70%)
RGB: rgb(92, 163, 240)

/* Darker variant (decrease lightness) */
HSL: hsl(210, 80%, 30%)
RGB: rgb(15, 69, 138)

/* Muted/desaturated variant */
HSL: hsl(210, 30%, 50%)
RGB: rgb(89, 121, 153)

/* Fully desaturated (gray) */
HSL: hsl(210, 0%, 50%)
RGB: rgb(128, 128, 128)

Working with HSLA and RGBA Transparency

Both HSL and RGB support alpha transparency. The converter handles HSLA to RGBA conversions accurately:

/* 50% transparent green overlay */
HSLA: hsla(120, 100%, 50%, 0.5)
RGBA: rgba(0, 255, 0, 0.5)

/* Subtle dark overlay for modals */
HSLA: hsla(0, 0%, 0%, 0.6)
RGBA: rgba(0, 0, 0, 0.6)

/* Light tinted background */
HSLA: hsla(200, 70%, 60%, 0.15)
RGBA: rgba(61, 174, 219, 0.15)

/* Semi-transparent button hover */
HSLA: hsla(260, 60%, 55%, 0.8)
RGBA: rgba(112, 74, 196, 0.8)

Use HSLA when you need transparency in overlays, shadows, or background tints. The alpha channel accepts values from 0 (fully transparent) to 1 (fully opaque).

Generating Complementary Color Schemes

HSL makes color theory practical. A complementary color is exactly 180 degrees away on the color wheel:

/* Original color: orange */
HSL: hsl(30, 90%, 55%)
RGB: rgb(240, 130, 18)

/* Complementary (add 180 to hue) */
HSL: hsl(210, 90%, 55%)
RGB: rgb(18, 128, 240)

/* Analogous colors (±30 degrees) */
HSL: hsl(0, 90%, 55%)   → RGB: rgb(240, 18, 18)
HSL: hsl(60, 90%, 55%)  → RGB: rgb(240, 222, 18)

/* Triadic colors (±120 degrees) */
HSL: hsl(150, 90%, 55%) → RGB: rgb(18, 240, 112)
HSL: hsl(270, 90%, 55%) → RGB: rgb(112, 18, 240)

CSS Usage: HSL vs RGB

Both formats are valid in CSS. HSL is often more readable and maintainable in stylesheets:

/* Using RGB */
.button {
  background-color: rgb(26, 115, 230);
  border-color: rgb(15, 69, 138);
  color: rgb(255, 255, 255);
}

/* Same colors using HSL — intent is clearer */
.button {
  background-color: hsl(210, 80%, 50%);
  border-color: hsl(210, 80%, 30%);   /* just darker */
  color: hsl(0, 0%, 100%);            /* white */
}

/* CSS custom properties with HSL */
:root {
  --brand-hue: 210;
  --brand-saturation: 80%;
  --brand-lightness: 50%;
  --brand-color: hsl(var(--brand-hue), var(--brand-saturation), var(--brand-lightness));
  --brand-dark: hsl(var(--brand-hue), var(--brand-saturation), 30%);
  --brand-light: hsl(var(--brand-hue), var(--brand-saturation), 70%);
}

Common Web Design Colors Converted

Here are popular design colors shown in both HSL and RGB formats:

/* Material Design Blue 500 */
HSL: hsl(207, 90%, 54%)
RGB: rgb(33, 150, 243)

/* Tailwind Green 500 */
HSL: hsl(142, 71%, 45%)
RGB: rgb(34, 197, 94)

/* Warm coral */
HSL: hsl(16, 100%, 66%)
RGB: rgb(255, 111, 67)

/* Soft purple */
HSL: hsl(262, 52%, 47%)
RGB: rgb(115, 58, 181)

/* Muted teal */
HSL: hsl(174, 42%, 45%)
RGB: rgb(67, 163, 155)

Checking Color Accessibility

After converting colors, verify contrast ratios for WCAG compliance. Light and dark variants of the same hue are easy to generate in HSL:

/* Text on background — check contrast */
Background: hsl(210, 80%, 95%) → RGB: rgb(224, 236, 252)
Text:       hsl(210, 80%, 15%) → RGB: rgb(8, 38, 77)
/* High contrast — passes WCAG AA and AAA */

/* Insufficient contrast example */
Background: hsl(210, 80%, 70%) → RGB: rgb(92, 163, 240)
Text:       hsl(210, 80%, 50%) → RGB: rgb(26, 115, 230)
/* Too similar in lightness — fails WCAG */

A general rule: ensure at least a 4.5:1 contrast ratio for normal text and 3:1 for large text. Adjusting the lightness value in HSL is the fastest way to fix contrast issues.