Charcoal

Serious and substantial — charcoal anchors designs with smoky, creative depth.

Shades 11

Base #36454f

RGB 54, 69, 79

100

200

300

400

500

600

700

800

All Charcoal Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --charcoal-50: #f2f5f7;
  --charcoal-100: #e0e6ea;
  --charcoal-200: #c1ced6;
  --charcoal-300: #9aadb9;
  --charcoal-400: #6b8696;
  --charcoal-500: #36454f;
  --charcoal-600: #2b3740;
  --charcoal-700: #202930;
  --charcoal-800: #161c21;
  --charcoal-900: #0d1014;
  --charcoal-950: #060809;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        charcoal: {
          50: '#f2f5f7',
          100: '#e0e6ea',
          200: '#c1ced6',
          300: '#9aadb9',
          400: '#6b8696',
          500: '#36454f',
          600: '#2b3740',
          700: '#202930',
          800: '#161c21',
          900: '#0d1014',
          950: '#060809',
        },
      },
    },
  },
};

SCSS Map

$charcoal-palette: (
  50: #f2f5f7,
  100: #e0e6ea,
  200: #c1ced6,
  300: #9aadb9,
  400: #6b8696,
  500: #36454f,
  600: #2b3740,
  700: #202930,
  800: #161c21,
  900: #0d1014,
  950: #060809,
);