Navy

Authority and confidence — navy remains a timeless professional favorite.

Shades 11

Base #1e3a8a

RGB 30, 58, 138

100

200

300

400

500

600

700

800

All Navy Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --navy-50: #f4f7ff;
  --navy-100: #e5ecff;
  --navy-200: #c8d8ff;
  --navy-300: #9fb8ff;
  --navy-400: #6f90ff;
  --navy-500: #1e3a8a;
  --navy-600: #182f6e;
  --navy-700: #122553;
  --navy-800: #0d1b3d;
  --navy-900: #081125;
  --navy-950: #040912;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        navy: {
          50: '#f4f7ff',
          100: '#e5ecff',
          200: '#c8d8ff',
          300: '#9fb8ff',
          400: '#6f90ff',
          500: '#1e3a8a',
          600: '#182f6e',
          700: '#122553',
          800: '#0d1b3d',
          900: '#081125',
          950: '#040912',
        },
      },
    },
  },
};

SCSS Map

$navy-palette: (
  50: #f4f7ff,
  100: #e5ecff,
  200: #c8d8ff,
  300: #9fb8ff,
  400: #6f90ff,
  500: #1e3a8a,
  600: #182f6e,
  700: #122553,
  800: #0d1b3d,
  900: #081125,
  950: #040912,
);