CSS light theme generator
ï„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
îą Tip: Press SPACE to generate a random primary color
î Click a color block to copy to your clipboard.
Preview
Hover over the elements to preview the color variables.
Colorffy
î« Dashboard
î« Analytics
îŻ Users
îąž Settings
Dashboard
Light Theme
Featured integrations
Featured Card
Far far away, behind the word mountains #1.
Featured Card
Far far away, behind the word mountains #2.
Featured Card
Far far away, behind the word mountains #3.
Featured Card
Far far away, behind the word mountains #4.
All integrations
Card Surface #1
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #2
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #3
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #4
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #5
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #6
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #7
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #8
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Card Surface #9
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
Code
/** Base colors */
--clr-dark-a0: #000000;
--clr-light-a0: #ffffff;
/** Light 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;
/** Light 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;
/** Light 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);
}