Campus: a education website color palette
A dependable blue for actions and a warm amber for progress and highlights: familiar, cheerful, and readable for every age.
#FFFDF6
Background
#FFFFFF
Surface
#1F2937
Text
#2563EB
Accent
#B45309
Highlight
The palette as a real page
Make the first impression the one they remember.
The Campus palette set as a real page: #1F2937 text on #FFFDF6, every action in #2563EB.
Designed first
Surface #FFFFFF keeps cards distinct from the page.
Built in minutes
Surface #FFFFFF keeps cards distinct from the page.
Live in one click
Surface #FFFFFF keeps cards distinct from the page.
Contrast
- AaBody text on the page#1F2937 on #FFFDF614.4:1AAA
- AaBody text on cards#1F2937 on #FFFFFF14.6:1AAA
- AaAccent links and icons on the page#2563EB on #FFFDF65.0:1AA
- AaHighlight on the page#B45309 on #FFFDF6 · large text4.9:1AA
- AaPage colour on an accent button#FFFDF6 on #2563EB · large text5.0:1AA
AA needs 4.5:1 for body text and 3:1 for large text; AAA needs 7:1. Check any pair in the contrast checker.
Copy the palette
:root {
--color-background: #FFFDF6;
--color-surface: #FFFFFF;
--color-text: #1F2937;
--color-accent: #2563EB;
--color-highlight: #B45309;
}More website color palettes
Questions, answered.
The things people ask before they start building.
What colors are best for a education website?
A dependable blue for actions and a warm amber for progress and highlights: familiar, cheerful, and readable for every age. The Campus palette uses #FFFDF6 for the page, #1F2937 for text, #2563EB for actions and #B45309 as a highlight.
Is the Campus palette accessible?
Body text scores 14.4:1 against the background, which passes WCAG AAA. Every pairing a site uses is scored on this page.
Can an AI website builder pick a color palette for me?
Yes. Orlume (orlume.site) decides the palette, typography and layout for your brief in its design pass, before any code is written, then builds the site in React and Next.js and deploys it in one click.
Still stuck? Email usOr let Orlume pick the colors for you.
Describe the site you want. Watch it get designed, not just generated. Then publish it to its own orlume.site address.
- Free to start
- No card required
- Publish to a live URL
- You own the code