What is getcolors.dev?

getcolors.dev is a tool that generates a complete color system from a single hex color. You get a visual preview, dark/light mode, CSS variables and ready-to-use code.

How much does getcolors.dev cost?

getcolors.dev costs $5 USD (or R$9.90 in Brazil) as a one-time payment. No subscription, no recurring fees.

What do I get when I pay?

You get a complete color system with all CSS variables, dark/light mode tokens, an example HTML file, and a full visual preview of all component states.

Can I use Cores with Tailwind CSS?

Yes. Cores generates standard CSS custom properties (variables) that work with any framework including Tailwind CSS, React, Vue, and plain HTML/CSS.

Does Cores support dark mode?

Yes. Every color system includes both dark and light mode tokens, automatically generated from your chosen base color.

Para devs que no quieren perder tiempo con diseño

Elige un color
Recibe un sistema completo

getcolors.dev genera un sistema de colores completo a partir de un solo color: vista previa visual, modo oscuro, estados de componentes y código CSS listo para copiar

ComenzarPago único · $5.00

Variables CSS

Dark & Light

Listo para usar

Mira el resultado en acción

Elige un color y ve el sistema completo generado en tiempo real

Vista previa

Botones

Card de ejemplo

Contenido real usando surface, border y text-muted del sistema generado

Tokens generados

· 8 bloqueados

Background

#101012

Surface

#1c1c1f

Primary

#6366f2

Accent

#f26366

Primary Hover

••••••

Primary Disabled

••••••

Text Primary

••••••

Text Muted

••••••

Text on Primary

••••••

Text on Accent

••••••

Border

••••••

Focus Ring

••••••

Código CSS generado

variables.css

:root {
  --color-primary: #6366f2;
  --color-accent: #f26366;
  --color-background: #101012;
  --color-surface: /* locked */;
  --color-primary-hover: /* locked */;
  --color-primary-disabled: /* locked */;
  --color-text-primary: /* locked */;
  --color-text-muted: /* locked */;
  --color-text-on-primary: /* locked */;
  --color-text-on-accent: /* locked */;
  --color-border: /* locked */;
  --color-focus-ring: /* locked */;
  /* ...more variables available after payment */
}

Desbloquea el sistema completo

16 tokens · dark/light mode · variables CSS · archivo de ejemplo

Generar mi sistema →

Pago único · $5.00

Cómo funciona

Elige un color

Usa el selector de color o pega un código hex — solo una decisión

Ve la vista previa

Un diseño real con cards, botones, textos y estados con tu color

Copia el código

Descarga el CSS con variables, modo oscuro y un ejemplo HTML

Preguntas frecuentes

¿Qué es getcolors.dev?: getcolors.dev es una herramienta que genera un sistema de colores completo a partir de un solo color hex. Recibes vista previa visual, modo oscuro/claro, variables CSS y código listo para usar
¿Cuánto cuesta?: $5.00 en un solo pago — sin suscripción, sin cargos recurrentes
¿Funciona con Tailwind CSS?: Sí — getcolors.dev genera propiedades personalizadas CSS (variables) que funcionan con cualquier framework: Tailwind, React, Vue o HTML/CSS puro
¿Tiene modo oscuro?: Sí — cada sistema de colores incluye tokens para modo oscuro y claro, generados automáticamente a partir del color base elegido

Elige un colorRecibe un sistema completo

Mira el resultado en acción

Card de ejemplo

Tokens generados

Código CSS generado

Cómo funciona

Elige un color

Ve la vista previa

Copia el código

Preguntas frecuentes

Mira el resultado en acción

Card de ejemplo

Tokens generados

Código CSS generado

Elige un color
Recibe un sistema completo