Farbschattierungen Generator
Generiere eine 50-950 Skala aus einer Basisfarbe für UI Flächen, Borders, Hover und Dark Mode.
Mit dieser Farbe fortfahren
Was diese Seite bietet
- Generiere helle Tints und dunkle Shades aus einem Farbton.
- Beginne mit der markierten Originalfarbe und prüfe das tatsächliche Text-Hintergrund-Paar, bevor du Farben für Aktionen oder Text zuweist.
- Exportiere die Skala als CSS-Variablen, Tailwind CSS v3/v4 oder JSON.
Gut für
- Tailwind Skalen
- Design Tokens
- Hover States
So nutzt du es
Praktisches Beispiel
Prüfe den tatsächlichen Text zusammen mit seinem Hintergrund. Farbname oder Tonnummer garantieren keine Lesbarkeit.
:root {
--brand: #E24B4A; /* original at 400, not necessarily 500 */
--button-text: #111111;
}
.button { background: var(--brand); color: var(--button-text); }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?
Die Tonnummern sind Kennungen. Helle Töne eignen sich oft für Hintergründe und dunkle für Text, aber Rollen hängen von der Basisfarbe und vom Kontrast des Paares ab. 500 ist nicht automatisch die Originalfarbe und nicht jeder Ton 600 passt für einen Button.
Sollten Abstufungen in HSL oder OKLCH interpoliert werden?
OKLCH trennt wahrgenommene Helligkeit und Chroma besser als HSL. Dieses Werkzeug nutzt feste Helligkeitsziele mit variablem Chroma, bewahrt das Original an der nächsten Stufe und begrenzt Farben außerhalb des Farbraums auf sRGB. Gleiche visuelle Abstände sind nicht garantiert.