Colors

CSS Colors are used to define the color of text, backgrounds, borders, shadows, and other visual elements on a web page.

Ways to Define Colors in CSS

Named Colors

You can use color names (for example: red, green, blue, etc.) to style the elements.

color: red;
background-color: lightblue;

Hexadecimal (Hex) Colors

This method uses a combination of 6 hexadecimal digits (0-9 and A-F) to represent a color.

The first two digits represent the red component, the next two digits represent the green component, and the last two digits represent the blue component.

For example, #FF0000 represents red, #00FF00 represents green, and #0000FF represents blue.

RGB Colors

RGB stands for red, green, and blue, and it uses three numbers (0-255) to represent the amount of each color component.

For example, rgb(255, 0, 0) represents red, rgb(0, 255, 0) represents green, and rgb(0, 0, 255) represents blue.

RGBA Colors

RGBA adds an Alpha (opacity) channel to RGB.

Alpha ranges from 0 (transparent) to 1 (opaque).

Example:

background-color: rgba(0, 0, 0, 0.5); /* 50% transparent black */

HSL Colors

HSL stands for hue, saturation, and lightness.

Hue is represented as an angle (0-360 degrees), saturation and lightness are represented as a percentage (0-100%).

For example, hsl(0, 100%, 50%) represents red, hsl(120, 100%, 50%) represents green, and hsl(240, 100%, 50%) represents blue.

HSLA Colors

HSLA adds an Alpha (opacity) channel to HSL.

Example:

color: hsla(240, 100%, 50%, 0.3); /* Semi-transparent blue */

Useful Color Utilities in CSS

currentColor Keyword

Refers to the value of the element’s color property.

border: 2px solid currentColor;

transparent Keyword

Represents a fully transparent color.

background-color: transparent;

inherit / initial / unset

• inherit: Inherit color from parent.
• initial: Resets to default.
• unset: Resets to inherited or initial.