Mint

Refreshing and light — mint evokes cleanliness, wellness, and modern simplicity.

Shades 11

Base #98ff98

RGB 152, 255, 152

100

200

300

400

500

600

700

800

All Mint Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --mint-50: #f5fff5;
  --mint-100: #e8ffe8;
  --mint-200: #d1ffd1;
  --mint-300: #b5ffb5;
  --mint-400: #9cff9c;
  --mint-500: #98ff98;
  --mint-600: #78e678;
  --mint-700: #5bbf5b;
  --mint-800: #409940;
  --mint-900: #286628;
  --mint-950: #143314;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        mint: {
          50: '#f5fff5',
          100: '#e8ffe8',
          200: '#d1ffd1',
          300: '#b5ffb5',
          400: '#9cff9c',
          500: '#98ff98',
          600: '#78e678',
          700: '#5bbf5b',
          800: '#409940',
          900: '#286628',
          950: '#143314',
        },
      },
    },
  },
};

SCSS Map

$mint-palette: (
  50: #f5fff5,
  100: #e8ffe8,
  200: #d1ffd1,
  300: #b5ffb5,
  400: #9cff9c,
  500: #98ff98,
  600: #78e678,
  700: #5bbf5b,
  800: #409940,
  900: #286628,
  950: #143314,
);