CSS Colors and Backgrounds

CSS Colors

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

Property	Description	Example
color	Sets text color	color: blue;
background-color	Sets background color	background-color: yellow;
border-color	Sets border color	border-color: black;
outline-color	Sets outline color	outline-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 values	1	12	1	1

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 Elements NextCSS HEX Colors