Pantone

2020

#0F4C81

Classic Blue

A dependable, calming deep blue that evokes twilight, confidence, and clarity.

Generate palettes Visualize in mockups Back to 2020 overview

Copy color values

HEX / RGB / CMYK ready for dev teams.

HEX

#0F4C81

RGB

rgb(15, 76, 129)

CMYK

99, 76, 24, 8

Palette ideas

Monochrome, analogous, complementary, and triadic sets.

Monochrome Depth

Light and dark steps around the hero color.

#041625

#0A3052

#0F4C81

#1466AD

#1B87E4

Analogous Flow

Neighbors on the color wheel for a soft gradient story.

#0C6464

#0F6680

#0F4C81

#0F3180

#121C9B

Complementary Contrast

Opposites that add clarity and focus.

#0F4C81

#64350C

#A45713

#0B253C

#2E7ABD

Triadic Balance

Three evenly spaced hues for versatile layouts.

#0F4C81

#800F4B

#4B800F

#0F3657

#1F70B7

Split Complementary

Balanced contrast with two supporting accents.

#0F4C81

#800F13

#807C0F

#082035

#207BCB

Export tokens

Copy CSS variables or plug into Tailwind.

#0F4C81

CSS Variables

:root {
  --year-base: #0F4C81;
  --year-base-contrast: #FFFFFF;
  --year-accent-1: #0A3052;
  --year-accent-2: #0F4C81;
  --year-accent-3: #1466AD;
  --year-surface: #f8fafc;
}

Tailwind Config

theme: {
  extend: {
    colors: {
      primary: 'var(--year-base)',
      accent: 'var(--year-accent-1)',
      surface: 'var(--year-surface)',
    },
  },
},

Scenario previews

See the color in UI, posters, and ecommerce layouts.

UI Dashboard

Poster / Social

Launch Campaign

Design with #0F4C81

Ecommerce Hero

New Drop · #0F4C81-20%

Primary CTA

Secondary

Usage guidance

Summary

A dependable, calming deep blue that evokes twilight, confidence, and clarity.

Notes

Use for headlines, buttons, and navigation to signal trust. Pair with warm neutrals or soft whites to prevent coldness. Gradients with teal or muted purple add depth without losing professionalism.

Tips