Turquoise

Tropical vibrance and clarity — turquoise feels fresh, energetic, and modern.

Shades 11

Base #40e0d0

RGB 64, 224, 208

100

200

300

400

500

600

700

800

All Turquoise Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --turquoise-50: #f0fffd;
  --turquoise-100: #d7fffb;
  --turquoise-200: #affff7;
  --turquoise-300: #7ff7ee;
  --turquoise-400: #5aece1;
  --turquoise-500: #40e0d0;
  --turquoise-600: #26c4b5;
  --turquoise-700: #1c9a8e;
  --turquoise-800: #146f66;
  --turquoise-900: #0c4742;
  --turquoise-950: #062422;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        turquoise: {
          50: '#f0fffd',
          100: '#d7fffb',
          200: '#affff7',
          300: '#7ff7ee',
          400: '#5aece1',
          500: '#40e0d0',
          600: '#26c4b5',
          700: '#1c9a8e',
          800: '#146f66',
          900: '#0c4742',
          950: '#062422',
        },
      },
    },
  },
};

SCSS Map

$turquoise-palette: (
  50: #f0fffd,
  100: #d7fffb,
  200: #affff7,
  300: #7ff7ee,
  400: #5aece1,
  500: #40e0d0,
  600: #26c4b5,
  700: #1c9a8e,
  800: #146f66,
  900: #0c4742,
  950: #062422,
);