Terracotta

Sun-baked earth and ancient craft — terracotta grounds design with warmth and heritage.

Shades 11

Base #c4622d

RGB 196, 98, 45

100

200

300

400

500

600

700

800

All Terracotta Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --terracotta-50: #fef6f2;
  --terracotta-100: #fde4d5;
  --terracotta-200: #fac9ab;
  --terracotta-300: #f5a67a;
  --terracotta-400: #e08350;
  --terracotta-500: #c4622d;
  --terracotta-600: #a34e22;
  --terracotta-700: #7e3b18;
  --terracotta-800: #5a2a11;
  --terracotta-900: #371a0a;
  --terracotta-950: #1c0d05;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        terracotta: {
          50: '#fef6f2',
          100: '#fde4d5',
          200: '#fac9ab',
          300: '#f5a67a',
          400: '#e08350',
          500: '#c4622d',
          600: '#a34e22',
          700: '#7e3b18',
          800: '#5a2a11',
          900: '#371a0a',
          950: '#1c0d05',
        },
      },
    },
  },
};

SCSS Map

$terracotta-palette: (
  50: #fef6f2,
  100: #fde4d5,
  200: #fac9ab,
  300: #f5a67a,
  400: #e08350,
  500: #c4622d,
  600: #a34e22,
  700: #7e3b18,
  800: #5a2a11,
  900: #371a0a,
  950: #1c0d05,
);