UI Palette Generator
Generate a stunning color palette for your website or mobile app's user interface.
#aca674
Primary color
Your UI primary color
#74ac8a
#747aac
#ac7496
Accent candidates colors
Best options for your primary color, be free to change it for a custom one.
Tip: Press SPACE to generate colors
Click a color block to copy to your clipboard.
User interface color palettes
Primary tones
Use the primary colors palette to maintain visual consistency and establish a solid brand identity for your website.
#aca674
Primary - a0
#8d8860
Primary - a20
#6f6b4d
Primary - a40
#53503a
Primary - a60
#383629
Primary - a80
#1f1e18
Primary - a100
Accent tones
Best to enhances the primary colors and highlights interactive elements for a better user experience.
#c72d17
Accent - a0
#a42915
Accent - a20
#822514
Accent - a40
#611f11
Accent - a60
#42190e
Accent - a80
#251107
Accent - a100
Semantic tones
Use them to convey meaning and provide feedback to users.
#b41c2b
Danger - a0
#851d22
Danger - a20
#581919
Danger - a40
#2f1310
Danger - a60
#009f42
Success - a0
#167533
Success - a20
#184d25
Success - a40
#132916
Success - a60
#f0ad4e
Warning - a0
#af7f3c
Warning - a20
#71532a
Warning - a40
#392b19
Warning - a60
#388cfa
Info - a0
#3267b5
Info - a20
#284475
Info - a40
#1a253b
Info - a60
Neutral tones
Best for UI design foundation, use them for backgrounds, text, and borders.
#ffffff
Neutral - a0
#c6c6c6
Neutral - a20
#919191
Neutral - a40
#5e5e5e
Neutral - a60
#303030
Neutral - a80
#000000
Neutral - a100
colorffy.com
Code
/** Primary colors */
--clr-primary-a0: #aca674;
--clr-primary-a10: #8d8860;
--clr-primary-a20: #6f6b4d;
--clr-primary-a30: #53503a;
--clr-primary-a40: #383629;
--clr-primary-a50: #1f1e18;
/** Accent colors */
--clr-accent-a0: #c72d17;
--clr-accent-a10: #a42915;
--clr-accent-a20: #822514;
--clr-accent-a30: #611f11;
--clr-accent-a40: #42190e;
--clr-accent-a50: #251107;
/** Danger colors */
--clr-danger-a0: #b41c2b;
--clr-danger-a10: #851d22;
--clr-danger-a20: #581919;
--clr-danger-a30: #2f1310;
/** Success colors */
--clr-success-a0: #009f42;
--clr-success-a10: #167533;
--clr-success-a20: #184d25;
--clr-success-a30: #132916;
/** Warning colors */
--clr-warning-a0: #f0ad4e;
--clr-warning-a10: #af7f3c;
--clr-warning-a20: #71532a;
--clr-warning-a30: #392b19;
/** Info colors */
--clr-info-a0: #388cfa;
--clr-info-a10: #3267b5;
--clr-info-a20: #284475;
--clr-info-a30: #1a253b;
/** Neutral colors */
--clr-neutral-a0: #ffffff;
--clr-neutral-a10: #c6c6c6;
--clr-neutral-a20: #919191;
--clr-neutral-a30: #5e5e5e;
--clr-neutral-a40: #303030;
--clr-neutral-a50: #000000;
/** Examples */
.btn-primary {
color: var(--clr-primary-a50);
background-color: var(--clr-primary-a0);
}PWA prompt