moodColor Scheme

Cool Modern

A cool and modern palette with steel blues and sharp contrasts. Projects contemporary sophistication and forward-thinking design.

#ffffff
#f8fafc
#0f172a
#64748b
#3b82f6

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

Slate 900

Hex

#0f172a

Tailwind

text-slate-900

Role

secondary

Name

Slate 500

Hex

#64748b

Tailwind

text-slate-500

Role

accent

Name

Blue 500

Hex

#3b82f6

Tailwind

bg-blue-500

Live Preview

Welcome Back

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

Design Rationale

Cool slate tones create a sleek, no-nonsense modern foundation. Blue accents provide just enough color to feel contemporary and interactive.

Use Cases

Design agency sitesModern portfoliosTech product pages

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #f8fafc;
  --primary: #0f172a;
  --secondary: #64748b;
  --accent: #3b82f6;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cool-modern': {
  'background': '#ffffff',  // bg-white
  'surface': '#f8fafc',  // bg-slate-50
  'primary': '#0f172a',  // text-slate-900
  'secondary': '#64748b',  // text-slate-500
  'accent': '#3b82f6',  // bg-blue-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

What makes a palette feel modern?
Cool tones, high contrast, and minimal color variation create the streamlined, purposeful look associated with modern design.