Design system · Gratis
Generador de tonos de color
5–20 tonos, etiquetas Tailwind 50–950, sugerencias de armonía, export CSS vars/Tailwind/SCSS/JSON — 100 % local.
5–20 tonos
Etiquetas Tailwind
100 % local
Volade Tools
Generador de tonos de color
Sin cuentav1.0.0
Color base
HSL 239° · 84% · 67% — 10 tonos generados
Exportar tonos
: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;
}Generador de tonos: escalas Tailwind y design tokens
5–20 tonos con etiquetas 50–950 — 100 % local.
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. Genere ramps primary-50 a 950 con etiquetas Tailwind, exporte como CSS vars o tailwind.config — sin enviar hex de marca a 0to255. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables.
Por qué creamos esta herramienta
Because hand-copying scales from 0to255 or Tailwind docs wastes time. Because teams needed slider, harmony, and code exports in one local tool.
«Slider de 10 tonos + export Tailwind evitó copiar primary-50 a 900 desde 0to255.»
Julien P.
Dev front Tailwind
«Sugerencias de armonía antes de fijar la escala de marca — todo local para el cliente bancario.»
Amina K.
UX lead finanzas
«Módulo JS V+ en Storybook — historial 100 para variantes 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. Genere ramps primary-50 a 950 con etiquetas Tailwind, exporte como CSS vars o tailwind.config — sin enviar hex de marca a 0to255. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables. Volade registra cada variante sin enviar sus colores a servidores terceros — verificable en DevTools, offline tras la primera carga, con historial local para cuentas conectadas y exportaciones V+ sin marca de agua para entregables.
Puntos clave
- 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.
En 4 pasos
- 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.
Casos de uso
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 competidores
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 |
Comparación orientativa — julio 2026. «Parcial» = función limitada o cuenta requerida.
Volade apunta a flujos repetidos y sensibles con historial y exportación — no a un clic puntual.
Funciones por plan
Slider, Tailwind labels, harmony, and CSS/Tailwind/SCSS/JSON exports are free. V+: JS module, PNG, ASE, watermark-free copy, 100 history.
| Función | Gratis | V+ Premium |
|---|---|---|
| Adjustable 5–20 shades | ||
| Tailwind 50–950 labels | ||
| Harmony suggestions (5) | ||
| CSS vars / Tailwind / SCSS / JSON export | No watermark | |
| JS module export | — | |
| PNG strip export | — | |
| Adobe ASE export | — | |
| Per-shade lock | ||
| Scale history | 10 | 100 |
| 100% local processing |
Free for daily scales. V+ for JS tokens and Adobe deliverables.
Sus colores no salen del navegador
No shade data is sent to Volade servers. History stores hex, count, and name in localStorage.
Buenas prácticas
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
Ante la duda, pruebe con una muestra antes de desplegar o importar en masa.
¿Sabía que…?
20max shades per scale
0bytes sent to generate ramps
100max history on V+
Preguntas frecuentes
Slider, Tailwind, harmony, exports, JS module, PNG/ASE, WCAG, history, and 0to255 comparison — ten answers.
No. Los 5–20 tonos y exportaciones se calculan en JavaScript local.
DevTools → Network: cero envío.
V+ Premium
Tailwind-ready shades, local
JS module, PNG, and 100 history — professionalize Volade design tokens.
Prueba 14 días. Sin compromiso.
Recursos relacionados
Última actualización: julio 2026. Fuentes: W3C Color, Tailwind CSS, CCICOLOR Institute.