Cream

Soft and inviting — cream brings timeless warmth without the starkness of pure white.

Shades 11

Base #fffdd0

RGB 255, 253, 208

100

200

300

400

500

600

700

800

All Cream Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --cream-50: #fffefd;
  --cream-100: #fffef5;
  --cream-200: #fffde8;
  --cream-300: #fffce0;
  --cream-400: #fffdd0;
  --cream-500: #f5f0a8;
  --cream-600: #d9cc6e;
  --cream-700: #a99e3a;
  --cream-800: #756e1f;
  --cream-900: #48430f;
  --cream-950: #242207;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        cream: {
          50: '#fffefd',
          100: '#fffef5',
          200: '#fffde8',
          300: '#fffce0',
          400: '#fffdd0',
          500: '#f5f0a8',
          600: '#d9cc6e',
          700: '#a99e3a',
          800: '#756e1f',
          900: '#48430f',
          950: '#242207',
        },
      },
    },
  },
};

SCSS Map

$cream-palette: (
  50: #fffefd,
  100: #fffef5,
  200: #fffde8,
  300: #fffce0,
  400: #fffdd0,
  500: #f5f0a8,
  600: #d9cc6e,
  700: #a99e3a,
  800: #756e1f,
  900: #48430f,
  950: #242207,
);