ToolDecks Farb-Tools ermöglichen es Ihnen, zwischen Farbformaten zu konvertieren, Barrierefreiheits-Kontrastverhältnisse zu prüfen, Paletten zu erstellen, CSS-Farbverläufe zu erzeugen und Farbnamen oder Tailwind-Klassen direkt im Browser nachzuschlagen. Der Color Converter verarbeitet HEX, RGB, HSL und HSV in beide Richtungen. Der Contrast Checker prüft die WCAG 2.1 AA- und AAA-Konformität. Der Palette Generator erstellt komplementäre, analoge, triadische und teträdische Schemata aus einer beliebigen Grundfarbe. Der CSS Gradient Generator gibt kopierfertige lineare und radiale Verlaufscode aus. Der Color Name Finder ordnet jeden Wert der nächstgelegenen benannten CSS-Farbe zu, und der Tailwind Color Finder bildet beliebige Farben auf Tailwind-Utility-Klassen ab. Alle Tools laufen clientseitig – keine Daten werden an einen Server gesendet.
Was sind Farb-Tools?
Farb-Tools sind Hilfsprogramme, die Entwicklern und Designern beim Arbeiten mit digitalen Farbwerten helfen. Jede Farbe auf dem Bildschirm wird als Zahlen gespeichert: drei Kanäle für RGB (Rot, Grün, Blau), ein Hex-Tripel als CSS-Kurzschreibweise oder ein winkelbasierter Farbton mit Sättigung und Helligkeit für HSL. Zwischen diesen Darstellungen manuell zu wechseln ist langsam und fehleranfällig, besonders wenn auch Alpha-Transparenz oder neuere Modelle wie OKLCH berücksichtigt werden müssen.
Neben der Formatkonvertierung umfasst Farbarbeit auch Barrierefreiheitstests, Palettenerstellung und Verlaufsgestaltung. WCAG 2.1 definiert Mindestkontrastverhältnisse (4,5:1 für normalen Text bei AA, 7:1 für AAA), die schwer mit dem Auge zu beurteilen sind. Das Erstellen harmonischer Farbschemata erfordert präzise Winkelberechnungen auf dem HSL-Farbkreis. CSS-Farbverläufe benötigen korrekte Syntax für Richtung, Farbstopps und Fallback-Werte. All dies manuell über ein Design-System mit Dutzenden von Tokens zu erledigen wird schnell mühsam.
Farb-Tools automatisieren diese Aufgaben. Sie nehmen eine Farbe in einem Format entgegen, berechnen die Mathematik und liefern das gewünschte Ergebnis zurück – sei es ein konvertierter Wert, ein Bestanden/Nicht-bestanden-Barrierefreiheitsurteil, eine Reihe harmonischer Farbfelder oder ein CSS-Code-Snippet. Wenn das Tool im Browser läuft, vermeiden Sie außerdem das Hochladen sensibler Design-Tokens zu Drittanbieterdiensten.
Warum Farb-Tools auf ToolDeck verwenden?
ToolDecks Farb-Tools laufen vollständig in Ihrem Browser. Keine Farbwerte verlassen Ihren Rechner, kein Konto ist erforderlich, und jedes Tool lädt sofort ohne Installation von Erweiterungen oder Desktop-Software.
🎨Formate in einem Schritt konvertieren
Fügen Sie einen HEX-Code ein und erhalten Sie gleichzeitig RGB-, HSL- und HSV-Werte. Kein Verketten mehrerer Konverter oder Merken von Konvertierungsformeln nötig.
🔒Design-Tokens privat halten
Die gesamte Verarbeitung erfolgt clientseitig. Ihre Markenfarben, unveröffentlichten Palettenentscheidungen und internen Design-System-Werte bleiben auf Ihrem Gerät.
♿Barrierefreiheit sofort prüfen
Prüfen Sie jedes Vordergrund/Hintergrund-Paar gegen die WCAG 2.1 AA- und AAA-Schwellenwerte für normalen und großen Text. Erhalten Sie das genaue Kontrastverhältnis, nicht nur ein Bestanden/Nicht-bestanden-Label.
⚡Produktionsfertige Ausgabe kopieren
Jedes Tool gibt Werte aus, die direkt in CSS, Tailwind-Konfiguration oder Design-Tool-Eingabefelder eingefügt werden können. Keine Neuformatierung erforderlich.
Anwendungsfälle für Farb-Tools
Hier sind sechs häufige Szenarien, in denen ToolDecks Farb-Tools Zeit sparen.
Design-System-Pflege
Beim Aktualisieren eines Design-Systems erhalten Sie Farben oft als HEX vom Designer, benötigen aber HSL für CSS Custom Properties. Der
Color Converter übersetzt zwischen Formaten, sodass Sie Token-Dateien ohne manuelle Berechnungen befüllen können.
Barrierefreiheits-Audits
Bei einem WCAG-Konformitäts-Audit muss jede Text/Hintergrund-Kombination Mindestkontrastverhältnisse erfüllen. Der
Color Contrast Checker zeigt das genaue Verhältnis und den AA/AAA-Status für normale und große Textgrößen.
Markenpaletten-Erkundung
Ausgehend von einer einzigen Markenfarbe benötigen Sie Akzent- und Neutralvarianten. Der
Color Palette Generator berechnet komplementäre, analoge, triadische und teträdische Harmonien, damit Sie Optionen bewerten können, bevor Sie sich auf eine Palette festlegen.
CSS-Hintergrundgestaltung
Beim Erstellen eines Hero-Bereichs oder Kartenhintergrunds mit einem Farbverlauf ist korrekte CSS-Syntax für Winkel, Farbstopps und Herstellerpräfixe erforderlich. Der
CSS Gradient Generator ermöglicht es Ihnen, den Verlauf visuell zu erstellen und den Code zu kopieren.
Tailwind-Migration
Bei der Migration eines Projekts zu Tailwind CSS müssen vorhandene HEX- oder RGB-Werte der nächstgelegenen Tailwind-Utility-Klasse zugeordnet werden. Der
Tailwind Color Finder findet die nächste Übereinstimmung und zeigt das Delta an, sodass Sie entscheiden können, ob die Annäherung akzeptabel ist.
Code-Review und Dokumentation
Beim Code-Review sagt ein roher HEX-Wert wie #708090 auf den ersten Blick nichts. Der
Color Name Finder identifiziert ihn als SlateGray und macht Reviews und Dokumentation lesbarer.
CSS-Farbmodell-Referenz
CSS unterstützt mehrere Farbmodelle. Die nachstehende Tabelle fasst die sechs gängigsten Formate, ihre Syntax und typische Anwendungsfälle zusammen. All diese werden vom Color Converter von ToolDeck unterstützt.
| Modell | CSS-Syntax | Kanäle | Wertebereich | Typische Verwendung |
|---|
| HEX | #rrggbb | Rot, Grün, Blau | 00–ff pro Kanal | Am häufigsten in CSS, Design-Übergaben, Markenrichtlinien |
| RGB | rgb(r, g, b) | Rot, Grün, Blau | 0–255 pro Kanal | JavaScript Canvas API, berechnete Styles, Bildverarbeitung |
| HSL | hsl(h, s%, l%) | Farbton, Sättigung, Helligkeit | 0–360 / 0–100% / 0–100% | Design-Tokens, Theme-Generierung, programmatische Farbtonvarianten |
| HSV | N/A (nicht in CSS) | Farbton, Sättigung, Wert | 0–360 / 0–100% / 0–100% | Farbwähler (Photoshop, Figma), Hardware-Farbkalibrierung |
| OKLCH | oklch(L C H) | Helligkeit, Chroma, Farbton | 0–1 / 0–0,4 / 0–360 | Wahrnehmungsgleichmäßige Paletten (CSS Color Level 4 spec) |
| Named | z. B. slategray | Intern auf RGB abgebildet | 148 vordefinierte Namen | Prototyping, lesbarer Code, schnelle Demonstrationen |
CSS Color Level 4 (W3C) definiert auch die Funktionen lab(), lch() und color(). HEX und RGB bleiben die am weitesten verbreiteten Formate in Browsern und Design-Tools.
Das richtige Farb-Tool wählen
Jedes Farb-Tool löst ein anderes Problem. Nutzen Sie die nachstehende Übersicht, um das richtige Tool für Ihre Aufgabe zu finden.
- 1
Wenn Sie folgendes benötigen eine Farbe zwischen HEX, RGB, HSL oder HSV konvertieren → Color Converter - 2
Wenn Sie folgendes benötigen prüfen, ob ein Text/Hintergrund-Farbpaar den WCAG-Barrierefreiheitsstandards entspricht → Color Contrast Checker - 3
Wenn Sie folgendes benötigen eine Reihe harmonischer Farben aus einer einzigen Grundfarbe generieren → Color Palette Generator - 4
Wenn Sie folgendes benötigen einen linearen oder radialen CSS-Farbverlauf erstellen und den Code erhalten → CSS Gradient Generator - 5
Wenn Sie folgendes benötigen den lesbarsten CSS-Namen finden, der einem gegebenen Farbwert am nächsten kommt → Color Name Finder - 6
Wenn Sie folgendes benötigen eine beliebige Farbe der nächstgelegenen Tailwind CSS-Utility-Klasse zuordnen → Tailwind Color Finder
Alle sechs Tools akzeptieren Eingaben in mehreren Formaten. Wenn Sie unsicher sind, in welchem Format Ihre Farbe vorliegt, beginnen Sie mit dem Color Converter, der HEX-, RGB-, HSL- und HSV-Notation automatisch erkennt.
Häufig gestellte Fragen
Was ist der Unterschied zwischen HEX- und RGB-Farbformaten?
HEX und RGB repräsentieren denselben Farbraum. Ein HEX-Code wie #ff6600 ist eine hexadezimale Kodierung der drei RGB-Kanäle: ff = 255 (Rot), 66 = 102 (Grün), 00 = 0 (Blau). Der einzige Unterschied ist die Notation. HEX ist in CSS-Stylesheets kompakter, während RGB programmatisch leichter zu verarbeiten ist, da jeder Kanal bereits ein dezimaler Ganzzahlwert ist.
Wann sollte ich HSL statt HEX oder RGB verwenden?
HSL trennt den Farbton (die eigentliche Farbe) von Sättigung und Helligkeit. Das macht es einfacher, Farbtonvarianten zu erstellen: Farbton beibehalten, Helligkeit für einen dunkleren Ton reduzieren, für einen helleren Tint erhöhen. Design-Systeme, die helle/dunkle Themes aus einer einzigen Grundfarbe generieren, speichern Tokens oft in HSL aus diesem Grund. CSS Custom Properties lassen sich ebenfalls gut mit HSL kombinieren, da einzelne Kanäle überschrieben werden können.
Welches Kontrastverhältnis verlangt WCAG 2.1 für Text?
WCAG 2.1 Level AA verlangt ein Mindestkontrastverhältnis von 4,5:1 für normalen Text (unter 18pt oder 14pt fett) und 3:1 für großen Text (18pt+ oder 14pt+ fett). Level AAA erhöht diese Schwellenwerte auf 7:1 bzw. 4,5:1. Diese Verhältnisse werden aus der relativen Luminanz von Vordergrund- und Hintergrundfarbe mit der in WCAG 2.1 Success Criterion 1.4.3 definierten Formel berechnet.
Wie viele benannte Farben unterstützt CSS?
CSS definiert 148 benannte Farben, geerbt von den SVG 1.1- und CSS3-Farbspezifikationen. Diese reichen von gebräuchlichen Namen wie red, blue und white bis zu spezifischen Namen wie MediumSlateBlue, PapayaWhip und LavenderBlush. Benannte Farben sind festen RGB-Werten zugeordnet. Die CSS Color Level 4-Spezifikation behält dieselben 148 Namen bei und fügt keine neuen hinzu. Browser erkennen auch das Schlüsselwort transparent (entspricht rgba(0,0,0,0)).
Kann ich OKLCH-Farben heute schon in CSS verwenden?
Ja. Die Funktion oklch() wird in Chrome 111+, Firefox 113+ und Safari 15.4+ unterstützt. OKLCH ist Teil der von W3C veröffentlichten CSS Color Level 4-Spezifikation. Sein Hauptvorteil gegenüber HSL ist die Wahrnehmungsgleichmäßigkeit: Zwei Farben mit demselben Helligkeitswert in OKLCH sehen für das menschliche Auge tatsächlich gleich hell aus, was bei HSL nicht der Fall ist. Dies macht OKLCH zur besseren Wahl für die Erstellung barrierefreier Paletten mit einheitlicher wahrgenommener Helligkeit.
Was ist der Unterschied zwischen HSL und HSV?
HSL und HSV verwenden beide eine zylindrische Darstellung mit dem Farbton als Winkel, definieren Helligkeit jedoch unterschiedlich. In HSL ist Helligkeit 50% die reine Farbe; 0% ist Schwarz, 100% ist Weiß. In HSV ist Wert 100% die reine Farbe; 0% ist Schwarz. HSV hat keine eingebaute Möglichkeit, Weiß zu erreichen, ohne gleichzeitig die Sättigung zu reduzieren. Designer und Farbwähler (Photoshop, Figma) verwenden typischerweise HSV, während CSS nativ HSL nutzt.
Wie finde ich die Tailwind-Klasse für eine beliebige HEX-Farbe?
Tailwind CSS enthält eine feste Palette von etwa 220 Farbklassen (22 Farbtöne mal 10 Abstufungen, plus Schwarz, Weiß und Transparent). Um die nächstgelegene Klasse für einen gegebenen HEX-Wert zu finden, berechnet man den euklidischen Abstand in einem wahrnehmungsbasierten Farbraum (wie CIELAB oder OKLCH) zwischen der eigenen Farbe und jedem Tailwind-Farbfeld. Der Tailwind Color Finder auf ToolDeck erledigt dies automatisch und zeigt die nächste Übereinstimmung zusammen mit dem Farbunterschied an, sodass Sie beurteilen können, ob die Annäherung gut genug ist.
Ist es sicher, vertrauliche Markenfarben in ein Online-Tool einzufügen?
Das hängt vom Tool ab. Jedes Tool, das Ihre Eingaben an einen Server sendet, gibt diese Werte in Netzwerkverkehr und Server-Logs preis. ToolDecks Farb-Tools laufen vollständig in Ihrem Browser mit clientseitigem JavaScript. Keine HTTP-Anfragen übertragen Ihre Farbdaten an ein Backend. Sie können dies überprüfen, indem Sie den Netzwerk-Tab Ihres Browsers während der Tool-Nutzung öffnen. Als maximale Vorsichtsmaßnahme können Sie die Tools nach dem ersten Laden auch offline nutzen.