Web / CSS

Color Palette Generator

Create consistent CSS variables for colors, spacing, font sizes and layout widths. The result can be copied directly as a :root block into a CSS file.

Configure palette

Choose a base color, a palette model and typical design-system values for layout, spacing and typography.

Base color

Palette model

Variable prefix

Output

Base font size

Base spacing

Base radius

Content width

Wide layout width

Additional variables Add dark-mode suggestion Add status colors Include comments in CSS

Preview

No palette created yet.

Design preview

Example card

This preview shows text, surface, border and action color using the generated palette.

Contrast primary/text -

Contrast surface/text -

CSS output

The generated block can be copied directly into a CSS file or downloaded.

Why CSS variables help

Colors, spacing and font sizes are maintained in one place. This keeps websites more consistent and makes later design changes faster.

Practical use

The generated :root block is a useful starting point for small websites, prototypes, documentation pages and reusable components.