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

Arrêtez d'ajuster les couleurs manuellement

Générez un système de couleurs prêt pour la production à partir d'1 couleur

Choisissez un hex. Obtenez un système de couleurs cohérent pour votre UI — mode sombre, mode clair, états des boutons, variables CSS — le tout prêt en 30 secondes.

Générer mon système de couleurs →Prêt à utiliser

Paiement unique · $5.00

Variables CSS

Dark & Light

Prêt à utiliser

Conçu par des devs indie, pour des devs indie · Pas d'abonnement — payez une seule fois

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

#cc9d72

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: #cc9d72;
  --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

Cohérence pour votre UI sans y penser. Mode sombre, tokens et code — réglé.

Générer mon système de couleurs →

Paiement unique · $5.00

Choisissez votre cas d'utilisation

🌐

Site web

Landing pages, navbars, sections hero — optimisé pour le web

Explore →

🎨

Marque

Identité visuelle, palette de logo, directives et assets

Explore →

⚡

UI / App

Dashboards, composants, design tokens — prêt pour la production

Explore →

Comment ça marche

Conçu pour les builders SaaS qui livrent vite

🎨1

Choisissez une couleur

Utilisez le sélecteur ou collez un code hex — une seule décision

⚡2

Voyez l'aperçu

Un vrai layout avec cartes, boutons, textes et états avec votre couleur

📦3

Copiez le code

Téléchargez le CSS avec variables, mode sombre et un exemple HTML

Prêt à utiliser

Générez un système de couleurs prêt pour la production à partir d'1 couleur

Choisissez un hex. Obtenez un système de couleurs cohérent pour votre UI — mode sombre, mode clair, états des boutons, variables CSS — le tout prêt en 30 secondes.

Générer mon système de couleurs →

Paiement unique · $5.00

Arrêtez d'ajuster les couleurs manuellement

Voyez le résultat en action

Carte d'exemple

Tokens générés

Code CSS généré

Choisissez votre cas d'utilisation

Site web

Marque

UI / App

Comment ça marche

Choisissez une couleur

Voyez l'aperçu

Copiez le code

Générez un système de couleurs prêt pour la production à partir d'1 couleur

Questions fréquentes

Voyez le résultat en action

Carte d'exemple

Tokens générés

Code CSS généré