Rgb To Hsl

To convert colors from RGB to HSL; Enter RGB values in the converter or select the desired color from the Color Picker.

H
S
L
HSL
Last Update:


Rgb To Hsl

Convert between RGB and HSL

The RGB color model is an additive model where combining red, green and blue light creates all the colors we see on computer displays. The values for RGB range from 0 to 255, creating over 16 million possible colors.

The HSL model describes colors using hue, saturation and lightness. This is based on how humans perceive color. Hue represents the color family, saturation is the vibrancy, and lightness is the brightness.

- Hue ranges from 0° to 360°, representing positions on the color wheel.

- Saturation is a percentage from 0% (grayscale) to 100% (fully saturated)

- Lightness is a percentage from 0% (black) to 100% (white)

The steps to convert RGB to HSL:

1. Normalize RGB values to 0-1 by dividing each by 255.

2. Find the minimum and maximum RGB values.

3. Calculate lightness as (max + min) / 2.

4. If max = min, saturation is 0 and hue is undefined.

5. Otherwise, calculate saturation:

   - saturation = (max - min) / (1 - abs(max + min - 1))

6. Calculate hue:

   - If Red is max, hue = (Green - Blue) / (max - min)

   - If Green is max, hue = 2 + (Blue - Red) / (max - min)

   - If Blue is max, hue = 4 + (Red - Green) / (max - min)

7. Convert hue to degrees between 0°-360°.

8. Convert saturation and lightness to percentages.

 

To convert back from HSL to RGB:

1. If saturation is 0, R=G=B=lightness.

2. Otherwise:

   - Calculate chroma (saturation) as (1 - abs(2*lightness - 1)) * saturation

   - Calculate hue' as hue / 60

   - Calculate interim values for each color channel

   - Convert interim values to RGB using modulo and hue'

This allows easy conversion between the two color models. HSL is useful for adjusting colors, while RGB is needed for display.

Rgb-Hsl Color code table

Color RGB HSL Color Preview
Red (255, 0, 0) (0, 100%, 50%)
 
Green (0, 255, 0) (120, 100%, 50%)
 
Blue (0, 0, 255) (240, 100%, 50%)
 
Yellow (255, 255, 0) (60, 100%, 50%)
 
Cyan (0, 255, 255) (180, 100%, 50%)
 
Magenta (255, 0, 255) (300, 100%, 50%)
 
White (255, 255, 255) (0, 0%, 100%)
 
Black (0, 0, 0) (0, 0%, 0%)
 
Orange (255, 165, 0) (39, 100%, 50%)
 
Purple (128, 0, 128) (300, 100%, 25%)
 
Brown (165, 42, 42) (0, 59%, 41%)
 
Pink (255, 192, 203) (350, 24%, 91%)
 
Gray (128, 128, 128) (0, 0%, 50%)
 

 

This table shows some common RGB values and the equivalent HSL representation. As you can see, RGB deals directly with the color components, while HSL represents the colors perceptually through hue, saturation and lightness. The conversion formulas allow moving between these two color spaces.

#Rgb To Hsl #Color code finder #color chart #converter

We use cookies to enhance your experience on our website. The types of cookies used: Essential Cookies and Marketing Cookies. To read our cookie policy, click here.