Color collection
Education Color Palettes
Education palettes for learning apps, course pages, schools, and knowledge products.
EducationFriendlyBlue
Best for: learning apps, course pages, and school websitesExport: CSS, Tailwind, JSON, SVGPreview: dashboard, landing, mobile UI
Education 18Education / Friendly / BlueQuality 98Primary
#317CD8Accent#BCD651Surface#EBEEF4Text#121821Support#CE82A4Education 19Education / Friendly / BlueQuality 97Primary#314DD8Accent#7ED651Surface#EBECF4Text#121421Support#CE828FEducation 1Education / Friendly / BlueQuality 95Primary#AB31D8Accent#D651B3Surface#F3EBF4Text#1E1221Support#CEBA82Education 4Education / Friendly / BlueQuality 95Primary#D83177Accent#51D69FSurface#F4EBEEText#211217Support#A2CE82Education 5Education / Friendly / BlueQuality 95Primary#D83148Accent#C5D651Surface#F4EBEBText#211213Support#8CCE82Education 6Education / Friendly / BlueQuality 95Primary#D84A31Accent#87D651Surface#F4EEEBText#211512Support#82CE8EHow to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for learning apps, course pages, and school websites. Use friendly accent colors while keeping reading areas neutral and comfortable.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
UI previewPrimary
Card
Button
Accent
CSS Variables
:root {
--primary: #317CD8;
--accent: #BCD651;
--surface: #EBEEF4;
--text: #121821;
--support: #CE82A4;
}Text / Surface contrast: 15.33:1
FAQ
Where should I use education color palettes?
These palettes are designed for learning apps, course pages, and school websites.
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?
Use friendly accent colors while keeping reading areas neutral and comfortable.