Teal Blue

Crisp and contemporary — teal blue bridges the calm of cyan and the trust of navy.

Shades 11

Base #367588

RGB 54, 117, 136

100

200

300

400

500

600

700

800

All Teal Blue Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --teal-blue-50: #f0f8fa;
  --teal-blue-100: #daeef2;
  --teal-blue-200: #b6dde5;
  --teal-blue-300: #86c4d2;
  --teal-blue-400: #549cb3;
  --teal-blue-500: #367588;
  --teal-blue-600: #2b5d6d;
  --teal-blue-700: #214653;
  --teal-blue-800: #16303a;
  --teal-blue-900: #0d1c22;
  --teal-blue-950: #060e11;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        teal-blue: {
          50: '#f0f8fa',
          100: '#daeef2',
          200: '#b6dde5',
          300: '#86c4d2',
          400: '#549cb3',
          500: '#367588',
          600: '#2b5d6d',
          700: '#214653',
          800: '#16303a',
          900: '#0d1c22',
          950: '#060e11',
        },
      },
    },
  },
};

SCSS Map

$teal-blue-palette: (
  50: #f0f8fa,
  100: #daeef2,
  200: #b6dde5,
  300: #86c4d2,
  400: #549cb3,
  500: #367588,
  600: #2b5d6d,
  700: #214653,
  800: #16303a,
  900: #0d1c22,
  950: #060e11,
);