Farbskalen, die einfach funktionieren.
Eine Farbe einfügen. Eine vollständige, kontrastsichere Skala im System erhalten, das du schon nutzt. Ohne Einstellungen. Ohne Anmeldung.
- ✓ Deine Farbe liegt auf 700
- ✓ Text auf Weiß ab 700
- ✓ Gleichmäßig verteilt
Kostenlos · Läuft in deinem Browser
Gleiche Farbe. Zwei Skalen.
Die meisten Generatoren verteilen Helligkeit. Tintfield verteilt Kontrast.
- ✓ Jede Stufe unterscheidbar
- ✓ Deine Farbe auf ihrer natürlichen Stufe
- ✓ Überall lesbar
Eine Farbe. Null Einstellungen.
Tintfield platziert deine Farbe, verteilt die Stufen und prüft den Kontrast. Du entscheidest nur, wenn du willst.
Gleiche Stufe, gleicher Kontrast.
Teal 600 und Orange 600 bestehen dieselben Prüfungen. Eine Regel für die ganze Palette: Text auf Weiß ab 600.
Spricht dein System.
Tailwinds 50–950, Radix’ 1–12, Materials Tones. Tintfield nutzt die Stufen und Namen, mit denen du schon arbeitest.
50 · 500 · 950
In drei Schritten von der Farbe zum Code
1
Farbe wählen.
Hex einfügen oder mit einem Beispiel starten.
2
System wählen.
Tailwind, Radix, Material und mehr.
3
Exportieren.
Tailwind, CSS oder Design Tokens, hell und dunkel.
Direkt ins Projekt übernehmen
@theme {
--color-teal-50: #eff8f8;
--color-teal-100: #e8f4f4;
--color-teal-200: #d3e5e6;
--color-teal-300: #b3d2d4;
--color-teal-400: #7db9bb;
--color-teal-500: #4ea2a6;
--color-teal-600: #238b90;
--color-teal-700: #0d7377;
--color-teal-800: #19585a;
--color-teal-900: #1e3b3d;
--color-teal-950: #172424;
}
Anleitungen: Figma · Tailwind · CSS · Tokens
Bald verfügbar
Tintfield für Figma
Deine Skalen als Figma-Variablen, inklusive Hell- und Dunkelmodus. Farbe ändern, alle Variablen ziehen mit.
Eine E-Mail zum Start. Kein Spam. Jederzeit abmeldbar. Datenschutz
Fragen
Ja. Der Generator ist kostenlos, ohne Konto und ohne Limits.