How to read a single-crochet color chart (rows, runs and gauge)

mmmlasu — Thu, 08 Oct 2026 13:47:39 +0000

If you have only crocheted solid-color work, a color chart looks like a spreadsheet. This is how I read one, written while building a free chart maker for single-crochet colorwork.

One square, one stitch

Each square is one stitch. Each color is a yarn. Rows are worked bottom to top.

Direction alternates

In flat, back-and-forth work you usually read row 1 right to left, row 2 left to right, and so on. Some patterns differ, so check the notes of the pattern you follow.

Color runs

A run is a group of same-color squares in a row. If a row says 5 blue, 3 white, 5 blue, that is 13 stitches. Counting runs is faster than counting squares.

What makes a chart hard to work

Lone single cells of a different color (an extra yarn change for one stitch)
Many colors in one row
Very long runs, which may need the unused yarn carried

Sizing from your swatch

Measure stitches and rows per 4 inches, then:

stitches = width_in * stitches_per_4in / 4
rows     = height_in * rows_per_4in / 4

I wrote up worked examples here: https://crochet-graph-maker.netlify.app/crochet-graph-size-calculator.html and how to prepare a picture here: https://crochet-graph-maker.netlify.app/prepare-image-for-crochet-graph.html

The free tool (images stay in your browser): https://crochet-graph-maker.netlify.app/

Disclosure: I made the tool, and this post was written with AI assistance. Numbers above are examples, not a guarantee of finished size.

Why a square picture needs 24 x 30 stitches: gauge math for a crochet chart tool

mmmlasu — Thu, 08 Oct 2026 13:25:30 +0000

I built a small, free, browser-only tool that turns an image into a single-crochet color chart. This post covers the one idea that makes it more useful than a plain pixelator: gauge.

Tool: https://crochet-graph-maker.netlify.app/ (no sign-up, images are processed locally in your browser)

The problem

A crochet stitch is not square. If your swatch is 16 stitches and 20 rows per 4 inches, a stitch is 0.25 in wide and 0.20 in tall. A 24 x 24 grid looks square on screen but comes out 6 in wide and 4.8 in tall.

The fix

Compute rows from the image ratio and your measured gauge:

width_in  = stitches * 4 / stitches_per_4in
height_in = rows * 4 / rows_per_4in
rows      = stitches * (image_h / image_w) * (row_gauge / stitch_gauge)

For a square picture at 24 stitches with 16 st / 20 rows per 4 in: 24 * 1 * 20 / 16 = 30 rows. So the chart is 24 x 30.

How the tool works

Draws the image to a canvas at the target grid size and reduces it to 2 to 6 colors
Lets you paint cells to clean up stray single stitches
Row counter, undo, save as JSON, export SVG, print
Limits: 8 to 80 stitches wide, 2 to 100 rows

Honest limits

It is a chart tool, not a full pattern. It does not estimate yardage or pick a color-change technique. Photos with fine detail turn muddy at small grid sizes; simple graphics and logos work best.

More worked guides: https://crochet-graph-maker.netlify.app/gauge-guide.html

Disclosure: I am the maker, and this post was written with AI assistance.

DEV Community: mmmlasu