CSS Colors HEX, RGB, HSL, Gradients

CSS Color Values

Colors and backgrounds set the visual tone of a page and strongly affect readability. CSS gives you named colors, hex, RGB, HSL, alpha transparency, gradients, background images, and modern color formats.

Good color CSS is not only about choosing nice colors. You also need enough contrast, predictable overlays, accessible text states, and background images that do not make content hard to read.

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

HSL is often easier for design adjustments because hue, saturation, and lightness are separated. RGB is common when working with design tools, while hex remains compact and widely recognized.

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 degrees), 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

Background properties can be written separately for clarity or combined with the background shorthand. Use separate properties while learning because it is easier to debug background size, repeat, and position one at a time.

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 */