Home » HTML

CSS Colors Cheatsheet

By IncludeHelp Last updated : October 16, 2024

CSS colors give visual style to HTML elements. You can use CSS colors to change the default colors of HTML elements, to change their background colors, and to change their border colors.

This CSS colors cheatsheet provides a quick summary of CSS colors such as named colors, hexadecimal values of colors, RGB colors, RGBA colors, HSL colors, etc.

CSS Named Colors

You can use the color name directly as the value of the CSS property to set text color, background color, border color, etc. Color names are case-insensitive. But it is recommended you should use the lowercase color names.

.example{
  color: yellow;
  background-color: black;
  border: 1px solid cyan;
}

16 Basic HTML Color Names

Here are the basic 16 color names that you can use with CSS:

CSS Hexadecimal Colors

Hexadecimal colors are made up with the hexadecimal values of Red, Green, and Blue. Each color code starts from 00 to FF, where 00 is the lowest and FF is the highest contrast of the color. Hexadecimal color code starts with a hash (#) sign.

.example{
  color: #FFFFFF; /*White*/
  background-color: #000000; /*Black*/
  border: 1px solid #00FF00; /*Green/
}

Color Combination with Lowest and Highest Values

Popular Hexadecimal Color Codes

CSS RGB Colors

The CSS's rgb() function creates the RGB color based on the given decimal values of Red, Green, and Blue colors. The values range between 0 to 255.

.example{
  color: rgb(255, 0, 0);  /* Red */
  background-color: rgb(0, 255, 0);  /* Green */
  border: 1px solid rgb(0, 0, 255);  /* Blue */
}

CSS RGBA Colors

The CSS's rgba() function defines RGBA color. The RGBA color values are an extension of RGB color values with an alpha channel; the alpha channel defines the opacity for a color. The 1 defines the full opacity. White 0 defines no opacity; the value range of alpha cannel is between 0 to 1.

.example{
  color: rgba(255, 0, 0, 1);  /* Fully opaque red */
  background-color: rgba(0, 255, 0, 0.5);  /* Semi-transparent green */
  border: 1px solid rgba(0, 0, 255, 0.5);  /* Semi-transparent blue */
}

CSS HSL Colors

The CSS's hsl() function defines HSL colors. The HSL color stands for hue, saturation, and lightness. HSL colors are based on the RGB color wheel, where each color has an angle and a percentage value for the saturation and lightness values.

.example{
  color: hsl(0, 100%, 50%);  /* Red */
  background-color: hsl(120, 100%, 50%); /* Green */
  border: 1px solid hsl(240, 100%, 50%); /* Blue */
}

CSS HSLA Colors

The CSS's hsla() function defines HSLA colors. HSLA colors are the HSL colors with alpha channel.

.example{
  color: hsla(0, 100%, 50%, 1);  /* Fully opaque red */
  background-color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  border: 1px solid hsl(240, 100%, 50%, 0.5); /* Semi-transparent Blue */
}

CSS CSS Variables for Colors

You can declare CSS variables and assign named colors, hexadecimal color codes, etc. 

Variable Declaration

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
}

Usage in CSS

.element {
    color: var(--primary-color);  /* Using the primary color variable */
}

CSS Transparent Colors

You can set the color transparency by using the rgba() or hsla() functions.

.example{
  color: rgba(255, 255, 255, 0.5); /* 50% transparent white */
}

CSS Gradients Colors

In CSS, the gradient colors allow you to mix two or more colors with smooth transitions.

Linear Gradients

/*Without direction (top to bottom default)*/
.example1 {
  background-image: linear-gradient(red, yellow);
}

/*With direction (left to right)*/
.example2 {
  background-image: linear-gradient(to right, red , yellow);
}

Radial Gradients

.example1 {
  background-image: radial-gradient(red, yellow, green);
}

Conic Gradients

.example1 {
  background-image: conic-gradient(red, yellow, green);
}