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);
}
Außerdem werden verschiedene Funktionen unterstützt, die mithilfe von lch(), lab(), oklch() und oklab() auf andere Farbräume als sRGB zugreifen können.
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);
}
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“