Caramel

Sweet, warm, and indulgent — caramel adds toasty richness to any palette.

Shades 11

Base #c68642

RGB 198, 134, 66

100

200

300

400

500

600

700

800

All Caramel Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --caramel-50: #fdf6ed;
  --caramel-100: #fae5cc;
  --caramel-200: #f5ca99;
  --caramel-300: #eeaa62;
  --caramel-400: #e09035;
  --caramel-500: #c68642;
  --caramel-600: #a36a2d;
  --caramel-700: #7d5020;
  --caramel-800: #593917;
  --caramel-900: #37220d;
  --caramel-950: #1c1106;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        caramel: {
          50: '#fdf6ed',
          100: '#fae5cc',
          200: '#f5ca99',
          300: '#eeaa62',
          400: '#e09035',
          500: '#c68642',
          600: '#a36a2d',
          700: '#7d5020',
          800: '#593917',
          900: '#37220d',
          950: '#1c1106',
        },
      },
    },
  },
};

SCSS Map

$caramel-palette: (
  50: #fdf6ed,
  100: #fae5cc,
  200: #f5ca99,
  300: #eeaa62,
  400: #e09035,
  500: #c68642,
  600: #a36a2d,
  700: #7d5020,
  800: #593917,
  900: #37220d,
  950: #1c1106,
);