Color

color is an important data type in CSS which can be declared in many different ways. In this playground, we will cover many of the ways to declare colors.

Hexadecimal

The most commonly used notation, hexadecimal colors are declared with 6 hexadecimal digits #11BB33.
Hexadecimal colors are stored in the RRGGBB[AA] format: R is red, G is green, B is blue and [AA] are an optional alpha value (opacity). The widget below is using the RRGGBB format.

Color

style

.item {
background-color: #194d33;
}

Color

Hexadecimal colors can also be declared by using the rgb() function. This function accepts 3 numbers which represent the red, green, and blue values:rgb(R, G, B). These numbers should be between the values 0 and 255.

Color

style

.item {
background-color: rgb(50, 50, 50);
}

Red

Green

Blue

Optionally, we can use percentage values ranging from 0% to 100%. A color of rgb(100%, 0%, 0%) is equal to rgb(255, 0, 0).

Color

style

.item {
background-color: rgb(50%, 50%, 50%);
}

Red

Green

Blue

Here are the same widgets but with the additional alpha parameter (opacity). Notice how the non-percentage variant has to have an opacity between 0 and 1.

Color

style

.item {
background-color: rgba(50, 50, 50, 1);
}

Red

Green

Blue

Opacity

The percentage variant of rgba() has its opacity value ranging from 0% to 100%.

Color

style

.item {
background-color: rgba(50%, 50%, 50%, 100%);
}

Red

Green

Blue

Opacity

HSL Model

A more human friendly way to declare colors is to use the hsl format which is: hue, saturation, lighting. These are values that are easier for us to guess and use.

hue represents the angle of the color circle which can be specified with any angle type. By default, a numeric hue represents a deg (degrees). You can imagine how hue works in this case by imagining that you’re in the middle of a color wheel and you’re looking towards the red color. Red represents 0 deg, green represents a 120deg turn and blue represents a 240 deg turn.

saturation and lightness are both percentage based. saturation will change the colors vibrance and lightness will change the lighting. Those values can range from 0 to 1 or 0 to 100%.