industryColor Scheme

Fitness Energy

A high-energy fitness palette with bold contrasts and electric accents. Built to motivate action and convey physical intensity.

#111827
#f9fafb
#dc2626
#94a3b8
#22c55e

Color Breakdown

Role

background

Name

Gray 900

Hex

#111827

Tailwind

bg-gray-900

Role

surface

Name

Gray 50

Hex

#f9fafb

Tailwind

bg-gray-50

Role

primary

Name

Red 600

Hex

#dc2626

Tailwind

text-red-600

Role

secondary

Name

Slate 400

Hex

#94a3b8

Tailwind

text-slate-400

Role

accent

Name

Green 500

Hex

#22c55e

Tailwind

bg-green-500

Live Preview

Welcome Back

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

Design Rationale

Bold red against dark backgrounds creates an intense, motivational atmosphere. Green accents mark achievements, progress, and completed goals.

Use Cases

Fitness tracking appsGym websitesWorkout programs

CSS Variables

CSS
:root {
  --background: #111827;
  --surface: #f9fafb;
  --primary: #dc2626;
  --secondary: #94a3b8;
  --accent: #22c55e;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'fitness-energy': {
  'background': '#111827',  // bg-gray-900
  'surface': '#f9fafb',  // bg-gray-50
  'primary': '#dc2626',  // text-red-600
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#22c55e',  // bg-green-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

How does color affect fitness motivation?
High-contrast, energetic colors like red and green trigger excitement and reward responses, supporting workout motivation.