Peach

Soft, sun-ripened sweetness — peach radiates warmth, approachability, and gentle joy.

Shades 11

Base #ffb07c

RGB 255, 176, 124

100

200

300

400

500

600

700

800

All Peach Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --peach-50: #fff8f3;
  --peach-100: #ffeede;
  --peach-200: #ffdcbc;
  --peach-300: #ffc898;
  --peach-400: #ffb07c;
  --peach-500: #fa8d49;
  --peach-600: #e06b26;
  --peach-700: #b14f16;
  --peach-800: #7d360e;
  --peach-900: #4e2008;
  --peach-950: #271003;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        peach: {
          50: '#fff8f3',
          100: '#ffeede',
          200: '#ffdcbc',
          300: '#ffc898',
          400: '#ffb07c',
          500: '#fa8d49',
          600: '#e06b26',
          700: '#b14f16',
          800: '#7d360e',
          900: '#4e2008',
          950: '#271003',
        },
      },
    },
  },
};

SCSS Map

$peach-palette: (
  50: #fff8f3,
  100: #ffeede,
  200: #ffdcbc,
  300: #ffc898,
  400: #ffb07c,
  500: #fa8d49,
  600: #e06b26,
  700: #b14f16,
  800: #7d360e,
  900: #4e2008,
  950: #271003,
);