VOOZH about

URL: https://www.geeksforgeeks.org/css/css-colors/

⇱ CSS Colors - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

CSS Colors

Last Updated : 11 May, 2026

CSS colors are used to change the look of text, backgrounds, borders, and other elements on a webpage. They help make a site more attractive and easy to read.

  • Colors can be set using names, HEX codes, RGB, RGBA, HSL, or HSLA values.
  • Used to style text, backgrounds, and borders.
  • Help create contrast, highlight content, and improve visual design.

You can try different formats of colors here-

  • Background Color (background-color): #FF5733; adds a bright red-orange background, and padding: 20px; provides inner spacing.
  • Text Color (color): rgb(255, 0, 0); sets the text to red, and font-size: 20px; makes it larger.
  • Border Color (border): 5px solid rgba(0, 255, 0, 0.5); adds a semi-transparent green border with padding: 10px; and margin: 10px; for spacing.
  • Hover Effects: background-color: hsl(120, 100%, 50%); gives a bright green background that changes to a lighter transparent green on hover.

Use Cases of CSS Colors with Examples

CSS colors play a vital role in the design and functionality of a webpage. Below are common use cases of CSS colors along with simple code examples:

1. Background Colors

You can use background-color to set the color of an element’s background. It's typically used for sections, divs, headers, footers, etc.

2. Text Colors

The color property is used to apply color to the text. It's important to ensure good contrast between the text and the background for readability.

3. Border Colors

You can use the border property to apply color to an element's border. It's commonly used for buttons, cards, or form inputs to create visible outlines.

4. Hover Effects

Use the :hover pseudo-class to change the color of an element when a user hovers over it, adding interactivity to your design.

5. Shadows and Text Effects

You can use box-shadow to add shadows around elements or text-shadow for adding shadows to the text, creating depth and emphasis.

6. Gradients

CSS allows you to create gradients using the background property. Gradients can transition smoothly between two or more colors.

Color Formats in CSS

Color Format

Description

Color Names

Use predefined color names (e.g., red, blue, green) for simplicity.

Hexadecimal (Hex) Codes

Define colors using six-digit hex codes (e.g., #FF5733).

RGB (Red, Green, Blue)

Define colors using RGB values (e.g., rgb(255, 0, 0)).

RGBA (Red, Green, Blue, Alpha)

Extend RGB by adding an alpha (transparency) value (e.g., rgba(255, 0, 0, 0.5)).

HSL (Hue, Saturation, Lightness)

Define colors using HSL values (e.g., hsl(120, 100%, 50%)).

HSLA (Hue, Saturation, Lightness, Alpha)

Extend HSL by adding an alpha value for transparency (e.g., hsla(120, 100%, 50%, 0.5)).

Comment
Article Tags: