CSS colors

by | Sep 8, 2024 | Technology

CSS offers a variety of ways to specify colors for styling web pages. Here’s a guide to the different methods you can use:

1. Named Colors

CSS provides a set of predefined color names.

Examples:

css

p {
color: red; /* Named color */
background-color: lightblue; /* Another named color */
}

2. Hexadecimal Colors

Hex colors use a six-digit hexadecimal code, representing RGB (Red, Green, Blue) values.

Syntax:

css

color: #RRGGBB;
  • RR: Red component
  • GG: Green component
  • BB: Blue component

Examples:

css

p {
color: #ff5733; /* A shade of orange */
background-color: #cceeff; /* Light blue */
}

Short Hex Notation: You can use a three-digit shorthand if each pair of hexadecimal values is the same.

Example:

css

p {
color: #f60; /* Equivalent to #ff6600 */
}

3. RGB Colors

RGB colors are specified using the rgb() function, which takes three values for red, green, and blue.

Syntax:

css

color: rgb(red, green, blue);

Examples:

css

p {
color: rgb(255, 87, 51); /* A shade of orange */
background-color: rgb(204, 238, 255); /* Light blue */
}

4. RGBA Colors

RGBA colors are similar to RGB but include an alpha value for opacity.

Syntax:

css

color: rgba(red, green, blue, alpha);
  • alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

Examples:

css

p {
color: rgba(255, 87, 51, 0.7); /* 70% opaque orange */
background-color: rgba(204, 238, 255, 0.5); /* 50% opaque light blue */
}

5. HSL Colors

HSL stands for Hue, Saturation, and Lightness.

Syntax:

css

color: hsl(hue, saturation%, lightness%);
  • hue: Degree on the color wheel (0 to 360).
  • saturation: Percentage (0% to 100%).
  • lightness: Percentage (0% to 100%).

Examples:

css

p {
color: hsl(9, 100%, 60%); /* A shade of orange */
background-color: hsl(200, 100%, 90%); /* Light blue */
}

6. HSLA Colors

HSLA colors are similar to HSL but include an alpha value for opacity.

Syntax:

css

color: hsla(hue, saturation%, lightness%, alpha);

Examples:

css

p {
color: hsla(9, 100%, 60%, 0.7); /* 70% opaque orange */
background-color: hsla(200, 100%, 90%, 0.5); /* 50% opaque light blue */
}

7. CurrentColor Keyword

The currentColor keyword refers to the current text color of an element, which can be useful for setting borders or backgrounds to match the text color.

Example:

css

p {
color: blue;
border: 2px solid currentColor; /* Border color matches text color */
}

8. Transparent Keyword

The transparent keyword is a special value that represents fully transparent color.

Example:

css

p {
background-color: transparent; /* No background color */
}

Color Functions and Properties

  • color: Sets the text color.
  • background-color: Sets the background color.
  • border-color: Sets the color of borders.
  • outline-color: Sets the color of outlines.
  • box-shadow: Can also use colors with transparency for shadow effects.

Color Examples and Usage:

css

body {
background-color: #f0f0f0; /* Light gray background */
}

header {
color: rgb(0, 102, 204); /* Dark blue text */
}

button {
background-color: hsl(120, 100%, 50%); /* Green background */
border: 2px solid rgba(0, 0, 0, 0.2); /* Light black border */
}

footer {
color: currentColor; /* Color inherits from parent element */
background-color: transparent; /* No background color */
}

These methods provide flexibility in defining colors for your web design, allowing you to create visually appealing and accessible styles.

×
Sign in
Sign up

Sign In

Sign Up