Neue CSS-Farbräume und -Funktionen in allen wichtigen Suchmaschinen

Alle gängigen Engines unterstützen jetzt die neuen CSS-Farbräume und ‑funktionen. Hier erfahren Sie, wie Sie damit Ihre Designs lebendiger gestalten können.

Rachel Andrew

CSS unterstützt jetzt Farbräume, mit denen wir auf Farben außerhalb des sRGB-Farbumfangs zugreifen können. Das bedeutet, dass Sie HD-Displays (High Definition) mit Farben aus HD-Gamuts unterstützen können. Diese Unterstützung umfasst neue Funktionen, mit denen Farben im Web besser genutzt werden können.

Über CSS auf Farbräume zugreifen

Wir haben bereits eine Reihe von Funktionen, mit denen wir auf Farben innerhalb des sRGB-Farbraums zugreifen können: rgb(), hsl() und hwb(). In Browsern wird jetzt die color()-Funktion unterstützt, eine standardisierte Methode, um auf Farben in beliebigen RGB-Farbräumen zuzugreifen. Dazu gehören sRGB, Display P3 und Rec2020. Im folgenden CSS finden Sie einige Beispiele:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Quelle

Außerdem werden mehrere Funktionen unterstützt, die den Zugriff auf andere Farbräume als sRGB über lch(), lab(), oklch() und oklab() ermöglichen.

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Quelle

Weitere Informationen zu diesen verschiedenen Farbräumen finden Sie im High Definition CSS-Farbleitfaden.

Die color-mix()-Funktion

Neben diesen neuen Farbräumen unterstützen alle Engines jetzt auch die Funktion color-mix(). Mit dieser Funktion können Sie eine Farbe in einem beliebigen Farbraum mit einer anderen Farbe mischen. Im folgenden CSS-Code wird im sRGB-Farbraum 25% Blau in Weiß gemischt.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Quelle

Weitere Informationen zu „color-mix()“

Diese neuen Funktionen und Farbräume versprechen lebendige HD-Farben im Web. Als Inspiration können Sie mit dem HD-Gradientengenerator unter gradient.style einige schöne Farbverläufe erstellen.