HSL to RGB Converter

Convert HSL colors to RGB, HEX, and CMYK. Fine-tune with HSL sliders. Live color preview.

HSL Values

HSL
hsl(0, 65%, 51%)
RGB
rgb(211, 51, 51)
HEX
#D33333
CMYK
cmyk(0%, 76%, 76%, 17%)

About HSL to RGB Converter

Convert HSL (Hue, Saturation, Lightness) color values to RGB, HEX, and CMYK. Adjust hue, saturation, and lightness with intuitive sliders and see the result in every major color space.

HSL Input

Hue from 0-360, saturation and lightness from 0-100%. Use sliders or type exact values. Instant conversion to all formats.

Live Color Preview

A real-time color swatch shows exactly how the HSL values look. Adjust and see changes immediately.

Four Output Formats

See HSL, RGB, HEX, and CMYK side by side. Perfect for web design, print prepress, and development workflows.

Click to Copy

Click any color value to copy it to your clipboard. RGB for CSS, HEX for HTML, CMYK for print, HSL for fine-tuning.

How It Works

  1. Adjust the Hue slider — Set the base color angle from 0 (red) through 360 (back to red).
  2. Set Saturation — Control color intensity from 0% (gray) to 100% (full color).
  3. Set Lightness — Adjust brightness from 0% (black) to 100% (white).
  4. Watch the preview — The color swatch updates in real time as you adjust any slider.
  5. Read the results — All four color space values update instantly. Click any value to copy it.

📋 Common Use Cases

Cross-Media Design

Convert print colors (CMYK) to screen colors (RGB/Hex) when adapting brand assets from physical to digital media.

CSS & Web Development

Transform colors between hex, RGB, and HSL formats for use in stylesheets, design tokens, and component libraries.

Brand Consistency

Ensure color accuracy when translating brand palettes between different design tools that require specific color formats.

Accessibility Testing

Convert colors to analyzable formats for contrast checking and WCAG compliance verification.

🪜 How to Use This Tool

  1. Enter your source color
    Input the color value in the source format — hex code, RGB values, CMYK percentages, or HSL parameters.
  2. Select the target format
    Choose your desired output format. Most converters show a live color preview swatch alongside the converted values.
  3. View and copy the converted color
    The converted color appears instantly. Copy individual values or the complete output string for your project.
  4. Use in your project
    Paste the converted color directly into your CSS, design tool, or print specification. Verify the preview matches your expectations.

📚 Related Guides

Frequently Asked Questions

Are these converters free?▼
Yes. All converters are completely free. No signup needed.
How accurate is the unit converter?▼
It uses standard conversion factors for length, mass, temperature, area, volume, and speed. Results are precise to 6 decimal places.