Wie berechnet das Tool die Farbstufen von 50 bis 950?

Es nutzt HSL-Helligkeitsinterpolation, wobei die eingegebene Farbe als Stufe 500 verankert wird und zu Weiß bzw. Schwarz verläuft.

Was bedeuten die WCAG-Labels wie AA oder AAA?

Sie zeigen an, ob der Kontrast der jeweiligen Farbe auf weißem oder schwarzem Hintergrund die Barrierefreiheitsstandards erfüllt.

Kann ich Farben ohne Namen eingeben?

Ja, unbenannte HEX-Werte werden automatisch als 'color1', 'color2' usw. benannt.

Wie funktioniert die Dark-Mode-Option?

Sie können eine zweite Liste von HEX-Werten eingeben, um eine separate Konfiguration für das dunkle Farbschema zu generieren.

Welche Namensschemata werden unterstützt?

Sie können zwischen einer flachen Skala (50–950), Einzelwerten (Single) oder verschachtelten Objekten (Nested) wählen.

Elysia Tools

Mobile Navigation

Development

Tailwind-Farbpaletten-Sync

Gib HEX ein, wähle Namensschema (Skala 50–950 / Einzelname / Verschachtelung) und generiere das theme.extend.colors-Fragment für tailwind.config.ts mit WCAG AA/AAA-Leveln. Dark Mode optional.

Einzelheiten

Wobei dieses Tool hilft

Wandelt eine HEX-Liste in einen theme.extend.colors-Block — mit WCAG-Prüfung.

Eingabe. Ein HEX pro Zeile. Optionaler Präfix: brand: #3b82f6. Ohne Namen → color1.

Schemata. Skala (50–950, 11 Stufen), Einzelname oder Verschachtelung. Die Skala interpoliert in HSL zu Weiß/Schwarz.

WCAG. Jede Nuance wird AAA (≥7), AA (≥4.5), AA-Large (≥3) oder Fail zugeordnet.

Dark Mode. Optional, zweite HEX-Liste → separate Konfiguration.

Mathe. HSL-Helligkeitsinterpolation; Eingabe ankert Stufe 500.

Ausführung

Dieses Tool ausführen

Fülle das Formular aus, starte das Tool und prüfe das Ergebnis an einem Ort.

Vorbereitete Beispielausführungen

Klicken Sie auf ein Beispiel, um das Formular automatisch auszufüllen. Dateien müssen weiterhin hochgeladen werden.

2 Beispiele

Markenpalette mit voller Skala

Zwei Marktfarben zu 11-stufigen Skalen mit WCAG-Leveln, verschachteltes Format.

{
  "type": "html"
}

Einzelwert-Token + Dark Mode

Drei Farben als Einzelwert-Token, mit Dark-Mode-Set.

{
  "type": "html"
}

Eingaben

Fülle die erforderlichen Felder aus und starte das Tool.

4 Optionen

InhaltHaupteingaben einfügen oder eingeben.2

Farben (ein HEX pro Zeile, oder "name: HEX")textareaPflichtDark-Mode-Farben (optional, gleiches Format)textareaOptionales Feld

EinstellungenFormate, Bereiche, Zahlen und Modi anpassen.1

NamensschemaselectOptionales Feld

SchalterOptionales Verhalten aktivieren oder deaktivieren.1

Dark-Mode-Farben einbeziehencheckboxOptionales FeldAktiviert, wenn ausgewählt

Ergebnis

Bereit zum Start

Nach dem Ausführen erscheinen hier Dateien, Text, strukturierte Daten oder Stream-Ausgaben.

Beispiele

Beispiele zu diesem Tool

Verwandt

Tailwind-Farbpaletten-Sync

Wobei dieses Tool hilft

Dieses Tool ausführen

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Beispiele zu diesem Tool

Mit verwandten Tools und Themen fortfahren

Vorbereitete Beispielausführungen

Eingaben

Ergebnis

Erfahren Sie, wann dieses Tool passt, was es unterstützt und wie Nutzer es anwenden.

Wichtige Fakten

Überblick

Wann verwenden

So funktioniert es

Anwendungsfälle

Beispiele

1. Erstellung einer barrierefreien Marken-Farbskala

2. Einzelwert-Token mit Dark-Mode-Konfiguration

FAQ

Farbcode-Beispiele

Tailwind CSS Samples

Web Python Bildverarbeitung Beispiele

Android Java Bildverarbeitungsbeispiele

KI-Domain-Namen-Generator

package.json Abhängigkeits-Prüfer

Farbraumkonverter

JWK-Generator & Parser

Tools fur Audio-Encoding und Formatkonvertierung

Tools fur Bildformat-Konvertierung und animierten Export

Tools fur JSON-Austausch und Format-Ubersetzung

Farbraum-Konvertierung fur Web und Druck