MakeW3web

Color basics (RGB, hex, HSL)

Here's an explanation of the color basics: RGB, hex, and HSL.

RGB

RGB stands for Red, Green, and Blue. It is a color model used to represent colors on digital displays such as computer screens, televisions, and mobile devices. In the RGB color model, each color is represented by a combination of these three primary colors. The values for each color range from 0 to 255, where 0 represents no color and 255 represents the maximum amount of that color.

For example, the RGB value for pure red is (255, 0, 0), which means there is maximum red, and no green or blue. The RGB value for pure white is (255, 255, 255), which means there is maximum red, green, and blue, resulting in a white color.

Hex

Hexadecimal (or hex) is another way to represent colors in digital displays. In the hex color model, each color is represented by a combination of six characters, which can be either numbers (0-9) or letters (A-F). The first two characters represent the amount of red, the next two represent green, and the last two represent blue.

For example, the hex code for pure red is #FF0000. The first two characters (FF) represent the maximum amount of red, and the other two colors (00) represent no green or blue. The hex code for pure white is #FFFFFF, which means there is maximum red, green, and blue, resulting in a white color.

HSL

HSL stands for Hue, Saturation, and Lightness. It is a color model used to describe colors in terms of their hue (the actual color), saturation (the intensity or purity of the color), and lightness (how light or dark the color is).

In the HSL color model, the hue is represented as an angle from 0 to 360 degrees on a color wheel. Saturation is represented as a percentage, where 0% is gray (no color), and 100% is the purest form of the color. Lightness is also represented as a percentage, where 0% is black (no light), and 100% is white (maximum light).

For example, the HSL value for pure red is (0, 100%, 50%). The hue value of 0 degrees indicates the color is pure red, while the saturation of 100% indicates the color is at its purest intensity. The lightness of 50% indicates the color is neither too dark nor too light.

Here are a few examples of color values in each model:

  • Pure blue in RGB: (0, 0, 255)
  • Pure blue in hex: #0000FF
  • Pure blue in HSL: (240, 100%, 50%)
  • Light gray in RGB: (192, 192, 192)
  • Light gray in hex: #C0C0C0
  • Light gray in HSL: (0, 0%, 75%)
  • Dark green in RGB: (0, 100, 0)
  • Dark green in hex: #006400
  • Dark green in HSL: (120, 100%, 20%)

Overall, these color models allow us to specify precise colors in digital displays and are essential tools for web design and digital media.

Was this page helpful?