CSS-Syntax für relative Farben

Erstellen Sie neue Farben basierend auf den Kanälen und Werten einer anderen Farbe.

Adam Argyle

In Chrome 119 ist eine sehr leistungsstarke Farbfunktion aus CSS Color Level 5 enthalten. Relative Farbsyntax einen glatten Pfad für die Farbbearbeitung in CSS, der Möglichkeiten bietet, Autoren und Designschaffenden:

• Lighten
• Abdunkeln
• Sättigung
• Entsättigung
• Chroma-Boost
• Deckkraft anpassen
• Invertieren
• Ergänzung
• Umwandeln
• Kontrast
• Farbvorlagen <ph type="x-smartling-placeholder">
  </ph>
  • Einfarbig
  • Analog
  • Triad
  • Tetradisch
  • Einfarbig mit Farbtonrotation

Vor der relativen Farbsyntax müssen Sie Benutzerdefinierte Eigenschaften für die Channels einer Farbe (normalerweise HSL) erstellen und in eine endgültige Farbe und eine endgültige Variante. Das bedeutet, viele die schnell lästig werden können.

:root {
  --brand-hue: 300deg;
  --brand-saturation: 75%;
  --brand-lightness: 50%;

  --brand-hsl:
    var(--brand-hue)
    var(--brand-saturation)
    var(--brand-lightness);

  --brand-color: hsl(var(--brand-hsl));

  /* all this work just so I can set the opacity to 50% in a variant */
  --brand-color-variant: hsl(var(--brand-hsl) / 50%);
}

Nach der relativen Farbsyntax können Sie eine Markenfarbe mit einem beliebigen Farbraum erstellen. oder der benötigten Syntax und erstellen Sie eine Variante mit halber Deckkraft mit viel weniger Code. Es ist auch die Absicht der Stile und des Systems.

:root {
  --brand-color: hsl(300deg 75% 50%);
  --brand-color-variant: hsl(from var(--brand-color) h s l / 50%);
}

In diesem Beitrag erfahren Sie mehr über die Syntax und häufige Farbmanipulationen.

Wenn Sie Videos bevorzugen, wird bei dieser GUI-Challenge fast der gesamte folgende Artikel behandelt.

Syntax Übersicht

Das Ziel der relativen Farbsyntax besteht darin, eine Farbe von einer anderen Farbe. Die Grundfarbe wird als Ausgangsfarbe bezeichnet. Dies ist die Farbe, kommt nach dem neuen Keyword from. Der Browser zeigt konvertieren und die ursprüngliche Farbe auseinander- die Teile als Variablen zur Verwendung in der neuen Farbdefinition.

Das obige Diagramm zeigt die Ausgangsfarbe green, die in den den Farbraum der neuen Farbe, in einzelne Zahlen umgewandelt, dargestellt als r, g, b und alpha Variablen, die dann direkt als Werte für eine neue rgb()-Farbe verwendet werden.

Diese Abbildung zeigt zwar Aufschlüsselung, Prozess und Variablen, wenn Sie die Farbe ändern. Die Variablen werden unverändert in die Farbe zurückgesetzt, sodass ein grünes Standbild entsteht.

Hinweis:Weitere Informationen zum Festlegen von Farben finden Sie in der Übersicht zu HD-Farben in diesem Leitfaden. die Sie brauchen. In diesem Beitrag wird vorausgesetzt, dass Sie mit funktionalen Farben vertraut sind. Farbräume wie OKLCH und Farbgamuts.

Das Keyword from

Der erste Teil der Syntax, den Sie erlernen müssen, ist der Teil from <color>, der zu zum Angeben einer Farbe. Dies geschieht unmittelbar, bevor Sie die Werte angeben. Hier ist der Code Beispiel, bei dem nur from green direkt vor den Werten hinzugefügt wurde. für rgb() angegeben sind.

.syntax-introduction_same-colors {
  color: green;
  color: rgb(0 128 0);
  color: rgb(from green r g b);    /* result = rgb(0 128 0) */
}

Das from-Keyword, wenn es als erster Parameter in funktionaler Notation betrachtet wird, verwandelt die Farbdefinition in eine relative Farbe! Nach dem from-Keyword wird das Preisvergleichsportal erwartet eine Farbe, eine Farbe, die zur nächsten Farbe passt.

Farbkonvertierung

Vereinfacht gesagt, wandelt sie die Grün-Kanäle in die Kanäle r g und b um, um sie in einem neuen Farbe.

rgb(from green r g b)           /* r=0 g=128 b=0 */
rgb(from rgb(0 128 0) r g b);   /* r=0 g=128 b=0 */

Farben aus benutzerdefinierten Eigenschaften

rgb from green ist sehr klar und leicht verständlich. Aus diesem Grund benutzerdefinierte Eigenschaften und die relative Farbsyntax sind sehr gut zusammenpassen, da Sie kann das Geheimnis der Farbe from befreien. Außerdem müssen Sie in der Regel nicht der benutzerdefinierten Eigenschaft Farbe kennen, wenn Sie eine neue eine Farbe in einem Format Ihrer Wahl.

rgb(from rgb(255 105 180) r g b) /* ????? */
rgb(from var(--hotpink) r g b)   /* clear */

In Ihrem bevorzugten Farbraum arbeiten

Den Farbraum können Sie mit einer von Ihnen gewählten funktionalen Farbnotation wählen.

rgb(from hsl(120 100% 25%) r g b)     /*  r=0   g=128  b=0    */
hsl(from hsl(120 100% 25%) h s l)     /*  h=120 s=100% l=25%  */
hwb(from hsl(120 100% 25%) h w b)     /*  h=120 w=0%   b=50%  */
lch(from hsl(120 100% 25%) l c h)     /*  l=46  c=68   h=134  */

Die relative Farbsyntax hat diesen Konvertierungsschritt: Die Farbe nach from ist in den Farbraum konvertiert, wie am Anfang des relativen Farbe. Eingabe und Ausgabe müssen nicht übereinstimmen, was sehr befreiend ist.

Die Möglichkeit, einen Farbraum auszuwählen, ermutigt ebenso, wie die Wahl einer Farbe liegt der Fokus eher auf der Art des Farbwechsels als auf Einstellung. Die Einstellung bezieht sich auf die Ergebnisse, nicht auf das Farbformat oder den Kanal Typen. In den Abschnitten zu Anwendungsfällen wird dies viel deutlicher. unterschiedliche Farbräume eignen sich für unterschiedliche Aufgaben.

Variablen kombinieren, anpassen, weglassen und wiederholen

Diese Syntax ist seltsam, aber faszinierend: Die Variablen müssen nicht in eine bestimmte Reihenfolge bringen und wiederholt werden kann.

rgb(from green g g g)    /* rgb(128 128 128) */
rgb(from green b r g)    /* rgb(0 0 128) */
rgb(from green 0 0 g)    /* rgb(0 0 128) */

Deckkraft als Variable

Die Syntax stellt die Deckkraft auch als Variable mit dem Namen alpha bereit. Das ist optional, und steht in der funktionalen Farbnotation hinter /.

rgb(from #00800080 r g b / alpha)             /* alpha=50% */
rgb(from rgba(0,128,0,.5) r g b / alpha)      /* alpha=50% */
rgb(from rgb(0 128 0 / 50%) r g b / alpha)    /* alpha=50% */

calc() oder andere CSS-Funktionen für die Variablen verwenden

Bisher haben wir immer wieder die Farbe Grün gezeichnet. Lerne die und sich mit den Konvertierungs- und Desstrukturierungsschritten vertraut machen. Jetzt ist die Variablen zu ändern, die Ausgabe so zu ändern, dass sie nicht mehr Eingabe.

green                              /*  h=120 s=100% l=25%  */
hsl(from green calc(h * 2) s l)    /*  h=240 s=100% l=25%  */

Jetzt ist es dunkelblau! Der Farbton wurde verdoppelt, wobei der Farbton 120 in 240, wobei die Farbe komplett geändert wird. Dadurch wurde der Farbton entlang der Farbe gedreht. Rad, ein hübscher Trick mit zylinderförmigen Farbräumen, der ganz einfach ist. wie HSL, HWB LCH und OKLCH.

Probieren Sie das Tool relative Farbsyntax für Kanalwerte aus, um die Werte von Kanälen visuell darzustellen, sodass Sie Berechnungen problemlos durchführen können, ohne die Spezifikation zu erraten oder sich die Spezifikationen merken zu müssen. Sie zeigt jeden Kanalwert basierend auf der von Ihnen angegebenen Syntax an, sodass Sie genau wissen, mit welchen Werten Sie experimentieren können.

Browserunterstützung prüfen

@supports (color: rgb(from white r g b)) {
  /* safe to use relative color syntax */
}

Anwendungsfälle und Demos

In den folgenden Beispielen und Anwendungsfällen gibt es viele alternative Syntaxen. ähnliche oder die gleichen Ergebnisse. Die Abweichungen gehen auf die Farbräume und die die sie anbieten.

Außerdem werden in vielen Beispielen Farbanpassungen mit der Formulierung by und to. Eine geänderte Farbe by ist eine relative Farbänderung. eine Änderung, bei der die der Variablen und nimmt eine Anpassung basierend auf ihrem aktuellen Wert vor. A Die geänderte Farbe to ist eine absolute Farbänderung. eine Änderung, bei der nicht die Wert der Variable und gibt stattdessen einen ganz neuen Wert an.

Alle Demos finden Sie in dieser Codepen-Sammlung.

Farbe aufhellen

OKLCH, OKLAB XYZ oder sRGB-Farbräume bieten vorhersehbare Ergebnisse beim Aufhellen von Farben.

Hinweis:Weitere Informationen zu vorhersehbaren Ergebnissen für Gradienten finden Sie in diesem Folge des CSS-Podcasts.

Um einen gewissen Grad aufhellen

Im folgenden Beispiel für .lighten-by-25 wird die Farbe blue verwendet und in OKLCH, hellt dann das Blau auf, indem der l-Kanal (Helligkeit) durch Multiplizieren erhöht wird den aktuellen Wert um 1.25. Dadurch wird die blaue Helligkeit um 25 % in Richtung Weiß verschoben.

.lighten-by-25 {
  background: oklch(from blue calc(l * 1.25) c h);
}

Auf einen bestimmten Wert aufhellen

Im folgenden Beispiel verwendet .lighten-to-75 nicht den Kanal l, um blue aufhellen, ersetzt er stattdessen den Wert vollständig durch 75%.

.lighten-to-75 {
  background: oklch(from blue 75% c h);
}

Farbe abdunkeln

Dieselben Farbräume, die eine Farbe effektiv aufhellen, eignen sich auch für eine dunklere Farbe.

Um einen gewissen Grad abdunkeln

Im folgenden Beispiel wandelt .darken-by-25 die Farbe Blau in OKLCH, verdunkelt dann das Blau, indem der l-Kanal (Helligkeit) um 25% verringert wird Multiplizieren Sie den Wert mit .75. Dadurch wird die Farbe Blau um 25 % in Richtung Schwarz verschoben.

.darken-by-25 {
  background: oklch(from blue calc(l * .75) c h);
}

Auf einen bestimmten Wert abdunkeln

Im folgenden Beispiel für .darken-to-25 wird der Kanal l nicht zum Verdunkeln verwendet blue enthält, wird der Wert stattdessen vollständig durch 25% ersetzt.

.darken-to-25 {
  background: oklch(from blue 25% c h);
}

Farbe sättigen

Sättigung um einen bestimmten Wert

Im folgenden Beispiel für .saturate-by-50 wird der s aus hsl() verwendet, um Die Dynamik von orchid um einen relativen 50%.

.saturate-by-50 {
  background: hsl(from orchid h calc(s * 1.5) l);
}

Sättigung bis zu einem bestimmten Wert

Im folgenden Beispiel verwendet .saturate-to-100 nicht den Kanal s von hsl() enthält, gibt er stattdessen einen gewünschten Sättigungswert an. In diesem Beispiel Die Sättigung wird auf 100% erhöht.

.saturate-to-100 {
  background: hsl(from orchid h 100% l);
}

Farben entsättigen

Um einen bestimmten Wert entsättigen

Im folgenden Beispiel für .desaturate-by-half wird s von hsl() verwendet, um die Anzahl der die Sättigung von indigo um die Hälfte.

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Auf einen bestimmten Wert entsättigen

Anstatt die Sättigung um einen bestimmten Betrag zu reduzieren, können Sie die Sättigung auf einen bestimmten Wert. Mit dem folgenden Beispiel für .desaturate-to-25 wird eine neue Farbe basierend auf indigo, legt jedoch die Sättigung auf 25 % fest.

.desaturate-to-25 {
  background: hsl(from indigo h 25% l);
}

Chroma Boost eine Farbe

Dieser Effekt ähnelt der Sättigung einer Farbe, unterscheidet sich jedoch in einigen . Zunächst handelt es sich um eine chroma- und nicht um eine saturation-Änderung. da die Farbräume, die in einen hohen Dynamikbereich hineinwachsen können, Sättigung. Die Farbräume mit chroma sind High Dynamic Range und ermöglicht es Autoren, die Farbvibration weiter zu verstärken, als die Sättigung sogar in der Lage sind.

.increase-chroma {
  background: oklch(from orange l calc(c + .1) h);
}

Deckkraft einer Farbe anpassen

Das Erstellen einer halbtransparenten Variante einer Farbe ist eine der am häufigsten verwendeten Farben in Designsystemen vorgenommene Anpassungen. Siehe das Beispiel in der Einführung dieser Falls Sie ihn verpasst haben, beschreibt er den Problembereich wirklich gut.

Deckkraft um einen bestimmten Wert anpassen

.decrease-opacity-by-25 {
  background: rgb(from lime r g b / calc(alpha / 2));
}

Deckkraft auf einen bestimmten Wert festlegen

.decrease-opacity-to-25 {
  background: rgb(from lime r g b / 25%);
}

Farbe umkehren

Die Farbumkehr ist eine häufig verwendete Farbanpassungsfunktion in Farbbibliotheken. Eine Möglichkeit, dies zu erreichen, besteht darin, eine Farbe in das RGB-Format umzuwandeln und diese Werte dann zu subtrahieren Wert 1 des Channels an.

.invert-each-rgb-channel {
  background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
}

Eine Farbe ergänzen

Wenn Ihr Ziel nicht darin bestand, eine Farbe umzukehren, sondern sie zu ergänzen, dann die Rotation ist wahrscheinlich das, wonach Sie suchen. Wählen Sie einen Farbraum, der hue als Winkel und verwenden Sie dann calc(), um den Farbton um den gewünschten Wert zu drehen. Die Komplementärfarbe einer Farbe wird durch eine halbe Drehung ermittelt, in diesem Fall Sie können den Channel h um 180 addieren oder davon subtrahieren, um das Ergebnis zu erzielen.

.complementary-color {
  background: hsl(from blue calc(h + 180) s l);
}

Farben kontrastieren

Um zugängliche Farbkontrastverhältnisse zu erzielen, sollten Sie L&midast; (Lstar) Dabei wird der (ungefähr) wahrnehmend einheitliche Helligkeitskanal (L) von LCH und OKLCH, in einem calc(). Je nachdem, ob die Ausrichtung niedrig, mittel oder hoch ist L&midast; liegt der Wert etwa bei ~40, ~50 oder ~60.

Diese Technik funktioniert gut für alle Farbtöne in LCH oder OKLCH.

Dunklere Farbe kontrastieren

Die Klasse .well-contrasting-darker-color veranschaulicht L* mit einem Delta von 60. Da es sich bei der ursprünglichen Farbe um eine dunkle Farbe (geringe Helligkeit) handelt, werden 60% (0,6) mit dem Helligkeitskanal. Diese Technik wird verwendet, um einen guten Kontrast, denselben Farbton, dunkle Textfarbe auf hellem Hintergrund.

.well-contrasting-darker-color {
  background: darkred;
  color: oklch(from darkred calc(l + .60) c h);
}

Hellere Farbe kontrastieren

Die Klasse .well-contrasting-lighter-color zeigt L* mit einem Delta von 60 %. ebenfalls. Da die Originalfarbe eine helle Farbe (hohe Helligkeit) ist, steht 0,60 für vom Helligkeitskanal subtrahiert.

.well-contrasting-lighter-color {
  background: lightpink;
  color: oklch(from lightpink calc(l - .60) c h);
}

Farbpaletten

Die relative Farbsyntax eignet sich sehr gut zum Erstellen von Farbvorlagen. Besonders wichtig ist es, aufgrund der Anzahl der verfügbaren Farbräume nützlich und leistungsstark sind. Die folgenden In den Beispielen wird OKLCH verwendet, da der Helligkeitskanal zuverlässig ist und der Farbton kann ohne Nebeneffekte gedreht werden. Das letzte Beispiel zeigt eine eine Kombination aus Anpassungen für Helligkeit und Farbton, um ein interessanteres Ergebnis!

Öffnen Sie dazu den Quellcode des Beispiels und ändern Sie --base-color zu wie dynamisch diese Farbpaletten sind. Das macht Spaß!

Wenn Sie Videos mögen, finden Sie hier detaillierte Informationen zum Erstellen von Farbvorlagen in CSS mit OKLCH auf YouTube.

Einfarbige Farbpaletten

Eine monochromatische Palette wird erstellt, indem alle denselben Farbton, mit Schwankungen in Helligkeit und Dunkelheit. Die mittlere Farbe ist die Quellfarbe für die Palette, bei der zwei helle und zwei dunklere Varianten zu verstehen.

:root {
  --base-color: deeppink;

  --color-0: oklch(from var(--base-color) calc(l + .20) c h); /* lightest */
  --color-1: oklch(from var(--base-color) calc(l + .10) c h);
  --color-2: var(--base-color);
  --color-3: oklch(from var(--base-color) calc(l - .10) c h);
  --color-4: oklch(from var(--base-color) calc(l - .20) c h); /* darkest */
}

Probieren Sie eine Reihe von Paletten aus, die mit relativer Farbsyntax und OKLCH erstellt wurden.

Open Props, eine Bibliothek mit kostenlosen CSS-Variablen, bietet Farbpaletten, die mit dieser Strategie erstellt wurden, und machen sie mit einem zu importieren. Sie sind alle in einer Farbe gestaltet, die du anpassbar machen kannst. Du musst nur eine Farbe und es spuckt eine Palette!

Analoge Farbpaletten

Da die Farbtonrotation mit OKLCH und HSL so einfach ist, ist es einfach, eine analogen Farbpalette an. Drehen Sie den Farbton um den Betrag, der Ihnen gefällt, und ändern Sie die Grundfarbe, und sehen, wie der Browser neue Farbvorlagen erstellt.

:root {
  --base-color: blue;

  --primary:   var(--base-color);
  --secondary: oklch(from var(--base-color) l c calc(h - 45));
  --tertiary:  oklch(from var(--base-color) l c calc(h + 45));
}

Triadische Farbpaletten

Ähnlich wie Komplementärfarben bieten triadische Farbpaletten sind gegensätzliche, aber harmonische Farbtonrotationen mit einer Grundfarbe. Dabei gilt: Die Komplementärfarbe befindet sich auf der gegenüberliegenden Seite einer Farbe, wie eine gerade Linie. durch die Mitte des Farbrads gezeichnet, sind triadische Paletten wie Liniendreieck mit zwei Farben, die gleichmäßig von einer Grundfarbe gedreht sind. Drehen Sie dazu den Farbton 120deg.

Dies ist eine leichte Vereinfachung der Farbtheorie, aber sie reicht aus, um beginnen Sie mit den komplexeren triadischen Farbvorlagen.

:root {
  --base-color: yellow;
  --triad-1: oklch(from var(--base-color) l c calc(h - 120));
  --triad-2: oklch(from var(--base-color) l c calc(h + 120));
}

Tetradische Farbpaletten

Tetradische Farbpaletten sind vier Farben, die gleichmäßig um das Farbrad verteilt sind, wodurch einer Palette ohne klaren dominanten Wert. Sie können es sich auch vorstellen, Komplementärfarben. Mit Bedacht eingesetzt kann er sehr aussagekräftig sein.

Dies ist eine leichte Vereinfachung der Farbtheorie, aber sie reicht aus, um beginnen Sie mit den komplexeren tetradischen Farbvorlagen.

:root {
  --base-color: lime;

  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) l c calc(h + 90));
  --color-3: oklch(from var(--base-color) l c calc(h + 180));
  --color-4: oklch(from var(--base-color) l c calc(h + 270));
}

Einfarbig mit leichter Farbrotation

Viele Farbexperten halten diesen Trick auf. Das Problem ist, einfarbige Farbskala zu verwenden, kann ziemlich langweilig sein. Die Lösung besteht darin, entweder ein Rotation eines kleinen oder großen Farbtons in jede neue Farbe, wenn sich die Helligkeit ändert.

Im folgenden Beispiel wird die Helligkeit jedes Musters um 10% verringert und den Farbton um 10 Grad. Das Ergebnis ist eine Palette von Hotpink zu Indigoblau, wie ein Farbverlauf.

:root {
  --base-color: deeppink;

  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) calc(l - .10) c calc(h - 10));
  --color-3: oklch(from var(--base-color) calc(l - .20) c calc(h - 20));
  --color-4: oklch(from var(--base-color) calc(l - .30) c calc(h - 30));
  --color-5: oklch(from var(--base-color) calc(l - .40) c calc(h - 40));
}

Teste diese mit OKLCH und Farbtonrotation erstellte Bestenliste

Die folgende Bestenlisten-Oberfläche verwendet diese Farbrotationsstrategie. Jede Liste -Element verfolgt seinen Index im Dokument als Variable mit dem Namen --i. Dieser Index ist werden dann Chroma, Helligkeit und Farbton angepasst. Die Anpassung ist nur um 5% oder 5deg, viel subtiler als das obige Beispiel mit Deeppink. und achten Sie darauf, warum diese Bestenliste Eleganz.

Vergessen Sie nicht, den Farbton im Schieberegler unter der Bestenliste zu ändern. mit relativer Farbsyntax schöne Farbmomente schaffen.

li {
  --_bg: oklch(
    /* decrease lightness as list grows */
    calc(75% - (var(--i) * 5%))

    /* decrease chroma as list grows */
    calc(.2 - (var(--i) * .01))

    /* lightly rotate the hue as the list grows */
    calc(var(--hue) - (var(--i) + 5))
  );
}