Erstellen Sie neue Farben basierend auf den Kanälen und Werten einer anderen Farbe.
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">
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.
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.
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* (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* 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))
);
}