Colors & Backgrounds in CSS
From the CSS cheat sheet · Colors & Backgrounds · verified Jul 2026
Colors & Backgrounds
Color formats, opacity, gradients, and background sizing
css
/* Color formats */
color: #ff6600;
color: rgb(255, 102, 0);
color: hsl(24, 100%, 50%);
color: oklch(70% 0.2 45);
/* Background */
background: linear-gradient(to right, #3b82f6, #8b5cf6);
background-image: url("bg.jpg");
background-size: cover;💡 oklch() produces perceptually even colors — better for design systems than hsl
⚡ Use rgb(0 0 0 / 50%) for transparent backgrounds — doesn't affect child elements like opacity does
📌 background-size: cover fills the element; contain fits the whole image inside
🟢 Layer a dark gradient over an image for readable text on photo backgrounds
colorsbackgroundsgradients