Colors in CSS

CSS provides multiple ways to specify colors. Let's explore each method!

1. Named Colors

CSS supports 140+ named colors. Easy to remember but limited options.

red

dodgerblue

coral

teal

Format: #RRGGBB - Two hex digits (00-FF) for Red, Green, Blue

#ff0000

#00ff00

#0000ff

#333333

#f1c40f

Shorthand: #f00 = #ff0000 (when pairs are same)

Format: rgb(red, green, blue) - Values from 0-255

rgb(255,0,0)

rgb(46,204,113)

rgb(155,89,182)

Format: rgba(red, green, blue, alpha) - Alpha is 0 (transparent) to 1 (opaque)

rgba(0,0,0, 0.3)

rgba(0,0,0, 0.6)

rgba(0,0,0, 0.9)

Format: hsl(hue, saturation%, lightness%)

hsl(0,100%,50%)

hsl(120,100%,50%)

hsl(240,100%,50%)

hsl(300,100%,50%)

Create smooth color transitions

background: linear-gradient(to right, #ff6b6b, #feca57);

background: linear-gradient(135deg, #667eea, #764ba2);

background: radial-gradient(circle, #74b9ff, #0984e3);

Format	Example	Use Case
Named	`red, blue, coral`	Quick prototyping, readability
Hex	`#ff6b6b`	Most common, compact, design tools
RGB	`rgb(255, 107, 107)`	Programmatic manipulation
RGBA	`rgba(255, 107, 107, 0.5)`	When you need transparency
HSL	`hsl(4, 100%, 71%)`	Creating color variations easily