What is Color names in CSS?

CSSmarkup~5 mins

Color names in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Color names let you pick colors by simple words instead of codes. This makes styling easier and faster.

You want to quickly set a background color without remembering hex codes.

You are making a simple webpage and want readable color settings.

You want to use common colors like red, blue, or green in your design.

You are teaching or learning CSS and want easy examples.

You want to ensure colors are understood by all browsers without extra setup.

Syntax

CSS

property: color-name;

Use any CSS property that accepts colors, like color, background-color, or border-color.

Color names are case-insensitive, so Red and red work the same.

Examples

This sets the text color to red using the color name.

CSS

color: red;

This sets the background color to a light blue shade.

CSS

background-color: lightblue;

This creates a green border around an element.

CSS

border: 2px solid green;

Sample Program

This webpage uses color names to style the background, heading, and paragraph. You will see a light yellow page background, a dark blue text color for the body, a crimson heading, and a light green paragraph with an orange border.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Color Names Example</title>
  <style>
    body {
      background-color: lightyellow;
      color: darkblue;
      font-family: Arial, sans-serif;
      padding: 2rem;
    }
    h1 {
      color: crimson;
    }
    p {
      background-color: lightgreen;
      border: 3px solid orange;
      padding: 1rem;
      max-width: 400px;
      border-radius: 0.5rem;
    }
  </style>
</head>
<body>
  <h1>Welcome to Color Names</h1>
  <p>This paragraph uses color names for background, border, and text colors.</p>
</body>
</html>

OutputSuccess

Important Notes

Color names are easy but limited to about 140 standard colors.

For more precise colors, you can use hex codes or RGB values.

Always check color contrast for readability and accessibility.

Summary

Color names let you use simple words to set colors in CSS.

They work with many CSS properties like color and background-color.

Use color names for quick, readable, and browser-friendly color styling.