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

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

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

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

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

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

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

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

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

Color

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

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%.

Color

.item { background-color: hsl(0deg, 50%, 50%) }

hsl() can also take an extra alpha (opacity) parameter to become hsla().

Color

.item { background-color: hsla(0deg, 50%, 50%, 100%) }

Named CSS Colors

We’ve talked about custom CSS colors, but browsers will often have many pre-made colors like aquamarine and maroon. Here is a big list of named CSS values https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#colors_table.

Below, I have a widget that captures a few of these values. Depending on your browser, some of these may not work. (or i mistyped some…)

Conclusion

That’s it for colors! Let me know if I missed anything.

HTML
CSS
Output