CSS Colors

CSS Colors are used to change the appearance of text, backgrounds, borders, and other elements on a webpage. They help make websites attractive, readable, and visually consistent.

CSS supports several ways to define colors, including color names, hexadecimal values, RGB, RGBA, HSL, and HSLA.

CSS Color Syntax

The color property changes the text color of an HTML element.

p {
    color: blue;
}

The background-color property changes an element’s background color.

body {
    background-color: lightgray;
}

Using Color Names in CSS

CSS supports predefined color names such as red, blue, green, black, and orange.

<h1 style="color: blue;">Welcome to Web4Learners</h1>
<p style="color: green;">Learn CSS step by step.</p>

Here, the heading appears blue, and the paragraph appears green.

Using Hexadecimal Colors

Hexadecimal colors begin with # and use six hexadecimal digits to represent red, green, and blue components.

h1 {
    color: #2563eb;
}

body {
    background-color: #f3f4f6;
}

The #2563eb value represents a shade of blue, while #f3f4f6 represents a light gray.

Using RGB and RGBA Colors

RGB defines a color using red, green, and blue values ranging from 0 to 255.

p {
    color: rgb(255, 0, 0);
}

This makes the paragraph red.

RGBA adds an alpha value to control transparency.

.box {
    background-color: rgba(0, 0, 255, 0.5);
}

The final value, 0.5, represents 50% opacity.

Using HSL and HSLA Colors

HSL defines colors using hue, saturation, and lightness.

h2 {
    color: hsl(120, 100%, 25%);
}

HSLA adds an alpha value for transparency.

.box {
    background-color: hsla(200, 80%, 50%, 0.7);
}

Why Are CSS Colors Important?

CSS colors help establish visual hierarchy, improve readability, and create consistent website designs. Choose text and background combinations with sufficient contrast so users can read content comfortably.

You can combine CSS colors with CSS Selectors to apply different colors to specific elements and with CSS Syntax to understand how styling rules are written.