7 HarmonieregelnWCAG-Kontrast12 Exportformateläuft im Browser
Sehen Sie die Farbe, bevor Sie sich festlegen.
Paletten, Konverter und ein Kontrastprüfer, die ihren Rechenweg zeigen. Unten durchläuft eine einzige Farbe alles: ihre Harmonien, wie Text darauf lesbar ist, wie sie bei Farbfehlsichtigkeit wirkt und in welches CSS sie exportiert wird.
#3563E9Die Kontrastprüfung des Studios wählt die Textfarbe; der Streifen ist die Abstufung in neun Schritten.
- HEX
- #3563E9
- RGB
- 53 99 233
- HSL
- 225 80% 56%
- OKLCH
- 55.0% 0.209 265
- CMYK
- 77 58 0 9
Sieben Regeln für eine Palette
Jede auf die Farbe oben angewendet.
- #3563E9#E9BB35
Komplementär
Der Gegenton auf dem Farbkreis: maximaler Kontrast, gut für einen Akzent.
- #3563E9#E96135#BDE935
Geteilt komplementär
Die beiden Töne neben dem Gegenton: Kontrast mit weniger Spannung.
- #67E03E#3E67E0#E03E67
Analog
Nachbarn auf dem Farbkreis: ruhige, stimmige Schemata.
- #3563E9#E93563#63E935
Triadisch
Drei gleichmäßig verteilte Töne: lebendig, aber ausgewogen.
- #3563E9#BB35E9#E9BB35#63E935
Tetradisch
Zwei komplementäre Paare: reich und am schwersten auszubalancieren.
- #3563E9#E935BD#E9BB35#35E961
Quadrat
Vier gleichmäßig verteilte Töne: kräftig, am besten mit einem klaren Hauptton.
- #0B1228#162F76#1746CF#5E7FE1#AFBEE9
Monochrom
Ein Ton in mehreren Helligkeiten: sicher und ruhig.
Vor dem Livegang
Zwei Dinge, die ein Farbfeld nicht zeigt.
Ist der Text lesbar?
Vier Textfarben auf der Farbe oben, bewertet mit der WCAG-2.1-Formel.
- Aa#FFFFFF5.11:1AA
- Aa#0B0E143.78:1AA großer Text
- Aa#A6B9EE2.62:1Nicht bestanden
- Aa#436CE61.10:1Nicht bestanden
Wie wirkt sie auf alle?
Eine Vier-Farben-Palette, wie die meisten sie sehen, und wie vier Arten von Farbfehlsichtigkeit sie sehen.
- Typisches Sehen
- Protanopie
- Deuteranopie
- Tritanopie
- Achromatopsie
Was Sie mitnehmen
Die tatsächliche Ausgabe des Studios für diese Farbe.
:root {
--brand-100: #d5ddf6;
--brand-300: #7693e9;
--brand-500: #184ada;
--brand-700: #132b73;
--brand-900: #050915;
}// Tailwind CSS v4 config
colors: {
'brand': {
'100': '#d5ddf6',
'300': '#7693e9',
'500': '#184ada',
'700': '#132b73',
'900': '#050915',
},
},- HEX List
- RGB List
- HSL List
- CSS Variables
- JSON
- SVG Palette
- Adobe ASE
- GIMP Palette
- CSV
- Tailwind Config
- SCSS Variables
- Style Dictionary
Die Werkzeuge
9 Seiten, jede für eine Aufgabe.
Paletten-Generator
Erstellen Sie Farbpaletten. Kostenloser Generator.
Farbkonverter
Konvertieren Sie Farben. Kostenlos.
Kontrast-Prüfer
Prüfen Sie Farbkontraste. Kostenlos.
Design-System-Builder
Erstellen Sie Designsysteme aus einer Farbe.
Verlaufs-Generator
Erstellen Sie CSS-Verläufe. Kostenlos.
Design-Tokens
Exportieren Sie Farben als Design-Tokens.
Markenfarben
Farbpaletten bekannter Marken.
Farbnamen
Durchsuchen Sie benannte Farben.
Zufallsfarben-Generator
Generieren Sie zufällige Farben. Kostenloser Generator.
Häufig gestellte Fragen
Wie funktioniert der Theme Builder?
Geben Sie eine Primärfarbe ein und wir generieren ein komplettes Design-System: 11-stufige Farbskalen (50-950) für Primär, Sekundär, Akzent und Neutral, plus semantische Farben, Hell- und Dunkelmodus und Entwickler-Tokens. Wählen Sie aus 30+ Stilen, 20+ Projekttypen und 15+ Markenpersönlichkeiten.
Kann ich Design-Tokens exportieren?
Ja. Exportieren Sie das gesamte Design-System als CSS-Custom-Properties, Tailwind CSS v4-Konfiguration, SCSS-Variablen, LESS-Variablen oder Style-Dictionary-JSON — bereit zum Kopieren in Ihr Projekt.
Werden meine Daten gespeichert?
Nein. Alles läuft in Ihrem Browser. Favoriten werden im localStorage gespeichert und verlassen nie Ihr Gerät.
Wie funktioniert die Barrierefreiheitsprüfung?
Der Theme Builder prüft automatisch jedes Text-Hintergrund-Paar auf WCAG 2.1 AA-Konformität und passt Farben bei Bedarf an. Der Kontrastprüfungs-Tab bietet detaillierte AA/AAA-Analyse.
Farbe wählen
Beginnen Sie mit einer Farbe und nehmen Sie Palette, Kontrastbericht und Tokens mit.
Studio öffnen