Praktisches Farbtool
Farbschattierungen Generator
Generiere eine 50-950 Skala aus einer Basisfarbe für UI Flächen, Borders, Hover und Dark Mode.
Was diese Seite bietet
- Generiere helle Tints und dunkle Shades aus einem Farbton.
- Nutze 50-200 für Hintergründe, 500-600 für Aktionen, 800-950 für Dark UI.
- Exportiere als CSS, Tailwind, SCSS oder JSON.
Gut für
- Tailwind Skalen
- Design Tokens
- Hover States
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.
Wofür steht jede Stufe einer 50-950-Skala?
50 bis 200 sind Seiten- und Card-Hintergründe, 300 und 400 sind Rahmen und Trenner, 500 und 600 tragen Buttons und Links, 700 bis 950 sind Text auf hellen Flächen und Hintergrundebenen im Dark Mode. Feste Rollen machen eine Skala wiederverwendbar.
Sollten Abstufungen in HSL oder OKLCH interpoliert werden?
OKLCH. In HSL werden die Helligkeitsschritte ungleichmäßig, weil derselbe Zahlenwert in Gelb und in Blau sehr unterschiedlich wirkt. In OKLCH sind die Schritte wahrnehmungsgleich, 100 bis 200 fühlt sich wie derselbe Abstand an wie 700 bis 800.