Coral

Vibrant and welcoming — coral combines the warmth of orange with pink energy.

Shades 11

Base #ff7f50

RGB 255, 127, 80

100

200

300

400

500

600

700

800

All Coral Shades

Click any shade to copy the hex code instantly.

Usage in Code

CSS Variables

:root {
  --coral-50: #fff6f2;
  --coral-100: #ffe7dd;
  --coral-200: #ffd0bc;
  --coral-300: #ffb092;
  --coral-400: #ff946f;
  --coral-500: #ff7f50;
  --coral-600: #e66436;
  --coral-700: #bf4e26;
  --coral-800: #8c381b;
  --coral-900: #592312;
  --coral-950: #2d1108;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50: '#fff6f2',
          100: '#ffe7dd',
          200: '#ffd0bc',
          300: '#ffb092',
          400: '#ff946f',
          500: '#ff7f50',
          600: '#e66436',
          700: '#bf4e26',
          800: '#8c381b',
          900: '#592312',
          950: '#2d1108',
        },
      },
    },
  },
};

SCSS Map

$coral-palette: (
  50: #fff6f2,
  100: #ffe7dd,
  200: #ffd0bc,
  300: #ffb092,
  400: #ff946f,
  500: #ff7f50,
  600: #e66436,
  700: #bf4e26,
  800: #8c381b,
  900: #592312,
  950: #2d1108,
);