¿Por qué un prefijo?

Prefijar evita colisiones y aclara la intención. `--color-primary` se lee mejor que `--primary` cuando también tienes tokens de espaciado, radio, etc. Para Tailwind, el prefijo se vuelve la clave bajo `extend` — `extend.colors` es la convención por defecto de Tailwind, pero podrías querer `extend.brand` o `extend.surface` para paletas con scope.

¿El JSON de Design Tokens coincide con la spec W3C?

Casi. Usa `{ value, type: 'color' }` por token, que coincide con el borrador del Design Tokens Community Group. Para cumplimiento estricto W3C puede que necesites anidar tokens bajo un objeto grupo — pero la mayoría de herramientas (Style Dictionary, Specify, Cobalt) manejan la forma plana sin problema y aplican sus propias transformaciones.

Exportador de Tokens de Color

Color

Una única fuente de verdad para una paleta de colores, con exportación de un clic al stack que estés enviando. Añade tokens por nombre y hex (3, 6 u 8 dígitos), elige un prefijo (`color`, `brand`, `surface` etc.), y la salida se regenera en el formato elegido. CSS da custom properties `--color-primary` bajo `:root`. Tailwind da un bloque `theme.extend.colors` que pegas en `tailwind.config.js`. SCSS da tanto variables `$color-primary` como un map `$colors` para `map.get`. JSON sigue la forma `{ value, type }` del Design Tokens Community Group. iOS da una extensión SwiftUI `Color`; Android da el formato de recursos `colors.xml` con guiones bajos. Los presets te dan un comienzo con marca, escala neutra o colores de estado.

—

PrefijoFormato de salida

Preset:

Tokens

Vista previa

primary

primary-hover

surface

surface-muted

text

text-muted

border

danger

Salida

:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-danger: #ef4444;
}

Los nombres se sanitizan a kebab-case. El hex auto-expande #abc → #aabbcc.

Cómo usar

Elige un preset, o construye tu paleta desde cero. Los nombres se sanitizan a `kebab-case`.
Pon un prefijo que tenga sentido para tu stack: `color` para CSS, `colors` (o déjalo en blanco) para Tailwind, ninguno para SCSS si quieres simple `$primary`.
Cambia formato. Copia. Pega en tu hoja de estilos, archivo de tema o catálogo de assets.

Preguntas frecuentes

¿Por qué un prefijo?: Prefijar evita colisiones y aclara la intención. `--color-primary` se lee mejor que `--primary` cuando también tienes tokens de espaciado, radio, etc. Para Tailwind, el prefijo se vuelve la clave bajo `extend` — `extend.colors` es la convención por defecto de Tailwind, pero podrías querer `extend.brand` o `extend.surface` para paletas con scope.
¿El JSON de Design Tokens coincide con la spec W3C?: Casi. Usa `{ value, type: 'color' }` por token, que coincide con el borrador del Design Tokens Community Group. Para cumplimiento estricto W3C puede que necesites anidar tokens bajo un objeto grupo — pero la mayoría de herramientas (Style Dictionary, Specify, Cobalt) manejan la forma plana sin problema y aplican sus propias transformaciones.