CSS Colors - A Comprehensive Guide to Colors in CSS

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 ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.