Stone

Earthy, grounded, and timeless — stone anchors designs with natural warmth.

Shades 11

Base #78716c

RGB 120, 113, 108

100

200

300

400

500

600

700

800

All Stone Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;
  --stone-900: #1c1917;
  --stone-950: #0c0a09;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        stone: {
          50: '#fafaf9',
          100: '#f5f5f4',
          200: '#e7e5e4',
          300: '#d6d3d1',
          400: '#a8a29e',
          500: '#78716c',
          600: '#57534e',
          700: '#44403c',
          800: '#292524',
          900: '#1c1917',
          950: '#0c0a09',
        },
      },
    },
  },
};

SCSS Map

$stone-palette: (
  50: #fafaf9,
  100: #f5f5f4,
  200: #e7e5e4,
  300: #d6d3d1,
  400: #a8a29e,
  500: #78716c,
  600: #57534e,
  700: #44403c,
  800: #292524,
  900: #1c1917,
  950: #0c0a09,
);