How FlossGrid matches colors and builds charts

From a screen color to CIELAB

Each palette lists a color as an sRGB hex value, the way a screen shows it. Distances between hex values do not match what the eye sees: a step in dark blues looks bigger than the same step in yellows. So every color is first converted to CIELAB. The sRGB values are linearized (the screen gamma is removed), turned into CIE XYZ with the D65 white point, then into L* (lightness, 0 to 100), a* (green to red) and b* (blue to yellow). In that space, equal distances are much closer to equal visible differences.

CIEDE2000 and the match bands

The distance between two Lab colors is measured with CIEDE2000 (ΔE₀₀), the color-difference formula published by the CIE in 2001. It adds corrections for lightness, chroma and hue, and for the blue region where the older formulas disagree with people. A ΔE₀₀ of about 1 is the smallest difference most people notice when two colors sit side by side. Every equivalent on the site carries its ΔE₀₀ and one of five plain-language bands:

The last column is computed from the data on this site: for each of the 489 DMC colors, the nearest of the 445 Anchor colors. The mean distance of those best matches is ΔE₀₀ 3.69. The full table is on the DMC to Anchor conversion chart.

Worked example: DMC 321 Red

DMC 321 Red is listed as #c72b3b, which is L* 44.5, a* 60.5, b* 30.2 in CIELAB. The nearest Anchor color is Anchor 1098 Bright Red (#d41829, L* 45.4, a* 67.7, b* 42.3) at ΔE₀₀ 4.73, a close match. The plain straight-line distance in Lab (CIE76) would be 14.13; the runner-up is Anchor 29 Carnation Dark at ΔE₀₀ 5.28.

Why every screen color is an approximation

A hex value is a measurement of a color card or a product photo, taken by whoever compiled the dataset. Thread is dyed cotton with a sheen that changes with the light, beads are plastic that shifts color when it is ironed, and your screen has its own brightness and calibration. That is why the color pages note that RGB values are screen approximations, and why "identical" means identical in the data, not a promise about two skeins in your hand. For a commission or a large area, compare the real threads before you buy.

How the pattern maker turns a photo into a chart

1. Resize. The photo is scaled to the grid you ask for, for example 80 stitches wide. Each cell averages the pixels it covers in linear light, so thin dark lines do not vanish and edges do not turn muddy. The height follows the photo's aspect ratio and the shape of the cell (knitting stitches are wider than tall).
2. Choose the colors. The cell colors are grouped in CIELAB with k-means++ (seeded deterministically, so the same photo and settings always give the same chart). Each group center is snapped to the nearest real color of the chosen palette by CIEDE2000, and every cell is then assigned to the nearest of those chosen colors. Optional Floyd–Steinberg dithering spreads the rounding error to soften gradients.
3. Clean up confetti. Single isolated stitches of a color are slow to stitch and rarely visible. The cleanup step replaces a cell that has no neighbor of its own color with the color most of its neighbors share; the strength setting decides how aggressive that is.
4. Skip the background. Optionally, the area of one color that touches the border is flood-filled and left unstitched, which is how many portraits on Aida are worked. Transparent parts of a PNG are never stitched.
5. Assign symbols and count. The most-used color gets the clearest symbol, then the next, so the chart stays readable. The key lists each color's code, name, stitch count and estimated skeins, drills or beads, and the finished size is computed from the fabric count or bead size.

All of this runs in your browser. The photo is never uploaded; the server only delivered the page and the palette files. The PDF chart is a vector PDF with real text symbols and a color key, so it prints sharply at any size.

How skeins are estimated

A full cross stitch is two diagonals across the cell on the front (2 × √2 × the cell width) plus about two cell widths of travel on the back, so one cross uses (2√2 + 2) ≈ 4.828 cell widths of thread for each strand. FlossGrid adds 15 % for starting, ending and traveling between areas, and counts a skein of six-strand cotton (DMC, Anchor, Madeira) as 8 m × 6 strands = 48 m of single strand.

Worked example: 1,000 stitches on 14-count Aida with 2 strands. The cell is 25.4 mm ÷ 14 = 1.814 mm wide. One cross uses 4.828 × 1.814 mm × 2 strands = 17.52 mm of single strand, so 1,000 stitches use 17.52 m. With the 15 % allowance that is 20.15 m, or 20.15 ÷ 48 = 0.42 of a skein. The color key rounds up, so you buy 1 skein.

Real use varies with tension, how far you travel on the back and whether you work half stitches, so treat the estimate as a planning number and buy one spare skein of the main colors. Fuse beads are counted exactly, one per cell, so buy a few extra of each color for the ones that roll away. Diamond-painting drills are counted one per cell plus 10 % spare per color for drills that are lost or chipped, and use DMC color numbers. Per-count details are on the fabric count pages.

Data sources

The site holds 2,020 colors: 1,303 stranded-cotton thread colors and 717 fuse-bead colors, from the open datasets below. Brand names are trademarks of their owners and are used only to identify their products; FlossGrid is not affiliated with any of them.

Codes and names follow the datasets, and the retrieval date of each file is shown above. Found a wrong value? The contact page explains what to send, and the about page explains who runs the site and how it is funded.