CSS Colors – Every Color Format Explained with Examples

Color Properties in CSS

Before color formats, here are the main CSS properties that accept color values:

CSS – Color properties

/* Text color */
color: #333;

/* Background color */
background-color: #f5f7fa;

/* Border color */
border-color: #1572B6;

/* Outline color */
outline-color: #1572B6;

/* Box shadow color */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

/* Text shadow color */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

/* Caret color (text cursor in inputs) */
caret-color: #1572B6;

/* Scrollbar color (Chrome/Edge) */
scrollbar-color: #1572B6 #f0f0f0;

Named Colors

CSS has 147 named colors — keywords like red, blue, coral, steelblue. They are readable but limited.

CSS – Named colors

h1 { color: navy; }
body { background-color: whitesmoke; }
.badge { background-color: coral; color: white; }
hr { border-color: gainsboro; }

/* Special values */
color: transparent;   /* fully invisible */
color: currentColor;  /* inherits the current color value */
color: inherit;       /* inherits from parent */

navy

coral

steelblue

tomato

mediumseagreen

goldenrod

Named colors are fine for quick prototypes, but for production always use hex or HSL for precise brand colors.

Hex Colors

The most common color format on the web. Hex codes represent colors as a 6-digit (or 3-digit shorthand) hexadecimal number: #RRGGBB where each pair is 00–FF (0–255 in decimal).

CSS – Hex colors

/* Full hex: #RRGGBB */
color: #ff0000;   /* pure red   — R=255, G=0,   B=0   */
color: #00ff00;   /* pure green — R=0,   G=255, B=0   */
color: #0000ff;   /* pure blue  — R=0,   G=0,   B=255 */
color: #ffffff;   /* white      — R=255, G=255, B=255 */
color: #000000;   /* black      — R=0,   G=0,   B=0   */
color: #1572B6;   /* CSS blue                          */

/* 3-digit shorthand — each digit doubles (#RGB = #RRGGBB) */
color: #f00;   /* = #ff0000 red */
color: #fff;   /* = #ffffff white */
color: #369;   /* = #336699 */

/* 8-digit hex with alpha: #RRGGBBAA */
color: #1572B680;   /* CSS blue at 50% opacity */
color: #00000040;   /* black at 25% opacity */

💡

Reading hex colors

#1572B6 — break it into pairs: 15 (red=21), 72 (green=114), B6 (blue=182). More red than green means warmer; more blue than red means cooler. High all-three values = lighter. Low all-three = darker.

RGB and RGBA

rgb() defines colors using red, green, and blue channels as integers (0–255) or percentages. rgba() adds an alpha (opacity) channel from 0 (fully transparent) to 1 (fully opaque).

CSS – RGB and RGBA

/* rgb(red, green, blue) */
color: rgb(21, 114, 182);    /* CSS blue */
color: rgb(255, 99, 71);     /* tomato */
color: rgb(0, 0, 0);         /* black */

/* rgba(red, green, blue, alpha) */
background-color: rgba(21, 114, 182, 0.1);   /* very light blue tint */
background-color: rgba(0, 0, 0, 0.5);        /* 50% black overlay */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* soft shadow */

/* Modern syntax (CSS Color Level 4) — space-separated, / for alpha */
color: rgb(21 114 182);
color: rgb(21 114 182 / 0.5);   /* 50% opacity */
color: rgb(21 114 182 / 50%);   /* same, as percentage */

RGBA is extremely useful for overlays, shadows, and tinted backgrounds where you want the element behind to show through.

HSL and HSLA

HSL stands for Hue, Saturation, Lightness. It is much more intuitive than RGB for choosing and adjusting colors:

Hue — the color wheel position, 0–360° (0=red, 120=green, 240=blue)
Saturation — color intensity, 0% (grey) to 100% (vivid)
Lightness — brightness, 0% (black) to 100% (white), 50% = natural color

CSS – HSL and HSLA

/* hsl(hue, saturation, lightness) */
color: hsl(207, 79%, 40%);    /* #1572B6 — CSS blue */
color: hsl(0, 100%, 50%);     /* pure red */
color: hsl(120, 100%, 35%);   /* vivid green */
color: hsl(0, 0%, 50%);       /* mid grey */

/* Creating a color palette with HSL — change lightness only */
.color-100 { background: hsl(207, 79%, 95%); }  /* lightest */
.color-300 { background: hsl(207, 79%, 70%); }
.color-500 { background: hsl(207, 79%, 50%); }  /* base */
.color-700 { background: hsl(207, 79%, 30%); }
.color-900 { background: hsl(207, 79%, 10%); }  /* darkest */

/* HSLA — with alpha */
background-color: hsla(207, 79%, 40%, 0.1);   /* very light blue */

/* Modern syntax */
color: hsl(207 79% 40%);
color: hsl(207 79% 40% / 0.5);   /* with alpha */

ℹ️

HSL is best for design systems

If you pick one brand color in HSL, you can generate your entire palette by adjusting lightness and saturation while keeping the same hue. This is how most professional design systems (like Tailwind CSS) generate their color scales.

oklch – The Modern Color Format

oklch() is the most advanced CSS color format, available in all modern browsers since 2023. It uses a perceptually uniform color space — meaning equal changes in values produce equal perceived changes in color, unlike RGB or HSL.

CSS – oklch

/* oklch(lightness chroma hue) */
/* lightness: 0–1 (or 0%–100%) */
/* chroma: 0–0.4 (color intensity) */
/* hue: 0–360° */

color: oklch(0.55 0.18 240);    /* similar to CSS blue */
color: oklch(0.7 0.15 60);      /* warm yellow */
color: oklch(0.3 0.0 0);        /* dark grey */

/* oklch with alpha */
color: oklch(0.55 0.18 240 / 0.5);

/* Benefit: accessible color pairs are easier to create
   because lightness is perceptually uniform */
.btn { background: oklch(0.55 0.18 240); color: oklch(0.98 0.01 240); }

Use oklch for new projects targeting modern browsers. Stick with hex or HSL for broader compatibility.

currentColor and Special Values

CSS – Special color values

/* currentColor — uses the element's current color value */
/* Useful for borders, SVG fill, shadows that match text */
.icon {
  color: #1572B6;
  border: 2px solid currentColor;  /* border = same blue */
}

.icon svg {
  fill: currentColor;   /* SVG inherits the parent's color */
}

/* transparent — fully see-through (color: rgba(0,0,0,0)) */
background-color: transparent;
border-color: transparent;

/* inherit — force inheritance of color from parent */
.child { color: inherit; }

/* CSS Custom Properties for colors */
:root {
  --color-primary: #1572B6;
  --color-primary-light: rgba(21, 114, 182, 0.1);
  --color-text: #333;
  --color-muted: #888;
}

h1 { color: var(--color-primary); }
p  { color: var(--color-text); }
.hint { color: var(--color-muted); }

Color Accessibility – Contrast Ratios

Not all color combinations are readable for everyone. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background:

AA (minimum) — 4.5:1 for normal text, 3:1 for large text (18px+ or bold 14px+)
AAA (enhanced) — 7:1 for normal text, 4.5:1 for large text

CSS – Good vs bad contrast examples

/* GOOD — dark text on light background (high contrast) */
.readable { color: #1a1a1a; background-color: #ffffff; }
/* contrast ratio ≈ 19:1 ✅ */

/* GOOD — white text on dark blue */
.btn-primary { color: #ffffff; background-color: #1572B6; }
/* contrast ratio ≈ 4.7:1 ✅ passes AA */

/* BAD — grey text on white (common mistake) */
.bad-contrast { color: #999; background-color: #fff; }
/* contrast ratio ≈ 2.8:1 ❌ fails AA */

/* BAD — yellow text on white */
.worse { color: #FFD43B; background-color: #ffffff; }
/* contrast ratio ≈ 1.3:1 ❌ nearly unreadable */

💡

Tools for checking contrast

Use WebAIM Contrast Checker or browser DevTools (Chrome DevTools shows the contrast ratio when you inspect a text element's color). Never rely on "it looks fine on my screen" — about 8% of men have some form of color vision deficiency.

📋 Summary

Named colors — 147 keywords. Good for prototyping, limited for production.
Hex (#RRGGBB) — most common. #RGB shorthand. #RRGGBBAA with alpha.
RGB/RGBA — rgb(21 114 182). Add / 0.5 for 50% opacity.
HSL/HSLA — most intuitive for palette building. Same hue, vary lightness for scales.
oklch — perceptually uniform, best for modern design systems.
currentColor — inherits the element's color value. Great for SVGs and borders.
CSS Custom Properties — define once in :root, use everywhere with var().
Accessibility — minimum 4.5:1 contrast ratio for normal text (WCAG AA).

Frequently Asked Questions

Which color format should I use in CSS? +

For most projects: HSL for defining design system colors (easy to create palettes) and hex for brand colors provided by designers. Use rgba() or hsl() / alpha when you need transparency. For modern projects targeting latest browsers, oklch is the best choice. Avoid mixing formats unnecessarily — pick one primary format and be consistent.

What is the difference between opacity and rgba? +

The opacity property makes the entire element (including its children and content) transparent. rgba() / hsla() makes only the specific color property transparent — the element's other properties and children remain fully opaque. Example: opacity: 0.5 on a button makes the text transparent too. background-color: rgba(0,0,0,0.5) on the same button only makes the background semi-transparent while keeping the text fully visible.

How do I convert a hex color to RGB? +

Split the hex into three pairs and convert each from base-16 to base-10. For #1572B6: 15→21, 72→114, B6→182. So rgb(21, 114, 182). In practice, use a color picker tool or browser DevTools — you can click on any color in the Styles panel to switch between formats.

What does currentColor do? +

currentColor is a CSS keyword that resolves to the element's current color property value. It is particularly useful for: SVG fill and stroke (so icons automatically match their container's text color), borders that should match the text, and box shadows that are tinted to the text color. It enables color theming with a single color property change.