Color collection
Nonprofit Color Palettes
Trust-led nonprofit palettes for donation pages, campaigns, community programs, and impact reports.
#3166D8Accent#79D651Surface#EBEDF4Text#121621Support#CE829ANonprofit 19Nonprofit / Trust / WarmQuality 97Primary#3195D8Accent#B7D651Surface#EBEFF4Text#121A21Support#CE82B0Nonprofit 2Nonprofit / Trust / WarmQuality 96Primary#9231D8Accent#D651AESurface#F2EBF4Text#1C1221Support#CEAF82Nonprofit 21Nonprofit / Trust / WarmQuality 96Primary#3137D8Accent#51D668Surface#ECEBF4Text#131221Support#CE8285Nonprofit 23Nonprofit / Trust / WarmQuality 96Primary#8A31D8Accent#8FD651Surface#F1EBF4Text#1B1221Support#CEAB82Nonprofit 1Nonprofit / Trust / WarmQuality 95Primary#6331D8Accent#C051D6Surface#EFEBF4Text#181221Support#CE9982How to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for nonprofits, charities, campaigns, and impact report pages. Make donate buttons unmistakable and test contrast around emotional photography.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #3166D8;
--accent: #79D651;
--surface: #EBEDF4;
--text: #121621;
--support: #CE829A;
}FAQ
Where should I use nonprofit color palettes?
These palettes are designed for nonprofits, charities, campaigns, and impact report pages.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Make donate buttons unmistakable and test contrast around emotional photography.