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 não querem perder tempo com design

Escolha uma cor
Receba um sistema inteiro

getcolors.dev gera um sistema de cores completo a partir de uma única cor: preview visual, dark mode, estados de componentes e código CSS pronto para copiar

ComeçarPagamento único · R$9,90

CSS Variables

Dark & Light

Pronto para usar

Veja o resultado na prática

Escolha uma cor e veja o sistema gerado em tempo real

Preview

Botões

Card de exemplo

Conteúdo real usando surface, border e text-muted do sistema gerado

Tokens gerados

· 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 gerado

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 */
}

Desbloqueie o sistema completo

16 tokens · dark/light mode · variáveis CSS · arquivo de exemplo

Gerar meu sistema →

Pagamento único · R$9,90

Como funciona

Escolha uma cor

Use o color picker ou cole um código hex — só uma decisão

Veja o preview

Um layout real mostrando cards, botões, textos e estados com a sua cor

Copie o código

Baixe o CSS pronto com variáveis, dark mode e um exemplo HTML

Perguntas frequentes

O que é o getcolors.dev?: getcolors.dev é uma ferramenta que gera um sistema de cores completo a partir de uma única cor hex. Você recebe preview visual, dark/light mode, variáveis CSS e código pronto para usar
Quanto custa?: R$9,90 em pagamento único — sem assinatura, sem recorrência
Funciona com Tailwind CSS?: Sim — getcolors.dev gera CSS custom properties (variáveis) que funcionam com qualquer framework: Tailwind, React, Vue ou HTML/CSS puro
Tem dark mode?: Sim — todo sistema de cores inclui tokens para dark e light mode, gerados automaticamente a partir da cor base escolhida

Escolha uma corReceba um sistema inteiro

Veja o resultado na prática

Card de exemplo

Tokens gerados

Código CSS gerado

Como funciona

Escolha uma cor

Veja o preview

Copie o código

Perguntas frequentes

Veja o resultado na prática

Card de exemplo

Tokens gerados

Código CSS gerado

Escolha uma cor
Receba um sistema inteiro