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.