Color notations

Question 1

What is the Hex color notation for colors in CSS?

Answer 1

Hexadecimal notation represents colors using 6 digits (3 pairs), consisting of numbers (0-9) and letters (A-F). Each pair represents the red, green, and blue (RGB) components of the color.

It is also possible to add an extra alpha pair of digits indicating its transparency, as a case-insensitive hexadecimal number between 0 and ff (255)).

It can be used everywhere a <color> type is allowed.

For example:

#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The eight-value syntax

”<hex-color> - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 13, 2023.

Question 2

What is the syntax of Hex color notation in CSS?

Answer 2

Syntax

#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The eight-value syntax

Values
R or RR - The red component of the color, as a case-insensitive hexadecimal number between 0 and ff (255)). If there is only one number, it is duplicated: 1 means 11.

G or GG - The green component of the color, as a case-insensitive hexadecimal number between 0 and ff (255)). If there is only one number, it is duplicated: c means cc.

B or BB- The blue component of the color, as a case-insensitive hexadecimal number between 0 and ff (255)). If there is only one number, it is duplicated: 9 means 99.

A or AA Optional - The alpha component of the color, indicating its transparency, as a case-insensitive hexadecimal number between 0 and ff (255)). If there is only one number, it is duplicated: e means ee. 0 represents a fully transparent color, and ff a fully opaque one.

”<hex-color> - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 13, 2023.

Question 3

What does the rgb() functional notation do?

Answer 3

The rgb() functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color’s transparency.

It can be used everywhere a <color> type is allowed.

Note: The legacy rgba() syntax is an alias for rgb(), accepting the same parameters and behaving in the same way.

“rgb() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 14, 2023.

Question 4

What is the syntax of the rgb() functional notation?

Answer 4

/* Syntax with space-separated values */
rgb(255 255 255)
rgb(255 255 255 / .5)

/* Syntax with comma-separated values */
rgb(255, 255, 255)
rgb(255, 255, 255, .5)

The rgb() function accepts three space-separated values, representing respectively values for red, green, and blue. Optionally it may also be given a slash / followed by a fourth value, representing alpha.

The function also accepts a legacy syntax in which all values are separated with commas.

Values

• red, green, blue - These values represent color channels and may each be a <number> clamped between 0 and 255, or a <percentage>, or the keyword none. You can’t mix percentages and numbers.
• alpha - [Optional] A <number> clamped between 0 and 1, or a <percentage>. This value represents opacity, where the number 1 corresponds to 100% (full opacity). It defaults to 100%.

“rgb() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 14, 2023.

Question 5

What does the hsl() functional notation do?

Answer 5

The hsl() functional notation expresses an sRGB color according to its hue, saturation, and lightness components. An optional alpha component represents the color’s transparency.

It can be used everywhere a <color> type is allowed.

Note: The legacy hsla() syntax is an alias for hsl(), accepting the same parameters and behaving in the same way..

“hsl() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 14, 2023.

Question 6

What is the syntax of the hsl() functional notation?

Answer 6

/* Syntax with space-separated values */
hsl(hue saturation lightness)
hsl(hue saturation lightness / alpha)

/* Syntax with comma-separated values */
hsl(hue, saturation, lightness)
hsl(hue, saturation, lightness, alpha)

The hsl() function accepts three space-separated values, representing respectively hue, saturation, and lightness. Optionally it may also be given a slash / followed by a fourth value, representing alpha.

The function also accepts a legacy syntax in which all values are separated with commas.

Values

• hue - An <angle> of the color wheel given in one of the following units: deg, rad, grad, or turn. When written as a unitless <number>, it is interpreted as degrees.
• saturation - A <percentage> where 100% is completely saturated, while 0% is completely unsaturated (gray).
• lightness - A <percentage> where 100% is white, 0% is black, and 50% is “normal”.
• alpha - [Optional] A <percentage> or a <number> between 0 and 1, where the number 1 corresponds to 100% and means full opacity, while 0 corresponds to 0% and means fully transparent.

Hue wheel

“hsl() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 14, 2023.

Question 7

What does the hwb() functional notation do?

Answer 7

The hwb() functional notation expresses a given color according to its hue, whiteness, and blackness. An optional alpha component represents the color’s transparency.

“hwb() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 14, 2023.

Question 8

What is the syntax of the hwb() functional notation?

Answer 8

hwb(194 0% 0%) /* #00c3ff */
hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */

Note: The HWB function does not use commas to separate its values as with other color functions and the optional alpha value needs to be preceded with a forward slash (/) if specified.

Values

• hue - An <angle> of the color wheel given in one of the following units: deg, rad, grad, or turn. When written as a unitless <number>, it is interpreted as degrees.
• W - (whiteness) specifies the amount of white to mix in, as a percentage from 0% (no whiteness) to 100% (full whiteness).
• B - (blackness) specifies the amount of black to mix in, also from 0% (no blackness) to 100% (full blackness).
• alpha - [Optional] A <percentage> or a <number> between 0 and 1, where the number 1 corresponds to 100% and means full opacity, while 0 corresponds to 0% and means fully transparent.

Hue wheel

“hwb() - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved April 14, 2023.

Question 9

When is it recommended to use Hex color notation?

Answer 9

It is recommended to use Hex color notation when you want to define colors in a shorter and more compact format. It is commonly used for simple colors and is widely supported by browsers.

Question 10

When is it recommended to use RGB functional notation?

Answer 10

It is recommended to use RGB functional notation when you want to define colors using the Red, Green, and Blue channels. This is especially useful when working with colors in a digital context, as it allows for easy manipulation of individual color channels and direct input from color pickers.

Question 11

When is it recommended to use HSL functional notation?

Answer 11

It is recommended to use HSL functional notation when you want to define colors based on Hue, Saturation, and Lightness. This color model is more intuitive for designers, as it allows them to control the color hue and adjust saturation and lightness independently.

Question 12

When is it recommended to use HWB functional notation?

Answer 12

It is recommended to use HWB functional notation when you want to define colors using the Hue, Whiteness, and Blackness channels. This color model is useful for making color adjustments in a more intuitive manner, as it separates the hue from the brightness and saturation, allowing for easier manipulation. However, it is not as widely supported as the other color models.