CSS-Farbeigenschaften — Ein vollständiger Leitfaden für Webentwickler

Die zwei grundlegendsten CSS-Farbeigenschaften sind color (für Text) und background-color (für Element-Hintergründe). Sie akzeptieren jeden gültigen CSS-Farbwert einschließlich benannter Farben, HEX, RGB, HSL und moderner Farbfunktionen. Die color-Eigenschaft setzt die Vordergrundfarbe eines Elements. Die background-color-Eigenschaft füllt den gesamten Inhalts- und Padding-Bereich.

CSS hat sich über grundlegendes rgb() und hsl() hinaus entwickelt: Die rgb()-Funktion unterstützt nun die moderne Syntax mit Leerzeichen: rgb(255 0 0). Alpha-Transparenz verwendet Schrägstrich: rgb(255 0 0 / 50%). hsl() funktioniert ähnlich. HSL ist besonders nützlich für Farbvariationen. Die color-mix()-Funktion mischt zwei Farben. oklch() und oklab() bieten perzeptuell gleichmäßige Farbräume.

CSS-Gradienten erzeugen sanfte Farbübergänge: Lineare Gradienten fließen in gerader Linie: background: linear-gradient(to right, #ff0000, #0000ff). Radiale Gradienten strahlen von einem Mittelpunkt: background: radial-gradient(circle, red, blue). Konische Gradienten drehen sich um einen Mittelpunkt wie ein Kreisdiagramm. Ideal für Farbräder.

CSS bietet mehrere Wege zur Steuerung der Transparenz: Die opacity-Eigenschaft betrifft das gesamte Element und alle Kinder. Alpha-Kanäle in Farbwerten betreffen nur die spezifische Eigenschaft. Das transparent-Schlüsselwort entspricht rgba(0, 0, 0, 0). currentColor erbt die aktuelle Textfarbe.

CSS Custom Properties sind die Grundlage moderner Farbsysteme. Sie definieren Farben einmal und verwenden sie im gesamten Stylesheet wieder. Für den Dark Mode überschreiben Sie einfach die Variablen. Unser Farbwähler-Werkzeug generiert Farbwerte in allen CSS-Formaten sofort.