Convert RGB to HSL

Red
 
Green
 
Blue
 
Hue °
Saturation %
Value %
Hue °
Saturation %
Lightness %
HEX #
 

Would you like to convert a RGB color to HSV or HSL ?

This is a free online color code converter, transform a color hue to another color model, supports 4 color models, RGB, HSL, HSV and HEX, they can be converted to each other.

How to use this color code converter

  1. Input your color codes in any one color model area, RGB, HSV, HSL or HEX
  2. To convert RGB to HSV, input your RGB color codes to RGB area, for example, rgb(40, 110, 255)
  3. To convert HSL to RGB, input your HSL color codes to RGB area, for example, hsl(220, 100%, 58%)
  4. To convert HEX to HSV, input your HEX color codes to HEX area, for example, #286eff
  5. Our color code converter will show results interactively

What is HSL color model ?

HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are two alternative representations of the RGB color model, they are more closely align with the way human vision perceives color-making attributes. In these models, colors of each hue are arranged in a radial slice, around a central axis of neutral colors which ranges from black at the bottom to white at the top.

Hue

In HSL, the Hue determines what color of the rainbow something is. It’s represented in 360 degrees, like a traditional color wheel. One of the main advantages of HSL over RGB color is that complementary colors are located across from one another, which makes the whole system very intuitive.

Saturation

The distance from the middle of the color wheel is called the ‘Saturation’, or how much of a given hue is present. Looking closely at the color wheel above, it is apparent that the color becomes brighter and more vivid as one travels from the center of the circle to the edge.

Lightness

The Lightness value of an HSL color is in a third dimension, which actually makes the HSL system a cylinder:

What is HSV color model ?

HSV (Hue, Saturation and Value) – defines a type of color space. It is similar to the modern RGB and CMYK models. The HSV color space has three components: hue, saturation and value. ‘Value’ is sometimes substituted with ‘brightness’ and then it is known as HSB.

Hue

In HSV, hue represents color. In this model, hue is an angle from 0 degrees to 360 degrees.

AngleColor
0-60Red
60-120Yellow
120-180Green
180-240Cyan
240-300Blue
300-360Magenta

Saturation

Saturation indicates the range of grey in the color space. It ranges from 0 to 100%. Sometimes the value is calculated from 0 to 1. When the value is ‘0,’ the color is grey and when the value is ‘1,’ the color is a primary color. A faded color is due to a lower saturation level, which means the color contains more grey.

Value

Value is the brightness of the color and varies with color saturation. It ranges from 0 to 100%. When the value is ‘0’ the color space will be totally black. With the increase in the value, the color space brightness up and shows various colors.

What is RGB color model ?

The RGB color model is an additive color model in which red, green and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.

The main purpose of the RGB color model is for the sensing, representation and display of images in electronic systems, such as televisions and computers, though it has also been used in conventional photography.

Red, green, and blue can be combined in various proportions to obtain any color in the visible spectrum. Levels of R, G, and B can each range from 0 to 100 percent of full intensity. Each level is represented by the range of decimal numbers from 0 to 255 (256 levels for each color), equivalent to the range of binary numbers from 00000000 to 11111111, or hexadecimal 00 to FF. The total number of available colors is 256 x 256 x 256, or 16,777,216 possible colors.

More free online color tools

  1. Search Available PMS Colors : What blue pms color we can use ?
  2. Search PMS color code : What is the color of code 361 C ?
  3. Logo color picker : Find the PMS color on an image
  4. Image color picker : Find the color on an image, support CMYK, RGB, HEX
  5. HTML/CSS color names : Color name list
  6. RGB to PMS colors : Convert RGB color code to PMS color code
  7. RGB to HSL : Convert RGB color code to HSL/HSV color code
  8. CMYK to PMS : Find PMS colors close to CMYK color
  9. RGB to CMYK : Convert RGB color to CMYK color

What do you think about this color code converter?



Browse this page on your mobile phone


Angle Measurement | Facebook Emoji
Inch to CM | Calculate Cubic Feet
Grams To Ounces | Color Matching
Promotional Products | Corporate Gifts
Custom Wristbands | Custom Lanyards

Careful ! As Pantone colors depend on the type of matter to be printed, this is only an approximation to help to quicken your search of the right color, You should indeed confirm this results with real printed pantone guides. Our free color matching system is intended as a reference only, recommended color may not what you would like, printed colors on any products may not match the colors on the screen, use this at your own risk.