Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Colors and Backgrounds

CSS Colors

Written by Updated

Choose CSS colors for text, backgrounds, borders, and interface states while preserving contrast, inheritance, and consistent design tokens.

CSS Colors are used to define the color of text, backgrounds, borders, and other elements on a webpage.

Colors play a very important role in web design as they improve visual appearance, readability, and user experience. The supporting concepts are explained in CSS HEX Colors and CSS RGB Colors.

In CSS, colors can be applied using different formats such as:

  • Color names (e.g., red, blue)
  • HEX values
  • RGB values

CSS Colors Syntax

css

selector {
    color: value;
}

CSS Colors Example

css

p {
color: red;
}

👉 This sets the text color of all <p> elements to red.

Attributes

PropertyDescriptionExample
colorSets text colorcolor: blue;
background-colorSets background colorbackground-color: yellow;
border-colorSets border colorborder-color: black;
outline-colorSets outline coloroutline-color: red;

Color must not carry meaning alone

Use color together with text, icons, patterns, or shape changes when communicating errors, success, selection, or required fields. Test foreground and background combinations in every interactive state, including focus and disabled states. Custom properties with semantic names such as --color-text-muted are easier to theme safely than tokens named after a particular hue.

Example

CSS Colors Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Colors Example</title>
    <style>
        body {
            background-color: lightgray;
        }

        h1 {
            color: blue;
        }

        p {
            color: green;
        }

        div {
            border: 2px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>

    <h1>CSS Colors</h1>

    <p>This is a paragraph with green text.</p>

    <div>This box has a red border.</div>

</body>
</html>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
CSS color values11211

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

  • CSS supports multiple color formats (name, HEX, RGB)
  • Use color for text and background-color for backgrounds
  • Choose colors carefully for better readability and accessibility
  • Avoid using too many colors to keep design clean
  • Use consistent color schemes for better UI/UX

Conclusion

CSS Colors are essential for making web pages visually appealing and user-friendly. By using different color properties, you can enhance design, highlight important elements, and improve the overall user experience.

PreviousCSS Pseudo ElementsNextCSS HEX Colors