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.

For devs who don't want to waste time on design

Pick a color
Get a full system

getcolors.dev generates a complete color system from a single color: visual preview, dark mode, component states and CSS code ready to copy

Get StartedOne-time payment · $5.00

CSS Variables

Dark & Light

Ready to use

See the result in action

Pick a color and see the full system generated in real time

Preview

Buttons

Example card

Real content using surface, border and text-muted from the generated system

Generated tokens

· 8 locked

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

••••••

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

Unlock the full system

16 tokens · dark/light mode · CSS variables · example file

Generate my system →

One-time payment · $5.00

How it works

Pick a color

Use the color picker or paste a hex code — just one decision

See the preview

A real layout showing cards, buttons, text and states with your color

Copy the code

Download the CSS with variables, dark mode and an HTML example

Frequently asked questions

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 it cost?: $5.00 as a one-time payment — no subscription, no recurring fees
Does it work with Tailwind CSS?: Yes — getcolors.dev generates standard CSS custom properties (variables) that work with any framework including Tailwind CSS, React, Vue, and plain HTML/CSS
Does it support dark mode?: Yes — every color system includes both dark and light mode tokens, automatically generated from your chosen base color

Pick a colorGet a full system

See the result in action

Example card

Generated tokens

Generated CSS code

How it works

Pick a color

See the preview

Copy the code

Frequently asked questions

See the result in action

Example card

Generated tokens

Generated CSS code

Pick a color
Get a full system