Ausführbare CSS-Docs: CSS Farben

Q: Welche Farbformate unterstützt CSS?

Farbnamen (red), Hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() und color(), dazu die Schlüsselwörter transparent und currentColor. Hex, rgb und hsl decken fast die ganze Alltagsarbeit ab.

Q: Was ist der Unterschied zwischen rgb und rgba?

Keiner mehr. rgba() ist ein älterer Alias: Aktuelles CSS erlaubt rgb() einen Alphawert (rgb(37 99 235 / 50%)), und beide Funktionen akzeptieren in allen aktuellen Browsern dieselben Argumente.

Q: Wie mache ich eine Farbe in CSS transparent?

Füge einen Alphakanal hinzu: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) oder ein achtstelliges Hex wie #2563eb80. Anders als opacity blendet das nur diese eine Farbe aus, nicht das ganze Element.

Q: Was bedeutet currentColor?

Es ist der Wert der Eigenschaft color des Elements. Nutzt du es für einen Rahmen oder eine SVG-Füllung, folgen sie automatisch der Textfarbe.

Wege, eine Farbe in CSS zu schreiben

Jede Eigenschaft, die eine Farbe annimmt (color, background-color, border-color, Schatten, SVG-fill), akzeptiert dieselben Formate. Die ersten vier Farbfelder sind dasselbe Blau, auf vier Arten geschrieben, und das fünfte ist ein Farbname, der nahe herankommt:

<!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	Beispiel	Am besten für
Name	`tomato`, `rebeccapurple`	Schnelle Tests und Prototypen
Hex	`#2563eb`, `#25e`	Übernahme aus Design-Tools
`rgb()`	`rgb(37 99 235)`	Transparenz einmischen, Arbeit mit RGB-Werten
`hsl()`	`hsl(221 83% 53%)`	Hellere und dunklere Abstufungen einer Farbe
`oklch()`	`oklch(55% 0.2 262)`	Paletten mit gleichmäßig wahrgenommener Helligkeit
Schlüsselwörter	`transparent`, `currentColor`	Siehe die Abschnitte unten

Hex-Farben

Eine Hex-Farbe ist #, gefolgt von Rot, Grün und Blau als je zwei hexadezimale Ziffern, von 00 bis ff. Drei Formen sind Abkürzungen oder Erweiterungen:

#rgb: Jede Ziffer wird verdoppelt, also ist #25e gleich #2255ee.
#rrggbbaa: Das letzte Paar ist Alpha, also ist #2563eb80 etwa zu 50% deckend.
#rgba: die Kurzform mit Alpha.

Bei Hex spielt Groß- und Kleinschreibung keine Rolle: #2563EB und #2563eb sind dieselbe Farbe.

rgb() und rgba()

rgb() nimmt Rot, Grün und Blau von 0 bis 255 (oder 0% bis 100%). Ein optionaler vierter Wert nach einem Schrägstrich ist Alpha, von 0 (unsichtbar) bis 1 oder von 0% bis 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() und rgb() sind inzwischen dieselbe Funktion: Beide akzeptieren beide Schreibweisen und ein optionales Alpha. Alter Code nutzt rgba(), wenn er Transparenz braucht, und das funktioniert weiterhin.

hsl(): das am leichtesten anpassbare Format

hsl() beschreibt eine Farbe so, wie Menschen über Farbe denken: ein Farbton vom Farbkreis, eine Sättigung und eine Helligkeit. Behalte den Farbton und ändere die Helligkeit, und du bekommst eine ganze Skala:

<!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>

Die erste Reihe behält Farbton 221 und Sättigung 83% und ändert nur die Helligkeit. Die zweite Reihe wandert mit gleicher Sättigung und Helligkeit einmal um den Farbkreis.

Transparenz: Alpha vs. opacity

Ein Alphakanal macht eine einzelne Farbe durchsichtig. opacity macht das ganze Element durchsichtig, Text und Kinder inklusive:

<!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 ist ein Schlüsselwort für vollständig transparentes Schwarz, rgb(0 0 0 / 0). Es ist der Standardhintergrund der meisten Elemente.

currentColor

currentColor entspricht der eigenen color des Elements. Ein Button, dessen Rahmen, Icon und Text alle darauf zugreifen, ändert alles mit einer einzigen Deklaration:

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

Rahmen haben bereits standardmäßig currentColor, deshalb passt border: 2px solid ohne Farbe zum Text.

Probier eine beliebige Farbe aus

Tipp eine Farbe in einem beliebigen Format ein. Der Browser parst sie und zeigt, was er berechnet hat; eine ungültige Farbe lässt das Farbfeld unverändert.

<!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>

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

Neuere Farbfunktionen

oklch(L C H): Helligkeit, Chroma und Farbton in einem Farbraum, der so gebaut ist, dass gleiche Helligkeit auch gleich hell aussieht. Paletten darin haben weniger trübe Zwischenstufen als HSL-Paletten.
color-mix(in srgb, A, B 30%): mischt zwei Farben. Mit white oder black erzeugt es hellere und dunklere Abstufungen aus einer einzigen Markenfarbe, und es funktioniert mit CSS-Variablen: color-mix(in srgb, var(--brand), white 80%).

Beide funktionieren in aktuellen Versionen von Chrome, Firefox und Safari. Halte Markenfarben in CSS Variablen, damit die gewählten Formate an einer Stelle stehen.

Häufige Fehler

Fehlendes # bei einer Hex-Farbe. color: 2563eb ist ungültig und wird ignoriert.
opacity nutzen, um einen Hintergrund transparent zu machen. Das blendet auch den Text aus. Nimm eine Farbe mit Alpha.
Trennzeichen in der modernen Syntax mischen. rgb(37 99, 235) ist ungültig: entweder nur Leerzeichen oder nur Kommas.
Annehmen, dass ein Farbname zu deinem Design passt. royalblue ist nicht #2563eb. Kopier den exakten Code.
Kontrast nach Augenmaß beurteilen. Prüf Textfarben gegen ihren Hintergrund mit einem Kontrast-Checker; 4,5:1 ist das Minimum für Fließtext.

Häufig gestellte Fragen

Welche Farbformate unterstützt CSS?

Farbnamen (red), Hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() und color(), dazu die Schlüsselwörter transparent und currentColor. Hex, rgb und hsl decken fast die ganze Alltagsarbeit ab.

Was ist der Unterschied zwischen rgb und rgba?

Keiner mehr. rgba() ist ein älterer Alias: Aktuelles CSS erlaubt rgb() einen Alphawert (rgb(37 99 235 / 50%)), und beide Funktionen akzeptieren in allen aktuellen Browsern dieselben Argumente.

Wie mache ich eine Farbe in CSS transparent?

Füge einen Alphakanal hinzu: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) oder ein achtstelliges Hex wie #2563eb80. Anders als opacity blendet das nur diese eine Farbe aus, nicht das ganze Element.

Was ist HSL in CSS?

Hue, Saturation, Lightness: Farbton, Sättigung, Helligkeit. Der Farbton ist ein Winkel auf dem Farbkreis (0 Rot, 120 Grün, 240 Blau), die Sättigung gibt an, wie kräftig die Farbe ist, und die Helligkeit reicht von 0% Schwarz bis 100% Weiß. Hellere und dunklere Abstufungen sind damit einfach: Du änderst nur die letzte Zahl.

Was bedeutet currentColor?

Es ist der Wert der Eigenschaft color des Elements. Nutzt du es für einen Rahmen oder eine SVG-Füllung, folgen sie automatisch der Textfarbe.

Verwandte Konzepte