WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

CSS Color

Previous Next

In CSS, colors can be applied to elements in various ways using different color formats. Here’s an overview of how colors are specified and used in CSS.

Try It:
Named Colors
Hexadecimal Colors
RGB Colors
RGBA Colors
HSL Colors
HSLA Colors
See Text Color

Currently Active Property:

color : red;

Color Formats in CSS (Color Values)

Color Format Description
Named Colors CSS provides a set of named colors that you can use directly without needing to define the color value.
Hexadecimal Colors Hexadecimal colors are defined using a # followed by either 3 or 6 hexadecimal characters (0-9, A-F). The first two digits represent red, the next two represent green, and the last two represent blue.
RGB Colors RGB colors are specified with the rgb() function, which defines colors by setting red, green, and blue channels with values between 0 and 255.
RGBA Colors RGBA is the same as RGB but includes an alpha channel that controls the transparency of the color. The alpha value is a number between 0 (completely transparent) and 1 (completely opaque).
HSL Colors HSL stands for Hue, Saturation, and Lightness. The hsl() function is another way to represent colors:
HSLA Colors HSLA is the same as HSL but includes an alpha channel to control the transparency.
CurrentColor Keyword currentColor is a special keyword that uses the current value of the color property.
Transparent Keyword The transparent keyword sets a fully transparent color. It's often used as a fallback or default value in CSS backgrounds or borders.

Named Colors:

CSS provides a set of named colors that you can use directly without needing to define the color value.

Example
h1 {
color: red;
}
p {
background-color: lightblue;
}

Hexadecimal Colors:

Hexadecimal colors are defined using a # followed by either 3 or 6 hexadecimal characters (0-9, A-F). The first two digits represent red, the next two represent green, and the last two represent blue.

Example
h1 {
color: #ff5733; /* orange */
}
p {
background-color: #1a1a1a; /* dark grey */
}
Try it yourself

RGB Colors:

RGB colors are specified with the rgb() function, which defines colors by setting red, green, and blue channels with values between 0 and 255

Example
h1 {
color: rgb(255, 87, 51); /* orange */
}
p {
background-color: rgb(26, 26, 26); /* dark grey */
}
Try it yourself

RGBA Colors:

RGBA is the same as RGB but includes an alpha channel that controls the transparency of the color. The alpha value is a number between 0 (completely transparent) and 1 (completely opaque).

Example
p {
background-color: rgba(255, 87, 51, 0.5); /* orange with 50% transparency */
}
Try it yourself

HSL Colors:

HSL stands for Hue, Saturation, and Lightness. The hsl() function is another way to represent colors:

  • Hue: An angle from 0 to 360 (the color on the color wheel).
  • Saturation: A percentage (0% is grey, 100% is full color).
  • Lightness: A percentage (0% is black, 100% is white).
Example
h1 {
color: hsl(30, 100%, 60%); /* orange */
}
Try it yourself

HSLA Colors:

HSLA is the same as HSL but includes an alpha channel to control the transparency.

Example
p {
background-color: hsla(30, 100%, 60%, 0.5); /* orange with 50% transparency */
}
Try it yourself

CurrentColor Keyword:

currentColor is a special keyword that uses the current value of the color property.

Example
h1 {
color: #3498db;
border: 1px solid currentColor; /* Border will have the same color as the text */
}
Try it yourself

Transparent Keyword:

The transparent keyword sets a fully transparent color. It's often used as a fallback or default value in CSS backgrounds or borders.

Example
p {
color: transparent;
}
Try it yourself

Previous Next