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.

Sistemas de Cores

Paletas de cores prontas para seu próximo projeto

Por Cor Combinações de Cores Por Caso de Uso Por Estilo Para Frameworks

Gere por caso de uso

🌐

Website

Paleta otimizada para landing pages e sites

Explore →

🎨

Marca

Identidade visual e diretrizes de marca

Explore →

⚡

UI / App

Design tokens para dashboards e componentes

Explore →

Por Cor

Sistema de Cores Azul

#3B82F6

Ver sistema →

Sistema de Cores Verde

#22C55E

Ver sistema →

Sistema de Cores Vermelho

#EF4444

Ver sistema →

Sistema de Cores Roxo

#8B5CF6

Ver sistema →

Sistema de Cores Laranja

#F97316

Ver sistema →

Sistema de Cores Rosa

#EC4899

Ver sistema →

Sistema de Cores Teal

#14B8A6

Ver sistema →

Sistema de Cores Amarelo

#EAB308

Ver sistema →

Sistema de Cores Índigo

#6366F1

Ver sistema →

Sistema de Cores Ciano

#06B6D4

Ver sistema →

Combinações de Cores

Sistema de Cores para Azul e Laranja

#3B82F6 + #F97316

Ver sistema →

Sistema de Cores para Preto e Dourado

#1A1A1A + #D4AF37

Ver sistema →

Sistema de Cores para Roxo e Rosa

#8B5CF6 + #EC4899

Ver sistema →

Sistema de Cores para Verde e Azul

#22C55E + #3B82F6

Ver sistema →

Sistema de Cores para Vermelho e Preto

#EF4444 + #1A1A1A

Ver sistema →

Por Caso de Uso

Sistema de Cores para Dashboard SaaS

#6366F1

Ver sistema →

Sistema de Cores para Painel Admin

#3B82F6

Ver sistema →

Sistema de Cores para E-commerce

#22C55E

Ver sistema →

Sistema de Cores para Portfólio

#8B5CF6

Ver sistema →

Sistema de Cores para Landing Page de Startup

#F97316

Ver sistema →

Sistema de Cores para UI Fintech

#10B981

Ver sistema →

Sistema de Cores para App de Saúde

#14B8A6

Ver sistema →

Sistema de Cores para App de Delivery

#EF4444

Ver sistema →

Sistema de Cores para Plataforma de Ensino

#8B5CF6

Ver sistema →

Sistema de Cores para UI de Games

#00FF88

Ver sistema →

Sistema de Cores para Blog e Magazine

#F59E0B

Ver sistema →

Sistema de Cores para Paleta de Cores para Website

#3B82F6

Ver sistema →

Sistema de Cores para Paleta de Cores para Branding

#8B5CF6

Ver sistema →

Sistema de Cores para Melhores Cores para App Mobile

#06B6D4

Ver sistema →

Sistema de Cores para Paleta de Cores para Design de Logo

#EF4444

Ver sistema →

Sistema de Cores para Melhor Sistema de Cores para Dashboard SaaS

#6366F1

Ver sistema →

Por Estilo

Sistema de Cores para Sistema de Cores Pastel

#A5B4FC

Ver sistema →

Sistema de Cores para Sistema de Cores Neon

#00FF88

Ver sistema →

Sistema de Cores para Gerador de Dark Theme

#6366F1

Ver sistema →

Sistema de Cores para Paleta de Cores Minimalista

#64748B

Ver sistema →

Sistema de Cores para Paleta de Cores Quentes

#F59E0B

Ver sistema →

Sistema de Cores para Paleta de Cores Frias

#0EA5E9

Ver sistema →

Sistema de Cores para Paleta de Cores Moderna 2026

#6366F1

Ver sistema →

Sistema de Cores para Paleta de Cores Estética

#C4B5FD

Ver sistema →

Sistema de Cores para Inspiração de Paleta de Cores

#F472B6

Ver sistema →

Sistema de Cores para Hex para Sistema de Cores

#3B82F6

Ver sistema →

Sistema de Cores para Como Criar Dark Mode com Variáveis CSS

#8B5CF6

Ver sistema →

Sistema de Cores para Exemplo de Tokens de Cor Semânticos

#3B82F6

Ver sistema →

Sistema de Cores para Gerador de Sistema de Cores Acessível

#14B8A6

Ver sistema →

Sistema de Cores para Gerador de Paleta de Cores para Desenvolvedores

#6366F1

Ver sistema →

Sistema de Cores para Sistema de Cores com CSS Custom Properties

#3B82F6

Ver sistema →

Sistema de Cores para Sistema de Cores UI — Sem Precisar Saber Design

#8B5CF6

Ver sistema →

Sistema de Cores para De Uma Cor para Paleta Completa

#EF4444

Ver sistema →

Para Frameworks

Sistema de Cores para Paleta de Cores Tailwind CSS

#06B6D4

Ver sistema →

Sistema de Cores para Design Tokens para React

#61DAFB

Ver sistema →

Sistema de Cores para Cores de Tema Next.js

#000000

Ver sistema →

Sistema de Cores para Tema de Cores shadcn/ui

#18181B

Ver sistema →

Sistema de Cores para Gerador de Design Tokens de Cor

#6366F1

Ver sistema →

Sistema de Cores para Tema de Cores Vue.js

#42B883

Ver sistema →

Sistema de Cores para Figma para Variáveis CSS de Cor

#A259FF

Ver sistema →

Sistema de Cores para Sistema de Cores para Tailwind

#06B6D4

Ver sistema →

Ferramentas Gratuitas

♿

Verificador de Contraste

Verifique se suas cores passam nas diretrizes WCAG AA e AAA

Pare de ajustar cores — gere seu sistema na hora

Gerar meu sistema de cores