Color-Scale Cell

The Color-Scale Cell turns a plain number column into an instant thermal map, coloring each value from cool blue at the low end to hot red at the high end so the busiest or riskiest rows jump out without reading a single figure. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a number field. The color is computed from the value across a smooth fifteen-step blue-to-red scale, the exact number stays visible on the colored chip, and a blank cell falls back to a neutral gray chip so the column never looks broken.

Author

SharePoint Maven

Built with

Lists

Features

Choice Column, Date and Time Column, JSON, Number Column, Single Line of Text Column

Common Use Cases

Resource, server, or capacity utilization on an operations list
Risk, severity, or exposure scores on a register
KPI or performance scores on a team scorecard
Survey, CSAT, or engagement results by item
Test coverage or quality scores across components
Any 0 to 100 metric where the hot values should stand out

Details

Design Pattern: Metrics & Progress
Format Scope: Column

Required Columns

Display name	Column type	Internal name
Resource	Single line of text	`[Title]`
Environment	Choice	`[Environment]`
Utilization	Number	`[Utilization]`
Checked	Date and time	`[Checked]`

Prerequisites

Build a list with these columns before you paste the JSON.
Then populate the list with data.
Because the JSON is applied at the column level, the Utilization column can use any name you want.
Make the Utilization column a Number, with values from 0 to 100.
The color bands live in the JSON – edit the thresholds or the hex colors to match your own scale.
The formatter uses a compact centered layout so it does not widen the cell or increase the row height.

How to Apply JSON code

On the Utilization column, open the column header menu, choose Column settings, then Format this column.
Switch to Advanced mode.
Paste the JSON below and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "align-items": "center",
    "justify-content": "center",
    "height": "100%",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "=if(@currentField == '', '-', @currentField)",
      "style": {
        "display": "inline-block",
        "box-sizing": "border-box",
        "min-width": "46px",
        "text-align": "center",
        "padding": "2px 10px",
        "border-radius": "6px",
        "font-weight": "600",
        "color": "=if(@currentField == '', '#a19f9d', '#ffffff')",
        "text-shadow": "=if(@currentField == '', 'none', '0 1px 1px rgba(0,0,0,0.35)')",
        "background-color": "=if(@currentField == '', '#f3f2f1', if(Number(@currentField) >= 93.3, '#ca3521', if(Number(@currentField) >= 86.7, '#ca5f21', if(Number(@currentField) >= 80.0, '#ca8821', if(Number(@currentField) >= 73.3, '#cab121', if(Number(@currentField) >= 66.7, '#b9ca21', if(Number(@currentField) >= 60.0, '#90ca21', if(Number(@currentField) >= 53.3, '#66ca21', if(Number(@currentField) >= 46.7, '#3dca21', if(Number(@currentField) >= 40.0, '#21ca2e', if(Number(@currentField) >= 33.3, '#21ca57', if(Number(@currentField) >= 26.7, '#21ca81', if(Number(@currentField) >= 20.0, '#21caaa', if(Number(@currentField) >= 13.3, '#21c0ca', if(Number(@currentField) >= 6.7, '#2197ca', '#216eca')))))))))))))))"
      }
    }
  ]
}

Common Questions About the Color-Scale Cell

What is the Color-Scale Cell built with?

It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a number column to read at a glance without ongoing development overhead.

What kind of column does it need?

It needs one Number column that stores a value, typically on a 0 to 100 scale such as a utilization percent, a score, or a risk rating. The JSON reads the current column rather than a fixed name, so it works on any number field, and it compares the value against the color thresholds to decide the shade.

Does this design use any custom development or third-party tools?

No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.

If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?

Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how an existing column looks, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.

Can I change the colors or the 0 to 100 scale?

Yes. The scale is a set of hex color stops in the JSON, each tied to a threshold. Change the numbers to shift where the colors fall, or swap the hex values to match your brand or a different range – the chip color follows your edits automatically.

Can Greg build a heatmap like this for our lists?

Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.