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.

Pour les devs qui ne veulent pas perdre de temps avec le design

Choisissez une couleur
Obtenez un système complet

getcolors.dev génère un système de couleurs complet à partir d'une seule couleur : aperçu visuel, mode sombre, états des composants et code CSS prêt à copier

CommencerPaiement unique · $5.00

Variables CSS

Dark & Light

Prêt à utiliser

Voyez le résultat en action

Choisissez une couleur et voyez le système complet généré en temps réel

Aperçu

Boutons

Carte d'exemple

Contenu réel utilisant surface, border et text-muted du système généré

Tokens générés

· 8 verrouillés

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

••••••

Code CSS généré

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

Débloquez le système complet

16 tokens · dark/light mode · variables CSS · fichier d'exemple

Générer mon système →

Paiement unique · $5.00

Comment ça marche