Sand

Gentle and organic — sand evokes sun-warmed shores and effortless calm.

Shades 11

Base #c2a57a

RGB 194, 165, 122

100

200

300

400

500

600

700

800

All Sand Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --sand-50: #fdf9f4;
  --sand-100: #f7ede0;
  --sand-200: #eedcc0;
  --sand-300: #e1c59a;
  --sand-400: #d0ad84;
  --sand-500: #c2a57a;
  --sand-600: #a0855a;
  --sand-700: #7c6442;
  --sand-800: #59452e;
  --sand-900: #38291b;
  --sand-950: #1c140d;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        sand: {
          50: '#fdf9f4',
          100: '#f7ede0',
          200: '#eedcc0',
          300: '#e1c59a',
          400: '#d0ad84',
          500: '#c2a57a',
          600: '#a0855a',
          700: '#7c6442',
          800: '#59452e',
          900: '#38291b',
          950: '#1c140d',
        },
      },
    },
  },
};

SCSS Map

$sand-palette: (
  50: #fdf9f4,
  100: #f7ede0,
  200: #eedcc0,
  300: #e1c59a,
  400: #d0ad84,
  500: #c2a57a,
  600: #a0855a,
  700: #7c6442,
  800: #59452e,
  900: #38291b,
  950: #1c140d,
);