industryColor Scheme

Education Academic

A scholarly academic palette with deep blues and muted tones for higher education. Conveys intellectual rigor and institutional prestige.

#f8fafc
#ffffff
#1e40af
#475569
#f59e0b

Color Breakdown

Role

background

Name

Slate 50

Hex

#f8fafc

Tailwind

bg-slate-50

Role

surface

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

primary

Name

Blue 800

Hex

#1e40af

Tailwind

text-blue-800

Role

secondary

Name

Slate 600

Hex

#475569

Tailwind

text-slate-600

Role

accent

Name

Amber 500

Hex

#f59e0b

Tailwind

bg-amber-500

Live Preview

Welcome Back

This is a live preview of the Education Academic color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Deep navy blue echoes academic tradition and institutional authority. Amber accents add warmth and highlight important announcements.

Use Cases

University websitesResearch portalsAcademic journals

CSS Variables

CSS
:root {
  --background: #f8fafc;
  --surface: #ffffff;
  --primary: #1e40af;
  --secondary: #475569;
  --accent: #f59e0b;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'education-academic': {
  'background': '#f8fafc',  // bg-slate-50
  'surface': '#ffffff',  // bg-white
  'primary': '#1e40af',  // text-blue-800
  'secondary': '#475569',  // text-slate-600
  'accent': '#f59e0b',  // bg-amber-500
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

Why do universities favor dark blue?
Dark blue symbolizes knowledge, depth, and tradition, aligning with the values of academic institutions worldwide.