Heatmap Generator
Turn a grid of numbers into a colour-coded heatmap in seconds - free, no signup.
What this tool does
Paste a header row of column labels, then one row per label with a value for every column, and this colours each cell by its size - the higher the number, the deeper the colour - so patterns across a grid of data become visible at a glance instead of needing to read every individual figure. It reads a straight paste from a spreadsheet and exports as PNG or SVG.
Colours a grid of numbers by value - traffic by hour and day, scores by student and subject, anything laid out as a table of numbers - so high and low values stand out visually.
Offers several colour scales, including a print-friendly greyscale and a colour-blind-safe option.
How to use it
- Enter a header row (a blank first cell, then one column label per column), then one row per label with its values.
- Pick a colour scale that suits your data and audience.
- Add a chart title if you want one, then export as PNG or SVG.
Why use this chart maker
A heatmap makes patterns in a grid obvious at a glance, such as busy hours or strong subjects. Colouring a table by value by hand is impractical.
Why we built it
We built the heatmap generator with a colour-blind-safe scale and a print-friendly greyscale, not just red and green. Check accessibility with the colour blindness simulator and compute the grid with the proximity matrix calculator.
Who this tool is for
- Analysts and researchers showing a grid of values
- Teachers explaining correlation matrices
- Managers visualising schedules or scores
When to use it
- Traffic or activity by hour and day.
- Scores by student and subject.
- Correlation tables.
- Finding hot and cold spots.
What a heatmap is good for
Spotting a pattern across a grid, not reading exact figures.
A heatmap turns a table of numbers into a picture, using colour intensity instead of digits to carry the main information. That trade-off is deliberate: a heatmap is worse than a table for reading an exact figure, but far better for spotting a pattern across many values at once - a busy period in a week of traffic data, a weak subject across a class of test scores, a hot or cold region in a grid of measurements. Each cell still shows its exact number, so you don't lose precision, but the colour is what your eye actually uses to scan the grid.
Choosing a colour scale
The default light-to-teal scale works well on screen for most general data. If colour-blindness in your audience is a concern, the colour-blind-safe scale uses a blue built from the Okabe-Ito palette, designed to stay distinguishable under the common forms of colour vision deficiency. If the heatmap needs to be printed or photocopied in black and white, the greyscale option keeps the pattern readable without relying on colour at all.
What you give it, and what you get back
| Item | Details |
|---|---|
| Input | A grid of numbers with optional labels. |
| Options | Colour scale, including a print-friendly greyscale. |
| Output | A coloured grid with values. |
Issues you may run into
| What you see | Why it happens | What to do |
|---|---|---|
| One outlier hides detail | The scale runs from the lowest to the highest value. | Remove or cap the outlier. |
| A calendar heatmap is expected | This colours a grid you provide. | Format data as a grid. |
| A row is skipped | It does not match the expected format. | Check the message listing unreadable lines and fix them. |
Assumptions and limitations
- This colours a grid you provide - it doesn't generate a calendar heatmap (like a GitHub-style contribution graph) from raw dated events; format your data as a grid first.
- The colour scale is linear between your data's lowest and highest value, so a single extreme outlier will compress the colour range for every other cell - consider excluding or noting outliers separately if this happens.
- The chart is drawn as SVG and exported to PNG at a fixed resolution suited to slides and documents, not large-format print.
Frequently asked questions
How do I make a heatmap online for free?
Paste a header row of column labels (leave the first cell blank), then one row per label with a value for every column - straight out of a spreadsheet works. The heatmap draws instantly, and you can download it as a PNG or SVG.
What is a heatmap used for?
Spotting patterns across a grid of numbers at a glance - which hours are busiest, which subject a class struggles with, which region has the highest reading - by using colour intensity instead of requiring you to read every individual figure.
How do I format my data for a heatmap?
As a header row (blank first cell, then column labels), followed by one row per row-label: a label, then one number per column, in the same order as the header - the same wide format spreadsheets export by default.
Is there a colour-blind-friendly option?
Yes - the colour-blind-safe scale uses a blue built from the Okabe-Ito palette, designed to remain distinguishable under the most common forms of colour vision deficiency.
Can I download the heatmap as an image?
Yes - PNG for a slide, document or social post, or SVG for print or further editing. Both download directly with no watermark.
Is my data uploaded anywhere?
No. The heatmap is drawn entirely in your browser using the data you type or paste - nothing is sent to a server, and closing the tab clears it.