Runnable CSS Docs: Colors

Q: What color formats does CSS support?

Named colors (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() and color(), plus the keywords transparent and currentColor. Hex, rgb and hsl cover almost all everyday work.

Q: What is the difference between rgb and rgba?

Nothing any more. rgba() is an older alias: current CSS lets rgb() take an alpha value (rgb(37 99 235 / 50%)), and both functions accept the same arguments in all current browsers.

Q: How do I make a color transparent in CSS?

Add an alpha channel: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5), or an 8-digit hex like #2563eb80. Unlike opacity, this fades only that one color, not the whole element.

Q: What does currentColor mean?

It is the value of the element's color property. Using it for a border or an SVG fill makes them follow the text color automatically.

Ways to write a color in CSS

Any property that takes a color (color, background-color, border-color, shadows, SVG fill) accepts the same formats. The first four swatches are the same blue written four ways, and the fifth is a named color that comes close:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

Format	Example	Best for
Named	`tomato`, `rebeccapurple`	Quick tests and prototypes
Hex	`#2563eb`, `#25e`	Copying from design tools
`rgb()`	`rgb(37 99 235)`	Mixing in transparency, working from RGB values
`hsl()`	`hsl(221 83% 53%)`	Making shades and tints of one color
`oklch()`	`oklch(55% 0.2 262)`	Palettes with even perceived lightness
Keywords	`transparent`, `currentColor`	See the sections below

Hex colors

A hex color is # followed by red, green and blue as two hexadecimal digits each, from 00 to ff. Three forms are shortcuts or extensions:

#rgb: each digit is doubled, so #25e is #2255ee.
#rrggbbaa: the last pair is alpha, so #2563eb80 is about 50% opaque.
#rgba: the short form with alpha.

Hex is case insensitive: #2563EB and #2563eb are the same color.

rgb() and rgba()

rgb() takes red, green and blue from 0 to 255 (or 0% to 100%). An optional fourth value after a slash is the alpha, from 0 (invisible) to 1 or 0% to 100%.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() and rgb() are now the same function: both accept both syntaxes and an optional alpha. Old code uses rgba() when it needs transparency, and it keeps working.

hsl(): the easiest format to adjust

hsl() describes a color the way people think about it: a hue from the color wheel, a saturation and a lightness. Keep the hue and change the lightness to get a whole scale:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

The first row keeps hue 221 and saturation 83% and only changes lightness. The second row walks around the color wheel with the same saturation and lightness.

Transparency: alpha vs opacity

An alpha channel makes one color see-through. opacity makes the whole element see-through, text and children included:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent is a keyword for fully transparent black, rgb(0 0 0 / 0). It is the default background of most elements.

currentColor

currentColor equals the element's own color. A button whose border, icon and text all use it changes everything with one declaration:

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

Borders already default to currentColor, which is why border: 2px solid without a color matches the text.

Try any color

Type a color in any format. The browser parses it and shows what it computed; an invalid color leaves the swatch unchanged.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Try tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150) and color-mix(in srgb, #2563eb, white 50%).

Newer color functions

oklch(L C H): lightness, chroma and hue in a space designed so equal lightness looks equally light. Palettes built in it have fewer muddy middle steps than HSL ones.
color-mix(in srgb, A, B 30%): mixes two colors. With white or black it makes tints and shades from a single brand color, and it works with CSS variables: color-mix(in srgb, var(--brand), white 80%).

Both work in current Chrome, Firefox and Safari. Keep brand colors in CSS variables so the formats you pick live in one place.

Common mistakes

Missing # on a hex color. color: 2563eb is invalid and ignored.
Using opacity to make a background transparent. It fades the text too. Use an alpha color.
Mixing separators in the modern syntax. rgb(37 99, 235) is invalid: use all spaces or all commas.
Assuming a named color matches your design. royalblue is not #2563eb. Copy the exact code.
Judging contrast by eye. Check text colors against their background with a contrast checker; 4.5:1 is the minimum for body text.

Frequently Asked Questions

What color formats does CSS support?

Named colors (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() and color(), plus the keywords transparent and currentColor. Hex, rgb and hsl cover almost all everyday work.

What is the difference between rgb and rgba?

Nothing any more. rgba() is an older alias: current CSS lets rgb() take an alpha value (rgb(37 99 235 / 50%)), and both functions accept the same arguments in all current browsers.

How do I make a color transparent in CSS?

Add an alpha channel: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5), or an 8-digit hex like #2563eb80. Unlike opacity, this fades only that one color, not the whole element.

What is HSL in CSS?

Hue, saturation, lightness. Hue is an angle on the color wheel (0 red, 120 green, 240 blue), saturation how vivid it is, and lightness from 0% black to 100% white. It makes lighter and darker shades easy: change only the last number.

What does currentColor mean?

It is the value of the element's color property. Using it for a border or an SVG fill makes them follow the text color automatically.

Related concepts