RGB to HSL Converter
Convert RGB (Red, Green, Blue) values to HSL (Hue, Saturation, Lightness) format. HSL provides a more intuitive way to understand and manipulate colors, making it easier to create harmonious color schemes and variations.
Why Convert RGB to HSL?
HSL organizes colors in a way that matches human perception:
| HSL Advantage | Description |
|---|---|
| Create variations | Change lightness to get darker/lighter shades |
| Adjust vibrancy | Modify saturation independently |
| Find harmonies | Add degrees to hue for color schemes |
RGB to HSL Examples
| Color | RGB | HSL |
|---|---|---|
| Red | rgb(255, 0, 0) | hsl(0°, 100%, 50%) |
| Light Blue | rgb(173, 216, 230) | hsl(195°, 53%, 79%) |
| Dark Green | rgb(0, 100, 0) | hsl(120°, 100%, 20%) |
| Orange | rgb(255, 165, 0) | hsl(39°, 100%, 50%) |
HSL Color Manipulation
Starting from hsl(220°, 80%, 50%) (bright blue):
| Variation | HSL | Result |
|---|---|---|
| Lighter | hsl(220°, 80%, 70%) | Pastel blue |
| Darker | hsl(220°, 80%, 30%) | Navy |
| Muted | hsl(220°, 40%, 50%) | Grayish blue |
| Vibrant | hsl(220°, 100%, 50%) | Vivid blue |
CSS HSL Usage
``css
:root {
--primary: hsl(220, 80%, 50%);
--primary-light: hsl(220, 80%, 70%);
--primary-dark: hsl(220, 80%, 30%);
}
`
Use this converter to translate RGB colors to the more intuitive HSL format for easier color manipulation.
RGB and HSL
| RGB | HSL | |
|---|---|---|
| Syntax | rgb(255 99 71) in modern CSS, rgb(255, 99, 71) in the legacy comma form | hsl(9 100% 64%), or hsl(9, 100%, 64%) in the legacy form |
| Channels | red, green, blue — 0–255 or 0–100% | hue 0–360°, saturation 0–100%, lightness 0–100% |
| Precision | 8 bits per channel as normally written; CSS accepts fractional values | Continuous, though it round-trips through 8-bit RGB in practice |
| Support | Universal. The space-separated form needs a 2020-or-later browser. | Universal. |
| Best for | Programmatic colour manipulation, canvas work, image pixel data. | Building palettes. Changing lightness alone gives you a tint ramp that stays on-hue. |
A Worked Example
Taking CSS tomato through every format:
| Format | Value |
|---|---|
| HEX | #FF6347 |
| RGB | rgb(255, 99, 71) |
| RGBA | rgba(255, 99, 71, 0.5) |
| HSL | hsl(9, 100%, 64%) |
| HSB | hsb(9, 72%, 100%) |
| CMYK | cmyk(0%, 61%, 72%, 0%) |
Doing It in Code
`javascript
// HEX to RGB
const hexToRgb = (hex) => {
const n = parseInt(hex.replace('#', ''), 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};
// RGB to HEX
const rgbToHex = (r, g, b) =>
'#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');
`
Modern CSS can do a lot of this without any conversion at all: color-mix() blends two
colours, and relative colour syntax — hsl(from var(--brand) h s calc(l + 10%))` — derives
a lighter shade without you ever computing one.