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 gestalten können.

CSS unterstützt jetzt Farbräume, mit denen auf Farben außerhalb der sRGB-Gamut zugegriffen werden kann. Das bedeutet, dass HD-Bildschirme mit Farben aus HD-Gamuts unterstützt werden können. Diese Unterstützung beinhaltet neue Funktionen zur besseren Nutzung von Farben im Web.

Über CSS auf Farbräume zugreifen

Wir haben bereits eine Reihe von Funktionen, mit denen wir auf Farben in der sRGB-Gamut zugreifen können: rgb(), hsl() und hwb(). In Browsern wird jetzt die Funktion color() unterstützt. Mit dieser normalisierten Methode können Sie auf Farben in einem RGB-Farbraum zugreifen. Dazu gehören sRGB, Display P3 und Rec2020. Im folgenden CSS sehen 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

  • 111
  • 111
  • 113
  • 15

Quelle

Außerdem werden verschiedene Funktionen unterstützt, die mithilfe von lch(), lab(), oklch() und oklab() auf andere Farbräume als sRGB zugreifen können.

Unterstützte Browser

  • 111
  • 111
  • 113
  • 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 jetzt alle Suchmaschinen die Funktion color-mix(). Diese Funktion ermöglicht das Mischen einer Farbe in eine andere in einem beliebigen Farbraum. Im folgenden CSS werden 25% des Blaus im Farbraum srgb gemischt zu Weiß.

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

Unterstützte Browser

  • 111
  • 111
  • 113
  • 16,2

Quelle

Weitere Informationen zu color-mix()

Diese neuen Funktionen und Farbräume bringen lebendige HD-Farben ins Web. Lassen Sie sich davon inspirieren, indem Sie mit dem HD-Farbverlauf-Generator unter gradient.style wunderschöne Farbverläufe erstellen.

Teil der Videoreihe „Neu interoperable“