2,424 Lesungen

CSS-Farbfunktionen im Jahr 2023 – Alles, was Sie für den Einstieg wissen müssen

von Rahul9m2023/02/24

Zu lang; Lesen

CSS-Farbfunktionen sind eine Möglichkeit, Farben in CSS mithilfe mathematischer Funktionen und nicht nur eines einfachen Farbcodes anzugeben. Die Funktionen bieten mehr Kontrolle und Flexibilität über die in Ihrem Stylesheet verwendeten Farben. Mit Farbfunktionen können Sie den Farbton, die Sättigung, die Helligkeit und die Deckkraft einer Farbe anpassen und sogar zwei oder mehr Farben miteinander mischen.

featured image - CSS-Farbfunktionen im Jahr 2023 – Alles, was Sie für den Einstieg wissen müssen

Hallo, liebe Entwickler! Heute tauchen wir in die Welt der CSS-Farbfunktionen ein.

Sie haben vielleicht CSS verwendet, um die Farbe eines Elements auf einer Webseite zu ändern, aber haben Sie schon einmal von CSS-Farbfunktionen gehört? Wenn nicht, schnallen Sie sich an, denn Sie werden gleich etwas Neues und Super Nützliches lernen!

Beginnen wir mit einem Zitat, das ich gestern gelesen habe GoodReads .

Die Farbe ist die Tastatur, die Augen sind die Harmonien, die Seele ist das Klavier mit vielen Saiten. Der Künstler ist die Hand, die spielt, indem sie die eine oder andere Taste berührt, um Schwingungen in der Seele hervorzurufen.

Was genau sind CSS-Farbfunktionen?

CSS-Farbfunktionen sind eine Möglichkeit, Farben in CSS mithilfe mathematischer Funktionen und nicht nur eines einfachen Farbcodes anzugeben.

Die Funktionen bieten mehr Kontrolle und Flexibilität über die in Ihrem Stylesheet verwendeten Farben.

Mit Farbfunktionen können Sie Farbton , Sättigung , Helligkeit und Deckkraft einer Farbe anpassen und sogar zwei oder mehr Farben miteinander mischen.

Es stehen mehrere CSS-Funktionen zur Verfügung. Schauen wir uns einige an:

rgb() – Es nimmt drei Werte an, die jeweils Rot, Grün und Blau darstellen, und gibt eine Farbe zurück. Die Werte können zwischen 0 und 255 liegen. Beispiel: color: rgb(255, 0, 0) ergibt eine rote Farbe.
rgba() – Es ähnelt rgb() , ermöglicht Ihnen jedoch auch das Festlegen der Deckkraft der Farbe. Der vierte Wert, Alpha, kann zwischen 0 und 1 liegen. Beispiel: color: rgba(255, 0, 0, 0.5) ergibt eine halbtransparente rote Farbe.
hsl() – Es nimmt drei Werte an, die Farbton, Sättigung und Helligkeit darstellen, und gibt eine Farbe zurück. Beispiel: color: hsl(0, 100%, 50%) ergibt eine rote Farbe.
hsla() – Es ähnelt hsl() , ermöglicht Ihnen jedoch auch das Festlegen der Deckkraft der Farbe. Beispiel: color: hsla(0, 100%, 50%, 0.5) ergibt eine halbtransparente rote Farbe.
mix() – Ermöglicht das Mischen zweier Farben mit einem optionalen Gewichtsparameter. Beispiel: color: mix(red, blue) ergibt einen Lila-Ton.

Lassen Sie uns mehr über sie erfahren.

RGB()

Okay, lasst uns unsere Reise in die Welt der CSS-Farbfunktionen fortsetzen und in die RGB-Funktion eintauchen. Die RGB-Funktion ist eine der am häufigsten verwendeten Farbfunktionen in CSS, und das aus gutem Grund!

Es ist leicht zu verstehen und gibt Ihnen viel Kontrolle über die Farben, die Sie auf Ihrer Website verwenden.

Die RGB-Funktion nimmt drei Werte an, die jeweils die Intensität von darstellen

Rot,

grün, und

blau bzw.

Diese Werte können zwischen 0 und 255 liegen. Durch das Mischen unterschiedlicher Intensitäten von Rot, Grün und Blau können Sie jede gewünschte Farbe erzeugen.

Beispiel:

Für rote Farbe – rgb(255, 0, 0)
Für grüne Farbe – rgb(0, 255, 0)
Für blaue Farbe – rgb(0, 0, 255)

 div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/

HSL()

Okay, kommen wir zu einer weiteren nützlichen Farbfunktion in CSS – der HSL-Funktion!

Die HSL-Funktion ähnelt der RGB-Funktion, verwendet jedoch anstelle von Werten für Rot, Grün und Blau Werte für:

Farbton,

Sättigung und

Leichtigkeit.

Dies macht es etwas einfacher zu verstehen und zu verwenden, insbesondere für diejenigen, die noch keine Erfahrung damit haben Farben Lehre .

Der Farbtonwert in der HSL-Funktion stellt die Farbe selbst dar, mit Werten zwischen 0 und 360.

Der Farbtonwert 0 steht für Rot, ein Farbtonwert von 120 für Grün und ein Farbtonwert von 240 für Blau.
Der Sättigungswert in der HSL-Funktion stellt die Intensität der Farbe dar, wobei die Werte zwischen 0 % und 100 % liegen. Ein Sättigungswert von 100 % bedeutet, dass die Farbe vollständig gesättigt ist, während ein Wert von 0 % bedeutet, dass die Farbe grau ist.
Der Helligkeitswert in der HSL-Funktion stellt die Helligkeit der Farbe dar, wobei die Werte zwischen 0 % und 100 % liegen. Ein Helligkeitswert von 50% bedeutet, dass die Farbe ein neutrales Grau ist, während ein Wert von 100% bedeutet, dass die Farbe vollständig hell ist, und ein Wert von 0% bedeutet, dass die Farbe vollständig dunkel ist.

 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */

RGBA()

Okay Leute, reden wir über die RGBA-Funktion!

Die RGBA-Funktion ähnelt der RGB-Funktion, verfügt jedoch über einen zusätzlichen Bonus:

Damit können Sie die Deckkraft einer Farbe festlegen.

Dies kann nützlich sein, wenn Sie Ihren Elementen einen durchscheinenden Effekt verleihen möchten, beispielsweise wenn eine Hintergrundfarbe teilweise transparent sein soll.

Die RGBA-Funktion nimmt vier Werte an, wobei die ersten drei wie die RGB-Funktion die Rot-, Grün- und Blauwerte sind.

Der vierte Wert ist der Alpha-Wert , der die Deckkraft der Farbe darstellt und zwischen 0 und 1 liegt.

Ein Wert von 0 bedeutet, dass die Farbe vollständig transparent ist, während ein Wert von 1 bedeutet, dass die Farbe vollständig undurchsichtig ist.

 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

HSLA()

Okay Leute, reden wir über die HSLA-Funktion!

Die HSLA-Funktion ähnelt der HSL-Funktion, verfügt jedoch über einen zusätzlichen Vorteil: Sie ermöglicht es Ihnen, die Deckkraft einer Farbe festzulegen.

Dies kann nützlich sein, wenn Sie Ihren Elementen einen durchscheinenden Effekt verleihen möchten, beispielsweise wenn eine Hintergrundfarbe teilweise transparent sein soll.

Die HSLA-Funktion nimmt vier Werte an, wobei die ersten drei die Werte für Farbton, Sättigung und Helligkeit sind, genau wie die HSL-Funktion.

Der vierte Wert ist der Alpha-Wert, der die Deckkraft der Farbe darstellt und zwischen 0 und 1 liegt.

Ein Wert von 0 bedeutet, dass die Farbe vollständig transparent ist, während ein Wert von 1 bedeutet, dass die Farbe vollständig undurchsichtig ist.

 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

Es ist alles das Gleiche. A bedeutet Alpha, das uns (Alpha-Wert von 0,75) für den durchscheinenden Effekt in beiden Funktionen zur Verfügung stellt, einfach.

Benutzerdefinierte Eigenschaften oder CSS-Variablen

Lassen Sie uns nun über benutzerdefinierte Eigenschaften in CSS sprechen, die auch als CSS-Variablen bezeichnet werden. Mit benutzerdefinierten Eigenschaften können Sie Werte speichern, die Sie im gesamten Stylesheet wiederverwenden können. Dadurch wird die Pflege Ihrer Stile einfacher und Ihr Code übersichtlicher modular und flexibel.

Um eine benutzerdefinierte Eigenschaft zu erstellen, verwenden Sie einfach die Syntax -- gefolgt vom Eigenschaftsnamen und einem Wert

 :root { --primary-color: blue; }

Hier haben wir eine benutzerdefinierte Eigenschaft namens --primary-color mit dem Wert blue erstellt.

Um diese benutzerdefinierte Eigenschaft zu verwenden, können Sie nun die Funktion var() in Ihren CSS-Selektoren verwenden.

 button { background-color: var(--primary-color); }

Der obige Code setzt die Hintergrundfarbe aller <button> -Elemente auf Blau, da wir die benutzerdefinierte Eigenschaft --primary-color verwenden.

Wenn wir den Wert von --primary-color ändern möchten, müssen wir ihn nur an einer Stelle ändern und er wird im gesamten Verlauf automatisch aktualisiert Stylesheet .

Zu den Vorteilen der Verwendung benutzerdefinierter Eigenschaften gehören:

Code-Wiederverwendung : Anstatt Werte im gesamten Stylesheet zu wiederholen, können Sie Werte in benutzerdefinierten Eigenschaften speichern und sie bei Bedarf wiederverwenden.

Wartbarkeit : Benutzerdefinierte Eigenschaften erleichtern die Pflege Ihrer Stile, da Sie Werte nur an einer Stelle aktualisieren müssen.

Flexibilität : Mit benutzerdefinierten Eigenschaften können Sie das Erscheinungsbild Ihrer Website ändern, indem Sie Werte an einer Stelle ändern, anstatt Änderungen in mehreren Selektoren vorzunehmen.

Best Practices für CSS-Farbfunktionen

Okay, lassen Sie uns über Best Practices für die Verwendung von CSS-Farbfunktionen in Ihren Projekten sprechen.

Diese Tipps helfen Ihnen dabei, ein einheitliches und optisch ansprechendes Erscheinungsbild zu schaffen Farbpalette für Ihre Website und stellen Sie sicher, dass Ihre Farben für alle Benutzer lesbar und zugänglich sind.

Erstellen einer Farbpalette für Ihre Website:

Eines der ersten Dinge, die Sie bei der Arbeit mit CSS-Farben tun sollten, ist die Erstellung einer Farbpalette für Ihre Website. Dies kann so einfach sein wie die Auswahl einiger Farben, die Ihnen gefallen und die gut zusammenpassen.

Sie können RGB-, HSL-, RGBA- oder HSLA-Funktionen verwenden, um Ihre Farben zu definieren.

Ein guter Anfang ist es, eine Hauptfarbe auszuwählen und dann zwei bis drei Akzentfarben auszuwählen, um diese zu ergänzen.

 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); }

Verwenden von CSS-Farbfunktionen für Kontrast und Hierarchie:

Es ist wichtig, Farben zu verwenden, um in Ihren Designs Kontrast und Hierarchie zu schaffen. Sie können beispielsweise eine hellere Farbe für Ihren Hintergrund und eine dunklere Farbe für Ihren Text verwenden, um sicherzustellen, dass er gut lesbar ist.

Sie können Farbe auch verwenden, um die Aufmerksamkeit auf bestimmte Elemente wie Schaltflächen oder Links zu lenken.

 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); }

Testen von Farbfunktionen auf Lesbarkeit und Barrierefreiheit:

Abschließend ist es wichtig, Ihre Farben auf Lesbarkeit und Zugänglichkeit zu testen. Stellen Sie sicher, dass Ihre Farben ausreichend Kontrast haben, damit sie gut lesbar sind, insbesondere für Benutzer mit Farbsehbehinderungen.

Sie können Online-Tools verwenden, um den Kontrast Ihrer Farben zu überprüfen und sicherzustellen, dass sie den Barrierefreiheitsstandards entsprechen.

WebAIM-Kontrastprüfer

Muzli-Farbpalettengenerator

Experte – Kontrastprüfer

coolors - Palettengenerator

Canva-Palettengenerator

Erweiterte Techniken für CSS-Farbfunktionen

In diesem Abschnitt befassen wir uns mit einigen fortgeschrittenen Techniken mit CSS-Farbfunktionen.

Verwenden von CSS-Variablen für dynamische Farbschemata

Wollten Sie schon immer das Farbschema Ihrer Website mit nur wenigen Codezeilen ändern? Mit CSS-Variablen, auch benutzerdefinierte Eigenschaften genannt, ist das möglich!

Sie können eine Reihe von Variablen erstellen, um Ihre Farbpalette zu speichern und diese dann im gesamten Stylesheet zu verwenden.

Auf diese Weise müssen Sie, wenn Sie Ihr Farbschema jemals ändern möchten, nur die Werte in Ihren Variablen aktualisieren.

 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); }

In diesem Beispiel haben wir zwei benutzerdefinierte Eigenschaften für unsere Primär- und Sekundärfarben erstellt. Wir haben sie dann verwendet, um unsere h1 und button Elemente zu gestalten.

Animationen mit CSS-Farbfunktionen erstellen

Eines der coolen Dinge, die Sie mit CSS-Farbfunktionen machen können, ist, sie zu animieren! Sie können sanfte Übergänge zwischen den Farben erstellen, um Ihrer Website etwas Dynamik zu verleihen. Sie könnten beispielsweise dafür sorgen, dass eine Schaltfläche ihre Farbe ändert, wenn ein Benutzer mit der Maus darüber fährt.

 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); }

Hier haben wir die Standardhintergrundfarbe unserer Schaltfläche auf einen grünen Farbton ( hsl(120, 100%, 50%) ) festgelegt und einen Übergang hinzugefügt, damit sich die Farbe reibungslos ändert, wenn der Mauszeiger über die Schaltfläche bewegt wird.

Wir haben die Farbe für den Schwebezustand in einen blauen Farbton ( hsl(240, 100%, 50%) ) geändert.

Verwenden von CSS-Farbfunktionen für Farbverläufe und Transparenz

Eine weitere tolle Sache, die Sie mit CSS-Farbfunktionen machen können, ist die Erstellung von Farbverläufen und Transparenz. Mit den RGBA- und HSLA-Farbfunktionen können Sie halbtransparente Farben erstellen und diese dann zu Farbverläufen kombinieren.

 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); }

Hier haben wir einen linearen Farbverlauf erstellt, der von einer roten RGBA-Farbe zu einer grünen HSLA-Farbe reicht. Beide Farben haben einen Alphawert von 0,5 und sind somit halbtransparent.

Und da haben Sie es!

Einige fortgeschrittene Techniken mit CSS-Farbfunktionen. Viel Spaß beim Experimentieren mit diesen Techniken und lassen Sie Ihrer Kreativität freien Lauf!

Ressourcen