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.

Für Entwickler, die keine Zeit mit Design verschwenden wollen

Wähle eine Farbe
Erhalte ein komplettes System

getcolors.dev generiert ein komplettes Farbsystem aus einer einzigen Farbe: visuelle Vorschau, Dark Mode, Komponentenzustände und CSS-Code zum Kopieren

Jetzt startenEinmalzahlung · $5.00

CSS-Variablen

Dark & Light

Sofort einsatzbereit

Sehen Sie das Ergebnis in Aktion

Wählen Sie eine Farbe und sehen Sie das System in Echtzeit generiert

Vorschau

Schaltflächen

Beispiel-Karte

Echter Inhalt mit Surface, Border und Text-Muted aus dem generierten System

Generierte Tokens

· 8 gesperrt

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

••••••

Generierter CSS-Code

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

Schalten Sie das komplette System frei

16 Tokens · Dark/Light Mode · CSS-Variablen · Beispieldatei

Mein System generieren →

Einmalzahlung · $5.00

So funktioniert's