industryColor Scheme

Food Delivery

An appetizing food delivery palette with vibrant reds and warm tones. Designed to stimulate appetite and drive quick ordering decisions.

#ffffff
#fafafa
#ef4444
#6b7280
#f97316

Color Breakdown

Role

background

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

surface

Name

Zinc 50

Hex

#fafafa

Tailwind

bg-zinc-50

Role

primary

Name

Red 500

Hex

#ef4444

Tailwind

text-red-500

Role

secondary

Name

Gray 500

Hex

#6b7280

Tailwind

text-gray-500

Role

accent

Name

Orange 500

Hex

#f97316

Tailwind

bg-orange-500

Live Preview

Welcome Back

This is a live preview of the Food Delivery color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Red stimulates appetite and creates urgency for ordering decisions. Orange reinforces warmth and energy associated with delicious food.

Use Cases

Food delivery appsRestaurant menusRecipe websites

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #fafafa;
  --primary: #ef4444;
  --secondary: #6b7280;
  --accent: #f97316;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'food-delivery': {
  'background': '#ffffff',  // bg-white
  'surface': '#fafafa',  // bg-zinc-50
  'primary': '#ef4444',  // text-red-500
  'secondary': '#6b7280',  // text-gray-500
  'accent': '#f97316',  // bg-orange-500
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

Why do food brands use red?
Red is proven to stimulate appetite and create a sense of urgency, making it a staple in food industry branding.