Veröffentlicht am 11. Dezember 2025
Sie haben also eine Website, die Sie erstellen oder neu gestalten möchten. Vielleicht haben Sie einige Kernfarben im Sinn und überlegen, wie Sie schnell ein Design basierend auf diesen Farben implementieren können.
Sie benötigen Ihre Primärfarbe, aber auch Farben für Aktionen, Hover-Zustände, Fehler und andere Anforderungen an die Benutzeroberfläche. Was ist mit den Optionen für den hellen und den dunklen Modus? Plötzlich benötigen Sie viele Farben, was überwältigend sein kann.
Die gute Nachricht ist, dass Baseline-Funktionen Ihnen beim Erstellen einer Palette in Bezug auf die Farb-Tokens, die Ihre Website definieren, und beim Wechseln zwischen Farbmodi viel Arbeit abnehmen können. Einige dieser Techniken können Sie sich in der vorgestellten Demo ansehen, einer Playlist mit Farbthemen auf der fiktiven Website von Baseline Radio.
Basis mit relativen Farben erstellen
Wenn Sie eine Idee für eine Primärfarbe für Ihr Design haben, können Sie mit etwas grundlegender Farbtheorie und der relativen Farbsyntax von CSS schnell eine Farbpalette für Ihr Design generieren.
Angenommen, Ihre Grundfarbe ist ein Blauton, den Sie zuerst in Ihrem bevorzugten Farbformat definieren können. Anschließend können Sie mit einer beliebigen Farbfunktion neue Farben relativ zu Ihrer Grundfarbe erstellen:
html {
--base-color: oklch(43.7% 0.075 224);
}
Die benutzerdefinierte Property --base-color wird mit der Farbfunktion oklch() erstellt. OkLCh ist die zylindrische Form des Oklab-Farbraums und definiert Werte für drei Kanäle: L (Helligkeit), C (Chroma), H (Farbton) sowie einen optionalen Alphakanal zur Steuerung der Transparenz.
OkLCh ist ein gutes Format für diese Art der Farbbearbeitung, da es auf wahrnehmbare Einheitlichkeit ausgelegt ist. Wenn Sie beispielsweise nur den Farbton einer Farbe anpassen, sollte die resultierende Farbe eine ähnliche wahrgenommene Helligkeit und Chroma wie die Originalfarbe haben. Das ist besonders nützlich, um unerwartete Kontrastprobleme zu vermeiden.
Wenn Sie die Helligkeit und Chroma von --base-color beibehalten, können Sie den Farbton um 120 Grad in beide Richtungen anpassen, um eine triadische Palette zu erhalten.
html {
/* ... */
--triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
--triadic-color-secondary: oklch(from var(--base-color) l c calc(h - 120));
}
Wie hier zu sehen ist, wird bei der relativen Farbsyntax eine Farbfunktion verwendet, die mit dem Keyword from auf eine Ursprungsfarbe (--base-color in diesem Beispiel) verweist. Die jeweiligen Channels des Farbraums werden dann basierend auf der ausgewählten Ausgabefarbe angepasst, die in diesem Fall ebenfalls OkLCh ist.
Die resultierende Ausgabe liefert ein dunkles Rosa für --accent-color und einen Goldton für --highlight-color, beide mit derselben Helligkeit und Chroma wie das ursprüngliche --base-color.
html {
/* ... */
--accent-color: var(--triadic-color-primary);
--highlight-color: var(--triadic-color-secondary);
}
html {
/* Input color in the rgb color space*/
--base-color: teal;
/* Output color in oklch. Computes to oklch(0.543123 0.0927099 314.769) */
--triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
}
Bei einer Komplementärfarbe wird dem Farbtonwinkel ein Wert von 180 Grad hinzugefügt.
html {
/* ... */
--complement-color: oklch(from var(--base-color) l c calc(h + 180));
--border-highlight: var(--complement-color);
}
Für einen Hover-Zustand in Ihrer Benutzeroberfläche möchten Sie möglicherweise eine hellere Version einer bestimmten Farbe ausgeben. Dazu müssten Sie den Wert des Helligkeitskanals erhöhen. Für einen aktiven Status können Sie die Transparenz anpassen, indem Sie den Alphakanal anpassen, oder ihn verdunkeln, indem Sie den Wert des Helligkeitskanals verringern.
html {
/* Darken the --base-color by 15% */
--base-color-darkened: oklch(from var(--base-color) calc(l * 0.85) c h);
/* Assign this color a meaningful variable name */
--action-color: var(--base-color-darkened);
/* Lighten the --action-color by 15% */
--action-color-light: oklch(from var(--action-color) calc(l * 1.15) c h);
/* Darken the --action-color by 10% */
--action-color-dark: oklch(from var(--action-color) calc(l * 0.9) c h);
}
Hier leiten wir die --action-color aus der --base-color ab und verwenden sie für Schaltflächen und Links. Das --action-color hat zwei Varianten – heller und dunkler –, die auch dann angewendet würden, wenn das --action-color relativ zu einer anderen Farbe als dem --base-color geändert würde.
Sie können Channels mit einer mathematischen Funktion wie calc() anpassen oder den Channel vollständig durch einen neuen Wert ersetzen. Unveränderte Channels werden durch die entsprechenden Buchstaben dargestellt (z. B. l für einen unveränderten Helligkeitswert).
Farben mit color-mix() mischen
Für andere Farbvarianten können Sie einen ähnlichen Ansatz wählen und andere Channels der benutzerdefinierten Property --base-color anpassen. Oder Sie verwenden color-mix(), um anderen Aspekten Ihres Designs einen Hauch der Grundfarbe zu verleihen.
Die Farbe --border-color ist eine Mischung aus der Basisfarbe und der benannten Farbe grey, die im Farbraum oklab interpoliert wird. Wenn diese Methode zur Farbintegration verwendet wird, werden wahrnehmungsbezogen einheitliche Ergebnisse erzielt.
html {
--base-mix-grey-50: color-mix(in oklab, var(--base-color), grey);
--border-color: var(--base-mix-grey-50);
}
Standardmäßig sind das 50% jeder Farbe. Sie können jedoch die eine oder andere Farbe stärker oder weniger stark hervorheben, indem Sie ihr prozentuales Gewicht anpassen.
html {
--background-mix-base-80: color-mix(in oklab,
var(--background-color) 80%,
var(--base-color));
--surface-light: var(--background-mix-base-80);
}
Eine Alternative zum Hinzufügen von mehr Farbe zu einem Element besteht darin, den Chroma-Kanal mit der relativen Farbsyntax anzupassen. Die Rahmen der Texteingaben im Kontaktformular sind etwas farbenfroher, wenn sie fokussiert sind.
[data-input*="text"] {
--focus-ring: transparent;
/* ... */
&:focus {
--focus-ring: oklch(from var(--border-color) l calc(c + 0.1) h);
}
}
Hellen und dunklen Modus aktivieren
Wenn Sie eine Reihe von Farben haben, mit denen Sie arbeiten können, benötigen Sie eine effiziente Möglichkeit, verschiedene Farben für den hellen und den dunklen Modus anzuwenden.
Unterstützung für helle und dunkle Designs mit der Property color-scheme signalisieren
Mit der color-scheme-Eigenschaft können Sie dem Browser sofort mitteilen, dass Ihre Website im hellen, dunklen oder in beiden Modi angezeigt werden kann. Mit dieser Property wird dem Browser mitgeteilt, in welchen Farbschemas ein Element gut gerendert werden kann.
html {
color-scheme: light dark;
}
color-scheme: light dark für das Pseudoelement :root oder das Element html festlegen:
- Teilt dem Browser mit, dass Ihre Seite im hellen oder dunklen Modus angezeigt werden kann.
- Ändert die Standardfarben der Browser-Benutzeroberfläche entsprechend der jeweiligen Betriebssystemeinstellung.
Damit User-Agents früher darüber informiert werden, dass Ihre Seite den hellen und den dunklen Modus unterstützt, können Sie die Unterstützung für das Umschalten des Farbschemas auch signalisieren, indem Sie ein <meta>-Element in den <head> des Dokuments einfügen.
<head>
<!-- ... -->
<meta name="color-scheme" content="light dark">
</head>
„Helle“ und „dunkle“ Varianten mit der Funktion light-dark() festlegen
Als Autor sind Sie es vielleicht gewohnt, die Farben einer Seite mit einer prefers-color-scheme @media-Anfrage festzulegen.
@media (prefers-color-scheme: light) {
html {
--background-color: oklch(95.5% 0 162);
--text-color: black;
}
}
@media (prefers-color-scheme: dark) {
html {
--background-color: oklch(22.635% 0.01351 291.83);
--text-color: white;
}
}
Das funktioniert gut für Farben und Stile, die vom Autor gesteuert werden. Wie im vorherigen Abschnitt erwähnt, benötigen Sie jedoch weiterhin color-scheme, um die Farben der Browser-Benutzeroberfläche zu aktualisieren.
Wenn Sie die Farben der Seite mit einer prefers-color-scheme-Abfrage ändern, bedeutet das auch eine gewisse Codeduplikation, da Sie die Farben für jeden Modus separat definieren müssen.
Wenn color-scheme für die gesamte Seite (oder bestimmte Elemente) festgelegt ist, können Sie mit der Funktion light-dark() Farben für jeden Modus in einer Zeile Code festlegen.
Die Funktion akzeptiert zwei Farben. Die erste wird verwendet, wenn das Farbschema auf „hell“ festgelegt ist, die zweite, wenn das Farbschema auf „dunkel“ festgelegt ist.
html {
color-scheme: light dark;
/* Color custom property values for both light and dark modes */
--base-color: light-dark(oklch(43.7% 0.075 224), oklch(89.2% 0.069 224));
--background-color: light-dark(oklch(95.5% 0 162), oklch(22.635% 0.01351 291.83));
--accent-color: oklch(from var(--base-color) l c calc(h + 120));
--active-color: light-dark(var(--action-color-light), var(--action-color-dark));
/* ... */
}
Wie bei jeder benutzerdefinierten Eigenschaft können die light-dark()-Einstellungen für Ihre Farben global oder in bestimmten Komponenten festgelegt und dann nach Bedarf an anderer Stelle verwendet werden.
/* custom property usage */
body {
background-color: var(--background-color);
/* ... */
}
:any-link {
/* ... */
text-decoration-color: var(--accent-color);
}
Nutzern mit integrierter Designauswahl die Kontrolle überlassen
Es ist toll, wenn sich ein Design an die Standardfarbvorlieben des Systems oder Browsers eines Nutzers anpasst. Sie können aber noch einen Schritt weiter gehen und den Besuchern Ihrer Website die Möglichkeit geben, diese Standardfarbvorlieben zu überschreiben.
Wenn Sie eine Schaltfläche zum Umschalten des Designs erstellen, mit der das Attribut data-scheme für das Element <html> aktualisiert wird, können Sie dasselbe Attribut verwenden, um das Attribut color-scheme mit CSS zu ändern.
html {
color-scheme: light dark;
&[data-scheme="light"] {
color-scheme: light;
}
&[data-scheme="dark"] {
color-scheme: dark;
}
&[data-scheme="green"] {
--base-color-light: oklch(48.052% 0.11875 151.945);
--base-color-dark: oklch(92.124% 0.13356 151.558);
color-scheme: light dark;
}
}
data-scheme="light" und data-scheme="dark" zeigen die Seite nur in den jeweiligen Farbmodi an. data-scheme="green" kann in beiden Modi angezeigt werden und ändert auch die --base-color in einen Grünton. Dadurch erhalten Sie eine völlig neue Palette, da die meisten anderen Farben auf der --base-color basieren.
Benutzerdefinierte Eigenschaften mit @property registrieren
Bisher wurden Farben in der Demo als benutzerdefinierte Standardeigenschaften festgelegt. Sie können auch Eigenschaften mit der Regel @property registrieren, um die Vorteile der Typüberprüfung zu nutzen.
Da --base-color als Grundlage für so viele andere Farben in der Benutzeroberfläche verwendet wird, sollte es immer eine Farbe und einen Fallback-Wert haben.
@property --base-color-light {
syntax: '<color>';
inherits: false;
initial-value: oklch(43.7% 0.075 224);
}
@property --base-color-dark {
syntax: '<color>';
inherits: false;
initial-value: oklch(89.2% 0.069 224);
}
html {
--base-color: light-dark(var(--base-color-light), var(--base-color-dark));
}
Wenn --base-color versehentlich in einen ungültigen Wert geändert wird, wird immer auf den mit der @property-Regel festgelegten initial-value-Wert zurückgegriffen.
Wenn Sie bestimmte Eigenschaften auf diese Weise registrieren, können Sie Farben in einem linear-gradient() auch problemlos animieren.
.main-heading {
background: linear-gradient(in oklch 90deg, var(--text-color) 50%, oklch(from var(--base-color) l c var(--header-hue)));
background-clip: text;
color: transparent;
animation: header-hue-switch 5s ease-in-out infinite alternate;
}
.main-heading hat einen linear-gradient()-Hintergrund, der durch den transparenten Text mit der background-clip-Property zu sehen ist.
Ein Teil des Texts zeigt ein hue, das mit der relativen Farbsyntax von einem Kanalwert von 26.67 zu 277 animiert wird:
@keyframes header-hue-switch {
from {
--header-hue: 26.67;
}
to {
--header-hue: 277;
}
}
Mit einer registrierten benutzerdefinierten --header-hue-Property kann diese Animation reibungslos ablaufen, da der Browser weiß, dass es sich bei dieser benutzerdefinierten Property um eine Zahl handelt.
@property --header-hue {
syntax: '<number>';
inherits: false;
initial-value: 100;
}
Bei einer nicht registrierten benutzerdefinierten Property wüsste der Browser den Datentyp von --header-hue nicht. Der Übergang zu einer Zahl wäre also eine diskrete Animation, bei der zwischen den Status ohne allmähliche Interpolation gesprungen würde.
Zusammenfassung
Mit den neuen Baseline-Tools können Sie schnell eine anpassbare Farbpalette erstellen und Farbvariablen effizienter erstellen. Die endlosen Farboptionen und Kombinationen müssen Sie jedoch weiterhin selbst durchgehen.
Wenn Sie Ihre Palette dynamisch erstellen, sind Sie flexibler. Wenn Sie die Grundfarbe für das Branding ändern möchten, können Sie einfach --base-color aktualisieren. Der Rest des Designs wird dann automatisch angepasst. Wenn Sie Musikwiedergabefunktionen hinzufügen, können Sie die Grundfarbe dynamisch an das aktuell wiedergegebene Lied anpassen.
Gutschriften
Die Logik für den Designwechsel wurde von der Komponente für den Designwechsel von Adam Argyle übernommen.