jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS-Relative-Color-Syntax-Generator

Generiere relative CSS-Farbsyntax für Alpha-, hellere, dunklere und kanalangepasste Varianten.

Tool wird geladen...

Was ist CSS-Relative-Color-Syntax-Generator?

Die CSS Relative Color Syntax ermöglicht es, von einer vorhandenen Farbe auszugehen und deren Kanäle einzeln zu modifizieren. Mit rgb(from color r g b / alpha) oder hsl(from color h s l / alpha) können Sie Helligkeit, Sättigung, Alpha oder einzelne Kanäle anpassen. Dies ist leistungsfähiger als color-mix() für präzise Kanalmanipulation.

Kurze Antwort

Die CSS Relative Color Syntax ermöglicht es, eine neue Farbe durch Anpassen einzelner Kanäle einer vorhandenen Farbe zu erstellen. Sie ist leistungsfähiger als color-mix() für präzise Kanalmanipulation ohne Präprozessor.

Last updated: 2026-06-11

Einschränkungen

  • Die Browserunterstützung erfordert Chrome 119+, Safari 16.4+ und Firefox 128+. Ältere Browser ignorieren die Deklaration vollständig.
  • Die Syntax variiert je nach Farbraum. Nicht alle Kanäle sind in jedem Farbraum verfügbar.
  • Komplexe verschachtelte Relative-Color-Ausdrücke können die Lesbarkeit beeinträchtigen. Verwenden Sie eine CSS-Custom-Property für die Basisfarbe.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie eine Basis-Farbe im Hex-, RGB- oder HSL-Format ein.
  2. Wählen Sie den Ausgabe-Farbraum und die Kanalanpassungen.
  3. Das Tool generiert die Relative Color Syntax CSS.
  4. Kopieren Sie die Deklaration in Ihr Stylesheet.

Wofür du es nutzen kannst

  • Erstellen Sie halbtransparente Varianten einer Markenfarbe.
  • Generieren Sie eine hellere oder dunklere Schattierung durch Anpassen des Helligkeitskanals.
  • Erhöhen oder reduzieren Sie die Sättigung für Hover- und Active-Zustände.

Anwendungsfalle

Praxisbeispiele

Beispiel

Markenfarbe mit Alphatransparenz

Ein Designer konvertiert eine hexadezimale Markenfarbe in eine 80%-Opazitätsvariante mit rgb(from #3b82f6 r g b / 0.8).

Beispiel

Hellere Kartenhintergründe via oklch

Ein Theme generiert hellere und dunklere Kartenhintergründe durch Anpassen des L-Kanals in oklch.

Haufige Fehler

  • Den falschen Farbraum für die gewünschte Kanalmanipulation zu verwenden.
  • Relative Farben zu tief zu verschachteln und die Lesbarkeit zu beeinträchtigen.
  • Keinen Fallback für Browser bereitzustellen, die Relative Color Syntax nicht unterstützen.

Überprüfung

  1. Testen Sie das generierte CSS im Chrome DevTools Styles-Panel, um zu bestätigen, dass die Farbe wie erwartet aufgelöst wird.
  2. Stellen Sie sicher, dass eine statische Fallback-Farbe vor der Relative-Color-Syntax deklariert ist.

FAQ

Fragen zu CSS-Relative-Color-Syntax-Generator

Was ist der Unterschied zwischen color-mix() und Relative Color Syntax?

color-mix() mischt zwei Farben. Relative Color Syntax nimmt eine Farbe und passt deren Kanäle an. Verwenden Sie color-mix() zum Mischen und Relative Syntax zur Kanalmanipulation.

Welche Browser unterstützen Relative Color Syntax?

Chrome 119+, Edge 119+, Safari 16.4+, Firefox 128+. Stellen Sie eine statische Farbe als Fallback bereit.

Welche Farbräume kann ich mit from verwenden?

Sie können rgb, hsl, hwb, oklch, oklab, lab, lch und srgb-linear verwenden. oklch wird oft für perceptuell gleichmäßige Helligkeitsanpassungen bevorzugt.

Was ist ein praktischer Anwendungsfall, der mit color-mix() nicht möglich ist?

Relative Color Syntax kann einzelne Farbkanäle extrahieren und manipulieren - zum Beispiel eine hellere Variante durch Erhöhen des Helligkeitskanals bei gleichem Farbton: oklch(from var(--brand) calc(l + 0.1) c h).

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren