RGB to HSV & HSL

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 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.

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.

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.

More free online color tools

1. RGB to Pantone
2. CMYK to Pantone (coated color)
3. CMYK to Uncoated PMS (uncoated color)
4. CMYK to RGB (CMYK, RGB, HEX color code converter)
5. CMYK to HEX (CMYK, HEX, RGB color code converter)
6. RGB to HSV (RGB, HSV, HSL, HEX color code converter)
7. Find PMS color on an image (Logo color picker)
8. Image color picker (CMYK, RGB, HEX)
9. Search PMS color code
10. HTML color names
11. Color naming
12. Recognize color
13. Get dominant color of image
14. Get average color of image

What do you think about this tool?

Browse this page on your mobile phone