HSL Color Converter
Convert HSL to HEX, RGB, RGBA, HSV, and CMYK instantly (e.g., hsl(217, 91%, 60%) → #3B82F6). Free online HSL color converter.
Color Preview
Outputs update automatically as you type.
Converted values
#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1)hsl(217, 91%, 60%)hsv(217, 76%, 96%)cmyk(76%, 47%, 0%, 4%)Table of Contents
What is a color converter?
A color converter transforms a color value from one format into others. In web and design work, it’s common to switch between HEX, RGB, RGBA, HSL, HSV, and CMYK depending on your tools and workflow.
Need to convert from a different starting format? Try the full Color Converter, which lets you paste a color in any supported format and get all outputs instantly.
How it works
- Enter a color in the HSL format for this page.
- Get multiple outputs (HEX, RGB, RGBA, HSL, HSV, CMYK) instantly.
- Copy any format with one click.
Color Formats Explained
HEX (Hexadecimal)
HEX is a hexadecimal code representing red, green, and blue values. Each pair of characters
represents one channel (00–FF in hex, which is 0–255 in decimal). HEX is usually prefixed with
a hash symbol #.
Example: #3B82F6
RGB (Red, Green, Blue)
RGB represents colors using three values (0–255) for red, green, and blue. It’s commonly used in CSS and programming APIs.
Example: rgb(59, 130, 246)
RGBA (Red, Green, Blue, Alpha)
RGBA is RGB with an alpha (opacity) value from 0 to 1. Alpha controls transparency: 1 is fully opaque and 0 is fully transparent.
Example: rgba(59, 130, 246, 0.5)
HSL (Hue, Saturation, Lightness)
HSL represents colors using hue (0–360°), saturation (0–100%), and lightness (0–100%). It’s great for creating systematic color variations.
Example: hsl(217, 91%, 60%)
HSV (Hue, Saturation, Value)
HSV represents colors using hue (0–360°), saturation (0–100%), and value (0–100%). HSV is commonly used in color pickers.
Example: hsv(217, 77%, 96%)
CMYK (Cyan, Magenta, Yellow, Key/Black)
CMYK is a subtractive color model used in printing. Values are typically expressed as percentages (0–100%).
Example: cmyk(76%, 47%, 0%, 4%)
When to use each format
All of these formats can represent the same color — the “best” one depends on what you’re doing (CSS, design handoff, JavaScript code, printing, or working in a color picker).
HEX - Best for CSS, HTML, and design handoffs. Compact and widely supported.
RGB/RGBA - Best for JavaScript, Canvas API, and when you need transparency control. Use RGBA when you want overlays or semi-transparent UI (alpha from 0 to 1).
HSL - Best for creating color variations (lighter/darker shades) programmatically. It’s often the most intuitive when you’re building theme systems.
CMYK - Best for print design. Note: screen colors won't match print exactly. Always request/verify proofs when color accuracy matters.
HSV - Best for color picker interfaces and image processing. Many tools expose HSV because it’s convenient for interactive selection.
Tip: if you’re writing CSS, stick to #hex, rgb(), rgba(), or hsl(). HSV and CMYK are great for tooling and
workflows, but they aren’t native CSS color formats.
Frequently Asked Questions
Yes. RGBA is supported, where alpha is a value from 0 to 1 (e.g., rgba(59, 130, 246, 0.5)). If you convert to a
format that doesn’t include alpha (like HEX, RGB, HSL, HSV, or CMYK), transparency isn’t
represented and the result will be treated as opaque.
Some conversions require rounding. The converted values are mathematically equivalent for most practical use cases.
No. Everything runs locally in your browser.