Praktisches Farbtool
Website Farbschema Generator
Erstelle ein Website Farbschema mit Primary, Neutral und Accent Farben für Hero, Buttons, Cards und Formulare.
Was diese Seite bietet
- Mache aus einer Markenfarbe eine komplette Website Palette.
- Balanciere CTA Farben, ruhige Flächen und lesbaren Text.
- Nutze die Tonleiter für Hintergründe, Borders, Hover und Cards.
Gut für
- Landing Pages
- Marketing Sites
- SaaS Homepages
So nutzt du es
Paletten GeneratorErstelle zugängliche Farbpaletten, prüfe WCAG-Kontrast, extrahiere Bildfarben und exportiere CSS, Tailwind, SCSS, JSON, SVG und PNG.WCAG CheckPrüfe Text- und Hintergrundkontraste nach WCAG AA und AAA, teste echte Farbpaare und wähle lesbare Kombinationen.Bild ExtraktorExtrahiere dominante Farben aus PNG-, JPG- oder WebP-Bildern lokal im Browser und erstelle exportierbare Paletten.
Kann ich das mit dem Hauptgenerator nutzen?
Ja. Starte hier, öffne das Chromoforge Tool mit derselben Basisfarbe und exportiere die Palette.
Wie viele Farben braucht ein Website-Schema?
Eine Primärfarbe, einen Akzent, eine neutrale Skala für Flächen, Rahmen und Text sowie vier semantische Farben für Erfolg, Warnung, Fehler und Info. Damit lässt sich jeder Zustand abdecken, den eine Website oder Web-App je darstellen wird.
Was besagt die 60-30-10-Regel?
Sie verteilt das Layout nach Fläche: rund 60% ein dominantes Neutral, 30% eine sekundäre Fläche oder Stützfarbe und 10% der Akzent für Call-to-Actions. Das ist eine Proportionshilfe, keine Barrierefreiheitsregel: jedes Textpaar muss weiterhin gegen WCAG geprüft werden.