CSS Colors & Color Models (Hex, RGB, HSL & Alpha)

Modern CSS supports multiple color formats, allowing precise color matching and dynamic transparency.

Hex Codes (#04AA6D / #ffffff): 6-character hexadecimal codes for red, green, and blue channels.

RGB & RGBA (rgb(4, 170, 109) / rgba(4, 170, 109, 0.8)): Red, Green, Blue values (0 to 255) with optional Alpha opacity (0.0 to 1.0).

HSL & HSLA (hsl(158, 95%, 34%)): Hue (0–360° on color wheel), Saturation (%), Lightness (%). Highly intuitive for building color schemes!

⊞Code Example

.card {

/* Hex color */

color: #ffffff;

/* Modern HSL Background */

background-color: hsl(222, 47%, 11%);

/* RGBA Semi-transparent Border */

border: 1px solid rgba(4, 170, 109, 0.3);

}