Color values - CSS - Simple Dev

Summary

RGB syntax:

p {
  color: rgb(255, 255, 255);
}

Hexadecimal syntax:

p {
  color: #ffffff;
}

HSL syntax:

p {
  color: hsl(360, 100%, 100%);
}

Keyword syntax:

p {
  color: red;
}

Details

In CSS, there are multiple ways of writing color values. The main ways are RGB, hexadecimal, HSL, and keyword values.

RGB

RGB stands for red, green, and blue.

The lowest RGB value is rgb(0, 0, 0), which is the color black. The highest RGB value is rgb(255, 255, 255) which is the color white.

You can also include a fourth value for the alpha component, which determines a color’s transparency level. The alpha value can be any number between 0 and 1 or a percentage value. Here’s an example:

/* Min value */
color: rgba(0,0,0,0);

/* Max value */
color: rgba(255,255,255,1);

/* Max value with percentage */
color: rgba(255,255,255,100%);

Hex

Hex values start with a hashtag and consist of 6 characters. You can use the numbers 0 through 9 and the letters a through f for each character.

The lowest hex value is #000000, which is the color black. The highest hex value is #ffffff, which is the color white.

Hex values are actually very similar to RGB values. After the number sign, the first 2 characters represent the amount of red to use, the second 2 characters represent the amount of green to use, and the last 2 characters represent the amount of blue to use.

You can also include two additional characters at the end of the hex value for the alpha component. These characters can be any number beween 0 and 9 and any letter between a and f. Here’s an example:

/* Min value */
color: #00000000;

/* Max value */
color: #ffffffff;

HSL

HSL stands for hue, saturation, and lightness.

The lowest HSL value is hsl(0, 0%, 0%), which is the color white. The highest HSL value is hsl(360, 100%, 100%), which is the color black.

/* Min value */
color: hsla(0, 0, 0, 0);

/* Max value */
color: hsla(360, 100% ,100%, 1);

/* Max value with percentage */
color: hsla(360, 100%, 100%, 100%);

Keyword

CSS also supports the use of certain color keywords, like red, blue, and yellow. A list of all of the color keywords can be found in the reference link below. For better control over the colors on your webpage, use one of the methods above instead of keywords.

VS Code Tip

After typing a color value in VS Code, a small square will appear with a preview of what the color will look like. You can hover over the color value or the preview to bring up a color picker. The color picker has controls for the hue, saturation, and opacity.

Exercises

There are no exercises for this lesson.

References

The <color> data type on MDN

Color values – CSS