Teal

Serenity and sophistication — teal bridges ocean and forest.

Shades 11

Base #14b8a6

RGB 20, 184, 166

100

200

300

400

500

600

700

800

All Teal Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;
  --teal-950: #042f2e;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        teal: {
          50: '#f0fdfa',
          100: '#ccfbf1',
          200: '#99f6e4',
          300: '#5eead4',
          400: '#2dd4bf',
          500: '#14b8a6',
          600: '#0d9488',
          700: '#0f766e',
          800: '#115e59',
          900: '#134e4a',
          950: '#042f2e',
        },
      },
    },
  },
};

SCSS Map

$teal-palette: (
  50: #f0fdfa,
  100: #ccfbf1,
  200: #99f6e4,
  300: #5eead4,
  400: #2dd4bf,
  500: #14b8a6,
  600: #0d9488,
  700: #0f766e,
  800: #115e59,
  900: #134e4a,
  950: #042f2e,
);