Online RGB to HSL color conversion

Online Web Code Test | Online Image Picker | Online Color Picker

RGB to HSL color conversion

Enter red, green and blue color levels (0..255) and press the Convert button:

Enter red color (R):
Enter green color (G):
Enter blue color (B):
   
Hue (H): °  
Saturation (S): %  
Lightness (L): %  
Color preview:  

HSL to RGB conversion ►

RGB to HSL conversion formula

The R,G,B values are divided by 255 to change the range from 0..255 to 0..1:

R' = R/255

G' = G/255

B' = B/255

Cmax = max(R', G', B')

Cmin = min(R', G', B')

Δ = Cmax - Cmin

 

Lightness calculation:

L = (Cmax + Cmin) / 2

RGB to HSL color table

Color Color

name

Hex (R,G,B) (H,S,L)
  Black #000000 (0,0,0) (0°,0%,0%)
  White #FFFFFF (255,255,255) (0°,0%,100%)
  Red #FF0000 (255,0,0) (0°,100%,50%)
  Lime #00FF00 (0,255,0) (120°,100%,50%)
  Blue #0000FF (0,0,255) (240°,100%,50%)
  Yellow #FFFF00 (255,255,0) (60°,100%,50%)
  Cyan #00FFFF (0,255,255) (180°,100%,50%)
  Magenta #FF00FF (255,0,255) (300°,100%,50%)
  Silver #BFBFBF (191,191,191) (0°,0%,75%)
  Gray #808080 (128,128,128) (0°,0%,50%)
  Maroon #800000 (128,0,0) (0°,100%,25%)
  Olive #808000 (128,128,0) (60°,100%,25%)
  Green #008000 (0,128,0) (120°,100%,25%)
  Purple #800080 (128,0,128) (300°,100%,25%)
  Teal #008080 (0,128,128) (180°,100%,25%)
  Navy #000080 (0,0,128) (240°,100%,25%)


Online Color Calculators

Online Web Code Test | Online Image Picker | Online Color Picker

Color Calculators

Use the free Color Calculator to explore creative color options for your design project. Simply pick your base color(s), choose a color harmony, tweak/explore as needed, and see results. You’ll get a report of the hex, RGB, and CMYK color values for your project

1. What is CMYK?

>CMYK stands for Cyan, Magenta, Yellow and Key (Black). If you do not save your product in CMYK, PrintingCenterUSA will automatically convert your design from RGB. RGB stands for Red, Green, and Blue—This is the color mode you see everything in when viewing on all monitors. Your phone, computer, tablet, television, etc are all RGB.

2. Why Does the Color Mode Matter?

CMYK Printing is an additive color process utilizing ink or toner. RGB is a subtractive color process that is based on light. When you add physical layers of colored ink on top of each other, they mix one way. When you add layers of colored light together, they mix in a completely different way. For example, in the image below you can see that when all of the RGB colors add together in the middle of the RGB diagram, white is created. When all of the CMYK colors add together, they create Key (Black).

CMYK Color Mode

If printers are using a digital printing method, they would print color on paper using CMYK colors. This is a four color mode that utilizes the colors cyan, magenta, yellow and black in various amounts to create all of the necessary colors when printing images. It is a subtractive process, which means that each additional unique color means more light is removed, or absorbed, to create colors. When the first three colors are added together, the result is not pure black, but rather a very dark brown. The K color, or black, is used to completely remove light from the printed picture, which is why the eye perceives the color as black.

RGB Color Mode

RGB is the color scheme that is associated with electronic displays, such as CRT, LCD monitors, digital cameras and scanners. It is an additive type of color mode that combines the primary colors, red, green and blue, in various degrees to create a variety of different colors. When all three of the colors are combined and displayed to their full extent, the result is a pure white. When all three colors are combined to the lowest degree, or value, the result is black. Software such as photo editing programs use the RGB color mode because it offers the widest range of colors.

How do I know when to use which one?

In short, if you’re going to be printing something, such as a business card, stationary, or a newsletter, use CMYK. CMYK does not include a white color because it is assumed that it will be printed on a white paper and depending on the percentage of each color that is used, the white from the paper will be used to fill the space, therefore making the shades appear lighter.

If it’s something that will only be seen digitally, use RGB. The Internet is set up to work exclusively with RGB colors and there is a simple explanation behind this. A digital monitor is made up of tiny units called pixels. These pixels are comprised of three light units, one for red, one for green, and one for blue. The RGB values are applied to these pixels, thereby setting the luminosity for each of the light units in each pixel.

It should be known that there is no perfect correlation between the two types of colors, but when converted, a very close match can be achieved.

How do CMYK and RGB render differently?

These color render differently based on the amount of white space that is already provided and how much “mixing” of colors needs to occur. In order to get the correct color on all mediums, the colors need to be converted. Highland Marketing did a great job of explain why RGB colors need to be converted when you’re creating something for print: “The RGB scheme has a greater range of colors than CMYK and can produce colors that are more vivid and vibrant. These colors are beyond the range of CMYK to reproduce and will come out darker and more dull in print than what is seen on the monitor or display. Because the RGB color mode has the full range of colors, documents shown in CMYK mode will always show up precisely on-screen. RGB colors, however, will not necessarily appear in print as they do on-screen. To accurately print the document or image, it must be converted from its original RGB format to CMYK. It is possible to do this by using software such as Adobe Photoshop or Adobe Illustrator.”Consequently, the same art displayed on a computer monitor may not match to that printed in a publication.

RGB to HEX

In addition to the color-conversion functionality available in graphic programs like Illustrator and Photoshop, there are a number of websites that calculate RGB to HEX, or you can do the calculation yourself if you’re the adventurous type.

Hex colors are a way of representing colors from various color models through hexadecimal values. A hexadecimal color follows the format #RRGGBB, where RR is red, GG is green, and BB is blue. These hexadecimal integers can be in a range of 00 to FF to specify the intensity of the color.

Why Use Hex Colors?

Using hex color codes to represent different colors is an easy way to differentiate between colors. Once you understand how they work, you can easily change the red, blue, or green values to create a different shade. This is particularly convenient given that you have such a range of color options with hex color codes, which guarantees color exactness.

How Many Hex Colors Are There?

In standard #RRGGBB notation, there are 256^3 color combinations available, or 16,777,216. This is because each color value RR, GG, BB can contain 256 different values, ranging from 00 to FF. Therefore, the number of combinations is 256^3.

An interesting side note is that many modern browsers will also support transparency. This means that an entirely new set of color codes exists in the form of #AARRGGBB. In this instance, there are 4,294,976,296 color codes, or 256^4. It’s important to keep in mind that the addition of the transparency does not indicate that there are extra colors, since solely adding transparency does not change the color. This merely adds more information and more available color codes depending on transparency, or the level of opacity.

How Do Hex Colors Work?

Hexadecimal colors use sixteen different values to represent a single shade of color, whether it be red, green, or blue. This is powerful because it gives you a broad range of shades for each color – specifically sixteen. Each color is broken down into a number or character, ranging from 0-9 and A-F, where 0 is the minimum value and F is the maximum. Next, the color format is separated into #RRGGBB, where RR is red, GG is green, and BB is blue.

What is HSL?

HSL (Hue, Saturation, Lightness) is the color representation. It is user-friendly because without a big knowledge, you can imagine how specific color looks like. Hue is one pure pigment — without any tint or shade. Color saturation is about intensity. Lightness is about how light color is.

The HSL color model is used in numerical color specifications. The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak.

HSL Color Values

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. Lightness is also a percentage value, 0% is black, and 100% is white.

HSV Color

The RGB (red, green, blue) color model is the most popular way to mix and create colors. If you deal with commercial printers, you know about CMYK (cyan, magenta, yellow, key). You might have noticed HSV (hue, saturation, value) in the color picker of your graphics software.

Unlike RGB and CMYK, which use primary colors, HSV is closer to how humans perceive color. It has three components: hue, saturation, and value. This color space describes colors (hue or tint) in terms of their shade (saturation or amount of gray) and their brightness value. Some color pickers, like the one in Adobe Photoshop, use the acronym HSB, which substitutes the term "brightness" for "value," but HSV and HSB refer to the same color model.

Uses of HSV

Designers use the HSV color model when selecting colors for paint or ink because HSV better represents how people relate to colors than the RGB color model does.

The HSV color wheel also contributes to high-quality graphics. Although less well-known than its RGB and CMYK cousins,

Selecting an HSV color begins with picking one of the available hues and then adjusting the shade and brightness values.