Graphite

Industrial and precise — graphite offers a cooler, more technical alternative to charcoal.

Shades 11

Base #41424c

RGB 65, 66, 76

100

200

300

400

500

600

700

800

All Graphite Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --graphite-50: #f4f4f6;
  --graphite-100: #e3e3e7;
  --graphite-200: #c7c8d0;
  --graphite-300: #a3a5b2;
  --graphite-400: #6f717f;
  --graphite-500: #41424c;
  --graphite-600: #34353d;
  --graphite-700: #27282e;
  --graphite-800: #1b1b1f;
  --graphite-900: #101012;
  --graphite-950: #080809;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        graphite: {
          50: '#f4f4f6',
          100: '#e3e3e7',
          200: '#c7c8d0',
          300: '#a3a5b2',
          400: '#6f717f',
          500: '#41424c',
          600: '#34353d',
          700: '#27282e',
          800: '#1b1b1f',
          900: '#101012',
          950: '#080809',
        },
      },
    },
  },
};

SCSS Map

$graphite-palette: (
  50: #f4f4f6,
  100: #e3e3e7,
  200: #c7c8d0,
  300: #a3a5b2,
  400: #6f717f,
  500: #41424c,
  600: #34353d,
  700: #27282e,
  800: #1b1b1f,
  900: #101012,
  950: #080809,
);