moodColor Scheme

Professional Corporate

A polished corporate palette with conservative blues and structured grays. Conveys reliability, competence, and business credibility.

#ffffff
#f8fafc
#1d4ed8
#64748b
#059669

Color Breakdown

Role

background

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

surface

Name

Slate 50

Hex

#f8fafc

Tailwind

bg-slate-50

Role

primary

Name

Blue 700

Hex

#1d4ed8

Tailwind

text-blue-700

Role

secondary

Name

Slate 500

Hex

#64748b

Tailwind

text-slate-500

Role

accent

Name

Emerald 600

Hex

#059669

Tailwind

bg-emerald-600

Live Preview

Welcome Back

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

Design Rationale

Blue-700 is the quintessential corporate color, projecting authority and trust. Emerald accents indicate growth, positive metrics, and forward momentum.

Use Cases

Corporate websitesBusiness consulting firmsAnnual reports

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #f8fafc;
  --primary: #1d4ed8;
  --secondary: #64748b;
  --accent: #059669;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'professional-corporate': {
  'background': '#ffffff',  // bg-white
  'surface': '#f8fafc',  // bg-slate-50
  'primary': '#1d4ed8',  // text-blue-700
  'secondary': '#64748b',  // text-slate-500
  'accent': '#059669',  // bg-emerald-600
        },
      },
    },
  },
};

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 is blue dominant in corporate design?
Blue universally communicates trustworthiness, stability, and professionalism, making it the safest choice for corporate identity.