Machen Sie aus einer Farbe vollständige Tint-, Shade- und Tone-Skalen und exportieren Sie sie als CSS-Variablen — direkt im Browser.
Ein Designsystem braucht selten eine Farbe: Es braucht eine Familie. Tints, Shades und Tones sind die drei klassischen Wege, diese Familie aus einem einzigen Farbton aufzubauen. Ein Tint ist die Farbe gemischt mit Weiß und ergibt hellere, weichere Varianten für Hintergründe, Hover-Flächen und deaktivierte Zustände. Ein Shade ist die Farbe gemischt mit Schwarz und ergibt dunklere Varianten für Text auf hellem Grund, Rahmen und gedrückte Zustände. Ein Tone ist die Farbe gemischt mit Grau, was die Sättigung senkt, ohne die Helligkeit so stark zu verändern — der unbekannteste der drei und derjenige, der den gedämpften, redaktionellen Look erzeugt, den reine Tints und Shades nicht hinbekommen.
Die Rechnung ist hier bewusst einfach und vorhersehbar: Jede Stufe ist eine lineare Interpolation der RGB-Kanäle zwischen Ihrer Grundfarbe und dem Ziel (Weiß #ffffff, Schwarz #000000 oder mittleres Grau #808080), in 10-%-Schritten, sodass die zehnte Stufe exakt auf dem Ziel landet. Das ist dieselbe Konvention, die auch die klassischen Tint-und-Shade-Generatoren verwenden, und sie macht jeden Wert reproduzierbar — Sie können jedes Feld von Hand nachrechnen. Den Kompromiss sollten Sie kennen: Weil die Interpolation in sRGB stattfindet und nicht in einem wahrnehmungsbasierten Raum wie OKLCH, sind die wahrgenommenen Helligkeitsschritte nicht perfekt gleichmäßig, besonders bei sehr gesättigtem Gelb und Cyan. Für UI-Skalen ist das meist unproblematisch und oft sogar erwünscht, weil die Ergebnisse nah am ursprünglichen Farbton bleiben.
Praktisch wird es beim Export. Ein Klick kopiert die Palette als CSS Custom Properties, fertig zum Einfügen in einen :root-Block, oder als bloße Liste von Hex-Codes für ein Design-Tool. Schalten Sie die Namen im Tailwind-Stil ein, wird die Palette auf die vertraute Skala von 50 bis 900 abgebildet — 50 bis 400 heller, 500 als Ihre Grundfarbe, 600 bis 900 dunkler —, die sich direkt in ein Tailwind-Theme oder jede Token-Datei mit derselben Konvention einfügen lässt. Sie können die Palette auch als .css-Datei herunterladen. Jede Berechnung und die Datei selbst entstehen zu 100 % in Ihrem Browser; die Farbe, die Sie wählen, wird nie an einen Server gesendet.
Ein Tint ist Ihre Farbe gemischt mit Weiß, ein Shade Ihre Farbe gemischt mit Schwarz und ein Tone Ihre Farbe gemischt mit Grau. Tints und Shades verändern die Helligkeit; Tones senken vor allem die Sättigung und ergeben ein gedämpftes Resultat bei ähnlicher Helligkeit.
Jede Stufe ist eine schlichte lineare Mischung der RGB-Kanäle zwischen Ihrer Grundfarbe und Weiß, Schwarz oder 50 % Grau, in 10-%-Schritten — der zehnte Tint ist also reines Weiß und der zehnte Shade reines Schwarz. Die Werte sind vollständig reproduzierbar.
Ja. Aktivieren Sie die Namen im Tailwind-Stil, und der Export nutzt die Skala von 50 bis 900 mit 500 als Ihrer Grundfarbe — fertig zum Einfügen in Ihre Theme-Konfiguration oder eine Datei mit CSS-Variablen.
Nicht automatisch. Die Skala ist mathematisch gleichmäßig, nicht wahrnehmungsbasiert gleichmäßig — Sie müssen Text- und Hintergrundpaare also weiterhin gegen die WCAG-Kontrastschwellen prüfen. Als Faustregel: Kombinieren Sie die hellsten Tints mit den dunkelsten Shades.
Nein. Die Palette, der CSS-Export und die heruntergeladene Datei entstehen alle lokal in JavaScript auf Ihrem Gerät — nichts wird übertragen oder auf einem Server gespeichert.
Vai.la verwandelt jede URL in einen Kurzlink mit Klick-Statistiken, QR-Code und Ihrem eigenen Biolink.
Vai.la übernimmt keine Verantwortung für die Nutzung der Tools oder für Entscheidungen, die auf ihren Ergebnissen basieren.