CSS Color - Reference

What is Color in CSS?

CSS provides multiple ways to define colors for text, backgrounds, borders, and other elements. Understanding color formats and properties is fundamental to creating visually appealing designs.

Key Concept: Same color, multiple ways to write it. Choose the format that makes sense for your use case.

Hexadecimal (Hex)

Six-digit codes representing red, green, and blue values.

color: #FF5733;

Format: #RRGGBB (00-FF for each channel)

Shorthand: #F57 (same as #FF5577)

With opacity: #FF5733CC (last two digits = alpha channel)

RGB and RGBA

Defines color using red, green, blue values (0-255).

                color: rgb(255, 87, 51);

                color: rgba(255, 87, 51, 0.8);

RGB: Three values for red, green, blue

RGBA: Fourth value for opacity (0-1, where 0 = transparent, 1 = opaque)

HSL and HSLA

Defines color using hue, saturation, and lightness.

                color: hsl(9, 100%, 60%);

                color: hsla(9, 100%, 60%, 0.8);

Hue: 0-360 (color wheel position)

Saturation: 0-100% (color intensity)

Lightness: 0-100% (brightness, 0 = black, 100 = white)

Advantage: Easier to create color variations by adjusting values

Named Colors

CSS provides 140+ predefined color names.

                color: red;

                background: cornflowerblue;

Examples: red, blue, green, white, black, orange, purple, pink

Use: Quick prototyping or when exact color doesn't matter

Color Properties

Different properties control color in different contexts.

                color: #333; /* text color */

                background-color: #fff; /* background */

                border-color: blue; /* border */

color: Sets text color

background-color: Sets background color

border-color: Sets border color

currentColor Keyword

References the current value of the color property.

border: 2px solid currentColor;

Use: Border or other properties inherit the text color automatically