Taupe

The great mediator — taupe sits perfectly between brown and gray, effortlessly elegant in any context.

Shades 11

Base #b5a99a

RGB 181, 169, 154

100

200

300

400

500

600

700

800

All Taupe Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --taupe-50: #faf9f7;
  --taupe-100: #f2efeb;
  --taupe-200: #e3ddd6;
  --taupe-300: #cfc7bd;
  --taupe-400: #b5a99a;
  --taupe-500: #9a8c7c;
  --taupe-600: #7b6e60;
  --taupe-700: #5c5248;
  --taupe-800: #3f3830;
  --taupe-900: #26211d;
  --taupe-950: #13110e;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        taupe: {
          50: '#faf9f7',
          100: '#f2efeb',
          200: '#e3ddd6',
          300: '#cfc7bd',
          400: '#b5a99a',
          500: '#9a8c7c',
          600: '#7b6e60',
          700: '#5c5248',
          800: '#3f3830',
          900: '#26211d',
          950: '#13110e',
        },
      },
    },
  },
};

SCSS Map

$taupe-palette: (
  50: #faf9f7,
  100: #f2efeb,
  200: #e3ddd6,
  300: #cfc7bd,
  400: #b5a99a,
  500: #9a8c7c,
  600: #7b6e60,
  700: #5c5248,
  800: #3f3830,
  900: #26211d,
  950: #13110e,
);