Design system · Gratis
Farbton-Generator
5–20 Abstufungen, Tailwind 50–950, Harmonie-Vorschläge, CSS vars/Tailwind/SCSS/JSON — 100 % lokal.
5–20 Abstufungen
Tailwind-Labels
100 % lokal
Volade Tools
Farbton-Generator
Gastv1.0.0
Basisfarbe
HSL 239° · 84% · 67% — 10 Abstufungen
Abstufungen exportieren
:root {
--color-50: #e0e1f5;
--color-100: #bcbdeb;
--color-200: #9698e3;
--color-300: #6e70dd;
--color-400: #4648d8;
--color-500: #2427c6;
--color-600: #191ca3;
--color-700: #10127e;
--color-800: #0a0b57;
--color-900: #04052f;
}Farbton-Generator: Tailwind-Skalen und Design Tokens
5–20 Abstufungen mit 50–950 Labels — 100 % lokal.
Modern design systems rely on primary-50 through primary-950 scales — Tailwind, Chakra, Material 3. Volade generates 5–20 shades with Tailwind-friendly labels, harmony suggestions (complementary, analogous, triadic), per-swatch lock, and CSS variables, Tailwind config, SCSS, JSON exports — plus JS module, PNG, and ASE on V+. Everything stays in the browser: no upload to Coolors, 0to255, or Adobe Color. Erzeugen Sie primary-50 bis 950 mit Tailwind-Labels, exportieren als CSS vars oder tailwind.config — ohne Marken-Hex an 0to255. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen.
Warum dieses Tool
Because hand-copying scales from 0to255 or Tailwind docs wastes time. Because teams needed slider, harmony, and code exports in one local tool.
«10-Abstufungen-Slider plus Tailwind-Export statt manuellem Kopieren von 0to255.»
Julien P.
Tailwind-Entwickler
«Harmonie-Vorschläge vor Fixierung der Markenskala — lokal für Bankkunden.»
Amina K.
UX Lead Finanz
«V+ JS-Modul in Storybook — Verlauf 100 für Dark/Light.»
Lena W.
Design Ops
Why generate shade scales?
One primary hex isn't enough — hover, disabled, surfaces, and text need different luminance. Without a coherent ramp, teams invent ad hoc hex values that break consistency.
Volade produces a smooth ramp named like Tailwind, copy-ready in one click — history recalls the 10- or 12-shade variant approved in review. Erzeugen Sie primary-50 bis 950 mit Tailwind-Labels, exportieren als CSS vars oder tailwind.config — ohne Marken-Hex an 0to255. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen. Volade dokumentiert jede Variante, ohne Ihre Farben an Drittserver zu senden — in DevTools nachprüfbar, nach dem ersten Laden offline, mit lokalem Verlauf für angemeldete Konten und V+-Exporten ohne Filigrane für Kundenlieferungen.
Wichtige Punkte
- 5–20 shades — slider for quick or fine density
- 50–950 labels — ready for tailwind.config
- 5 harmony suggestions — swap base in one click
- 4 free exports — CSS vars, Tailwind, SCSS, JSON
- 100% local — brand ramps without cloud
How to use Volade's shade generator
Four steps from brand hex to exportable design system scale.
In 4 Schritten
- 1
Set base color
Preset, random, or picker — HSL shown with shade count.
- 2
Adjust shade count
5 for quick prototypes, 10–11 Tailwind standard, up to 20 for dense gradients.
- 3
Refine with harmony and lock
Try complementary via suggestions; lock 500 before tweaking.
- 4
Export
Copy CSS vars or Tailwind (free). V+: JS module, PNG strip, ASE.
Anwendungsfälle
Design tokens, Tailwind, and UI kits — when Volade replaces 0to255 and shade spreadsheets.
1
tailwind.config.js
Paste theme.extend.colors.primary from Tailwind export — aligned 50–950 labels.
2
Dark mode
Generate two scales from light/dark bases — V+ history to compare 10 vs 12 shades.
3
Storybook tokens
V+ JS module in preview.js — single source for components.
4
Client presentation
V+ PNG strip for slide decks — no manual Figma screenshots.
Volade vs. Wettbewerber
Volade vs Coolors, Paletton, Adobe Color, ColorSpace, Tailwind docs, and 0to255 — slider, Tailwind labels, exports, privacy.
Volade combines configurable slider, harmony, four free exports, and 10/100 local history. 0to255 excels at simple ramps; Volade adds native Tailwind and V+ JS module.
Volade shades without exposing
Tailwind-ready ramps, code exports, and local history for brand tokens.
| Criterion | Volade | Coolors | Paletton | Adobe Color | ColorSpace | Tailwind | 0to255 |
|---|---|---|---|---|---|---|---|
| 5–20 shade slider | Yes | No | Partial | Partial | Partial | No | Partial |
| Tailwind 50–950 labels | Yes | No | No | Non | No | Oui | No |
| CSS vars + Tailwind export | Yes | Partial | Partial | Partial | Oui | Oui | Partial |
| JS module | V+ | No | No | Non | No | No | No |
| Harmony suggestions | Yes | Partial | Oui | Oui | Oui | No | No |
| 100% local | Yes | Partial | Oui | Non | Partial | Oui | Partial |
| 10/100 history | Yes | Account | No | Account | No | No | No |
Indikative Gegenüberstellung — Juli 2026. „Teilweise“ = eingeschränktes Feature oder Konto nötig.
Volade richtet sich an wiederholte, sensible Workflows mit Historie und Export — nicht an Einzelklicks.
Funktionen nach Tarif
Slider, Tailwind labels, harmony, and CSS/Tailwind/SCSS/JSON exports are free. V+: JS module, PNG, ASE, watermark-free copy, 100 history.
| Funktion | Gratis | V+ Premium |
|---|---|---|
| Abstufungen 5–20 réglables | ||
| Tailwind-Labels 50–950 | ||
| Harmonie-Vorschläge (5) | ||
| CSS-vars-Export / Tailwind / SCSS / JSON | Sans filigrane | |
| Export module JS | — | |
| Export PNG bandeau | — | |
| Export ASE Adobe | — | |
| Verrouillage par nuance | ||
| Skalen-Verlauf | 10 | 100 |
| 100 % lokal |
Free for daily scales. V+ for JS tokens and Adobe deliverables.
Ihre Farben verlassen nie den Browser
No shade data is sent to Volade servers. History stores hex, count, and name in localStorage.
Best Practices
Validate 700/800 contrast on white before using for body text.
- 10 shades default — good Tailwind balance
- Lock 500 — tweak base without losing anchor
- Export Tailwind early — prevent design-code drift
- Complementary harmony — test secondary before locking
- WCAG on 700+ — text on light backgrounds
- V+ JS module — single source for monorepo
Im Zweifel zuerst an einer Stichprobe testen, bevor Sie produktiv gehen.
Wussten Sie schon?
20max shades per scale
0bytes sent to generate ramps
100max history on V+
Häufige Fragen
Slider, Tailwind, harmony, exports, JS module, PNG/ASE, WCAG, history, and 0to255 comparison — ten answers.
Nein. Alle 5–20 Abstufungen und Exporte werden lokal berechnet.
DevTools → Network: null Upload.
V+ Premium
Tailwind-ready shades, local
JS module, PNG, and 100 history — professionalize Volade design tokens.
14 Tage testen. Jederzeit kündbar.
Weiterführende Links
Stand: Juli 2026. Quellen: W3C Color, Tailwind CSS, CCICOLOR Institute.