Light Theme Generator

Surface color

Featured integrations

All integrations

Variables

Primaries



--clr-primary-a0



--clr-primary-a10



--clr-primary-a20



--clr-primary-a30



--clr-primary-a40



--clr-primary-a50

Surface



--clr-surface-a0



--clr-surface-a10



--clr-surface-a20



--clr-surface-a30



--clr-surface-a40



--clr-surface-a50

How the Light Theme Generator works

Generate your custom light theme with our easy-to-use CSS and SCSS Light Theme Generator to easily create and manage your CSS and SCSS custom theme variables.

Tonal palettes

Primary tints

Best used for primary elements like buttons, links, and other primary elements.

#aca674

Primary - a0

#a7a276

Primary - a10

#a29d77

Primary - a20

#9e9978

Primary - a30

#99957a

Primary - a40

#94917b

Primary - a50

Surface colors

Best used for surface elements like cards, backgrounds, and other surface elements.

#ffffff

Surface - a0

#f0f0f0

Surface - a10

#e1e1e1

Surface - a20

#d3d3d3

Surface - a30

#c5c5c5

Surface - a40

#b6b6b6

Surface - a50

Tonal surface colors

A tonal surface variant, best used for surface elements like cards, backgrounds, and other surface elements.

#f7f6f0

Tonal - a0

#e9e8e3

Tonal - a10

#dbdbd6

Tonal - a20

#cecdc9

Tonal - a30

#c0c0bd

Tonal - a40

#b3b3b0

Tonal - a50



/** Base colors */
--clr-dark-a0: #000000;
--clr-light-a0: #ffffff;

/** Theme primary colors */
--clr-primary-a0: #aca674;
--clr-primary-a10: #a7a276;
--clr-primary-a20: #a29d77;
--clr-primary-a30: #9e9978;
--clr-primary-a40: #99957a;
--clr-primary-a50: #94917b;

/** Theme surface colors */
--clr-surface-a0: #ffffff;
--clr-surface-a10: #f0f0f0;
--clr-surface-a20: #e1e1e1;
--clr-surface-a30: #d3d3d3;
--clr-surface-a40: #c5c5c5;
--clr-surface-a50: #b6b6b6;

/** Theme tonal surface colors */
--clr-surface-tonal-a0: #f7f6f0;
--clr-surface-tonal-a10: #e9e8e3;
--clr-surface-tonal-a20: #dbdbd6;
--clr-surface-tonal-a30: #cecdc9;
--clr-surface-tonal-a40: #c0c0bd;
--clr-surface-tonal-a50: #b3b3b0;

/** Examples */
.bg-primary {
 color: var(--clr-primary-a50);
 background-color: var(--clr-surface-a0);
}

PWA prompt

CSS light theme generator

Light Theme

How the Light Theme Generator works

Tonal palettes

Primary tints

Surface colors

Tonal surface colors