CSS Colors Tutorial - HEX, RGB, HSL, Gradients with Examples

CSS Color Values

CSS supports multiple ways to specify colors. All produce the same result - choose the format that best fits your workflow.

Format	Example	Notes
Named colors	`red`, `blue`, `tomato`	148 predefined names
HEX	`#ff0000`, `#f00`	3 or 6 hex digits (shorthand if pairs match)
RGB	`rgb(255, 0, 0)`	Red, Green, Blue - 0 to 255
RGBA	`rgba(255, 0, 0, 0.5)`	RGB + Alpha (0=transparent, 1=opaque)
HSL	`hsl(0, 100%, 50%)`	Hue (0-360�), Saturation, Lightness
HSLA	`hsla(0, 100%, 50%, 0.5)`	HSL + Alpha
currentColor	`border-color: currentColor`	Inherits the element's color property
transparent	`background: transparent`	Fully transparent

Color Values - All Formats

/* Named color */
h1 { color: tomato; }

/* HEX - #RRGGBB */
h2 { color: #3498db; }
h3 { color: #e74; }       /* shorthand for #ee7744 */

/* RGB */
p { color: rgb(52, 152, 219); }

/* RGBA - with transparency */
.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 50% transparent black */
}

/* HSL - Hue Saturation Lightness */
.success { color: hsl(120, 60%, 40%); }  /* green */
.warning { color: hsl(45, 100%, 50%); }  /* yellow */
.danger  { color: hsl(0, 80%, 50%); }    /* red */

/* HSLA */
.badge {
    background-color: hsla(210, 70%, 50%, 0.8);
}

/* currentColor - inherits color property */
.icon {
    color: #3498db;
    border: 2px solid currentColor; /* border matches text color */
}

/* CSS Color Level 4 - oklch (modern) */
.modern { color: oklch(60% 0.15 230); }

Background Properties

Property	Values	Description
`background-color`	any color value	Solid background color
`background-image`	`url('img.jpg')`	Background image
`background-repeat`	`repeat \| no-repeat \| repeat-x \| repeat-y`	How image tiles
`background-position`	`center \| top left \| 50% 50%`	Image position
`background-size`	`cover \| contain \| 100px 200px`	Image size
`background-attachment`	`scroll \| fixed \| local`	Scroll behavior
`background-clip`	`border-box \| padding-box \| content-box`	Where bg extends to
`background`	shorthand	All background properties in one

Background Properties - Complete Examples

/* Solid background color */
.card {
    background-color: #f8f9fa;
}

/* Background image */
.hero {
    background-image: url('hero.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;          /* fills container, may crop */
    background-attachment: fixed;    /* parallax effect */
    min-height: 400px;
}

/* background shorthand: color image repeat position/size attachment */
.banner {
    background: #2c3e50 url('pattern.png') repeat center / 50px fixed;
}

/* Multiple backgrounds (layered, first = top) */
.multi-bg {
    background:
        url('overlay.png') no-repeat center / cover,
        url('texture.jpg') repeat,
        #1a1a2e;
}

/* Background clip - text fill effect */
.gradient-text {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 3rem;
    font-weight: bold;
}

/* Cover vs Contain */
.cover   { background-size: cover; }   /* fills box, may crop image */
.contain { background-size: contain; } /* fits inside box, may show gaps */