Skip to content
Nutrition Simple #satiety#protein#fiber

Satiety Index by Macronutrient

Protein scores highest on satiety, followed by fiber, then fat, then refined carbs.

A free, animated satiety index by macronutrient you can read here or embed on any website, from Scrollchart.

Satiety Index by Macronutrient

Satiety Per Calorie by MacronutrientRelative satiety index (protein = 100 benchmark). Mechanism annotations per macro.0255075100Satiety IndexProtein92TEF: 25%Fiber78TEF: 10%Fat60TEF: 2%Carbs42TEF: 8%

Four bars comparing relative satiety index scores for protein, fiber, fat, and carbohydrates. Protein 92, fiber 78, fat 60, carbs 42. Thermic effect and hormone mechanism annotations.

Good for

  • Articles in the nutrition category
  • Editorial pages where a quick visual replaces a wall of text
  • Content-marketing posts that need a clean, branded illustration

Source & accuracy

This satiety index by macronutrient is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Why protein tops the satiety ranking

The satiety index ranks how strongly a fixed amount of food suppresses hunger over the following hours. Protein consistently scores highest, with fiber close behind, then fat, then refined or rapidly digested carbohydrate at the bottom. The original satiety index work by Holt and colleagues (1995) tested isocaloric portions and found large spreads, with boiled potatoes and lean protein rating far above white bread and pastries.

Several mechanisms plausibly contribute. Protein has a high thermic effect and slows gastric emptying, and it influences satiety hormones such as GLP-1, PYY, and cholecystokinin while blunting ghrelin. Fiber adds bulk and viscosity that slow digestion. These are mechanistic descriptions of average tendencies, not guarantees for any individual meal.

Where refined carbohydrate lands and why

Refined carbohydrate digests quickly, produces a sharp glucose rise and fall, and tends to leave hunger returning sooner, which is why it sits low on the index. Whole-food carbohydrate sources with intact fiber, such as legumes and oats, behave very differently from refined flour and sugar, so carbohydrate as a category spans a wide range.

Satiety scores measure short-term fullness from single test meals and do not by themselves prove long-term weight outcomes, which depend on total energy intake, food variety, and adherence. This is general educational information, not dietary prescription; anyone managing a medical condition should consult a qualified professional.

Embed this diagram

Add this animated satiety index by macronutrient to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated satiety index by macronutrient for any website.
Who uses it
Nutrition blogs, Weight-loss sites, Dietitians & RDs, Diet blogs.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="satiety-by-macro" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Satiety Index by Macronutrient" for my website?
Scrollchart provides "Satiety Index by Macronutrient" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a satiety index by macronutrient diagram in a health or wellness blog?
Copy the HTML snippet from the Scrollchart diagram page and paste it into any post or page in your CMS. It works in WordPress, Webflow, Ghost, Substack, and plain HTML without any plugin or account. The diagram renders as animated SVG directly in your page, so search engines can index the accompanying explainer text.