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

Alle gängigen Suchmaschinen unterstützen jetzt die neuen CSS-Farbräume und -Funktionen. Finden Sie heraus, wie sie Ihre Designs lebendiger machen können.

Rachel Andrew

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

Über CSS auf Farbräume zugreifen

Es gibt 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 normalisierte Methode für den Zugriff auf Farben in einem RGB-Farbraum. Dazu gehören sRGB, Display P3 und Rec2020. Einige Beispiele finden Sie im folgenden CSS:

.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. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

Quelle

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

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

Quelle

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

Die color-mix()-Funktion

Neben diesen neuen Farbräumen unterstützen jetzt alle Suchmaschinen die Funktion color-mix(). Diese Funktion ermöglicht das Mischen einer Farbe in eine andere in einem der Farbräume. Im folgenden CSS wird im srgb-Farbraum 25% Blau in Weiß gemischt.

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

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 16.2 <ph type="x-smartling-placeholder">

Quelle

Weitere Informationen zu „color-mix()“

Diese neuen Funktionen und Farbräume versprechen brillante HD-Farben im Web. Als Inspiration nutzen Sie den HD-Farbverlaufsgenerator unter gradient.style, um wunderschöne Farbverläufe zu erstellen.