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.

Welche Farben passen gut zu Blau?

Unser Generator erstellt automatisch eine komplementäre Akzentfarbe, ausgewogene Textfarben und neutrale Hintergründe.

Funktioniert ein Blau-Farbsystem im Dark Mode?

Absolut. Unser Generator erstellt optimierte Varianten für Dark und Light Mode.

Kann ich die Blau-Palette nach dem Generieren anpassen?

Ja! Die generierte Palette ist ein Ausgangspunkt. Sie können jeden Farbton als Basis wählen.

Blau Farbsystem

#3B82F6

Ein komplettes blau Farbsystem, bereit für die Produktion. Sehen Sie die Live-Palette unten — Hintergrund, Oberfläche, Primärfarbe, Akzent, Textfarben und Button-Zustände — alles automatisch generiert mit Dark- und Light-Mode-Unterstützung.

Vorschau

Sieh wie deine Farbe in Aktion aussieht

Primary text (text-primary)

#dae3f2

Secondary text (text-muted) — descriptions, placeholders, captions

#a1a7b3

Buttons

Beispiel-Karte

So sieht der Inhalt in einer Karte aus

Background

--color-background

#101112

Surface

--color-surface

#1c1d1f

Primary

--color-primary

#3b82f5

Accent

--color-accent

#f53b82

🔒

Primary Hover

--color-primary-hover

••••••

🔒

Primary Disabled

--color-primary-disabled

••••••

🔒

Text Primary

--color-text-primary

••••••

🔒

Text Muted

--color-text-muted

••••••

🔒

Text on Primary

--color-text-on-primary

••••••

🔒

Text on Accent

--color-text-on-accent

••••••

🔒

Border

--color-border

••••••

🔒

Focus Ring

--color-focus-ring

••••••

Generieren Sie Ihr eigenes System

Alle 16 Tokens + Dark/Light Export freischalten

Generieren Sie Ihr eigenes System →

Einmalzahlung · 5 $

Warum Blau für Ihre UI?

Blau ist die meistverwendete Farbe im UI-Design — und das aus gutem Grund. Sie vermittelt Vertrauen, Stabilität und Professionalität. Von Facebook über Twitter bis LinkedIn dominiert Blau, weil es universell ansprechend und augenschonend für lange Bildschirmzeiten ist. Ein blaubasiertes Farbsystem funktioniert für praktisch jede Art von Webanwendung.

What you get

16 Farb-Tokens mit semantischen Namen (--color-primary, --color-surface, --color-success, etc.)
Dark Mode + Light Mode — automatisch generiert
WCAG-konforme Text-Kontrastverhältnisse
Button-Zustände: Primary, Hover, Disabled, Accent
CSS-Variablen zum direkten Einfügen in jedes Projekt
Kompatibel mit Tailwind CSS, React, Vue oder reinem HTML

Erstellen Sie Ihr eigenes Farbsystem

Mit dieser Farbe starten

One-time payment · $5.00

FAQ

Welche Farben passen gut zu Blau?: Unser Generator erstellt automatisch eine komplementäre Akzentfarbe, ausgewogene Textfarben und neutrale Hintergründe.
Funktioniert ein Blau-Farbsystem im Dark Mode?: Absolut. Unser Generator erstellt optimierte Varianten für Dark und Light Mode.
Kann ich die Blau-Palette nach dem Generieren anpassen?: Ja! Die generierte Palette ist ein Ausgangspunkt. Sie können jeden Farbton als Basis wählen.

Weitere Farbsysteme entdecken

Indigo Farbsystem

Cyan Farbsystem

Blaugrün Farbsystem

Farbsystem für SaaS-Dashboard

Vorschau

Sieh wie deine Farbe in Aktion aussieht

Primary text (text-primary)

#dae3f2

Secondary text (text-muted) — descriptions, placeholders, captions

#a1a7b3

Buttons

Beispiel-Karte

So sieht der Inhalt in einer Karte aus

Background

--color-background

#101112

Surface

--color-surface

#1c1d1f

Primary

--color-primary

#3b82f5

Accent

--color-accent

#f53b82

🔒

Primary Hover

--color-primary-hover

••••••

🔒

Primary Disabled

--color-primary-disabled

••••••

🔒

Text Primary

--color-text-primary

••••••

🔒

Text Muted

--color-text-muted

••••••

🔒

Text on Primary

--color-text-on-primary

••••••

🔒

Text on Accent

--color-text-on-accent

••••••

🔒

Border

--color-border

••••••

🔒

Focus Ring

--color-focus-ring

••••••

Generieren Sie Ihr eigenes System

Alle 16 Tokens + Dark/Light Export freischalten

Generieren Sie Ihr eigenes System →

Einmalzahlung · 5 $