Create grid-based waffle charts for percentage visualization with icon or square fill options.
A waffle chart is a 10-by-10 grid of 100 cells in which each cell stands for exactly one percentage point. You enter a percentage or several values that sum to 100, pick colors, and choose between plain squares and a repeating icon fill; the tool paints the grid and leaves the remainder empty. The thing users most often misjudge is precision: cells are whole points, so a value like 73.4% renders as 73 filled cells, and counting cells back out of the finished grid is harder than it looks.
A concrete input and expected output from the current implementation.
Input
73%
Expected output
A 10-by-10 grid of 100 cells in which 73 are filled with the chosen color and 27 are left empty.
Each cell equals one percentage point, so 73% fills 73 cells and leaves 100 minus 73, or 27, cells empty; the two counts always add to 100.
The grid is 10 columns by 10 rows, so its 100 cells each stand for exactly one percentage point. A single value fills that many cells and leaves the rest empty. Several values share the same 100 cells, each allocated its percentage of the grid, so the chart stays proportional when the values sum to 100. Values round to whole cells, which is where fractional percentages go.
The two fill modes change only the appearance of each filled cell. Square mode paints solid colored cells, the plain version of the chart. Icon mode draws the same small glyph in every filled cell, turning a block of 73 cells into a repeating pattern. The cell count is identical either way; only the visual weight differs. Icon mode suits brand-friendly charts; square mode reads better when the number matters.
Each cell is one whole percentage point and cannot be split. The value is converted to a whole number of cells, so 73.6% and 73.4% usually render identically as 73 cells. Whether the tool rounds or floors matters only at the boundary; if the exact value matters, the numeric label is the source of truth.
Convert to a percentage first: 137 of 500 is 27.4 percent, which the grid draws as 27 filled cells. The tool is built around the 100-cell percentage convention, so it expects a percentage rather than a raw count, and the grid is only accurate to one percentage point either way.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.