How to use it
- Click Choose a photo or drop a photo on the box. The photo is read on your device.
- Choose the Value steps: 2 for a notan (only light and dark), 5 or 7 for a fuller value study.
- Tick Squint view to blur the picture first, then look at the big shapes of light and shade.
- Compare the Value study with the Original, and use Download the value study to keep the PNG.
How the greyscale and the steps are made
Each pixel gets its relative luminance, the brightness measure of the WCAG 2.1 accessibility guidelines: the red, green and blue values are made linear and weighted 0.2126, 0.7152 and 0.0722. The result runs from 0 for black to 1 for white.
The value steps are equal in CIE L*, the lightness scale that matches how we see brightness. Each step is then drawn in the grey that looks like the middle of that step, so the study shows the same steps you would see by eye.
Y = 0.2126 R + 0.7152 G + 0.0722 B (R, G, B linear, 0 to 1)
L* = 116 × Y^(1/3) − 16 (for Y above 0.008856)
Steps: the L* range 0 to 100 is cut into equal partsTwo values, the squint and what the photo leaves out
Two values is a notan: a black and white pattern of light and dark shapes, used by painters to check the design of a picture before any colour. Five or seven steps show more of the middle values, which is where most painting problems hide.
The squint view blurs the picture before the steps are made, as a painter squints to lose the detail. The blur is about 2 % of the shorter side. The study works from the photo as it is, so the lights of a glossy surface or a flash can look darker or lighter than the eye sees them in the room.
- The photo is analysed as a copy of up to about 2 megapixels; the PNG you download is that copy.
- Colour is ignored: a red and a green of the same lightness give the same step.
Worked example: a mid grey of 128
A grey with sRGB value 128 has a relative luminance of 0.2159. Its L* is 116 × 0.2159^(1/3) − 16 = 53.6, just above the middle of the scale.
In a two-value notan, 53.6 falls in the light step, drawn as grey 185. In a five-step study it falls in the middle step, drawn as grey 119, because the steps are 20 L* wide and this value is the third of five.
| Value steps | Step for L* 53.6 | Drawn as grey |
|---|---|---|
| 2 (notan) | light (2nd) | 185 |
| 5 | middle (3rd) | 119 |
Frequently asked questions
Why does the study use L* steps rather than plain luminance?
Equal steps of luminance look uneven: the difference between the two darkest steps looks much bigger than between the two lightest. L* is spaced to match how we see lightness, so each value step looks about as far from its neighbour as the next.
What is a notan?
A notan is a study in two values, light and dark, used to plan the design of a picture before colour. The Wikipedia article on notan describes it as a light and dark arrangement that begins with a two-value black and white sketch.
Why blur the picture for the squint view?
Blur removes the fine detail, so the big shapes of light and shade stand out. That is what painters see when they squint at a subject, and it shows whether the main masses are right.
Is my photo uploaded to a server?
No. The photo is read by your browser and the study is made on your device. Nothing you choose is sent to us.
How many value steps should I use?
Two steps check the big design, three or five are good for most studies, and seven shows fine gradations. Start with five and move to a notan once the value structure is clear.
Sources
- W3C: Understanding WCAG 2.1, contrast (minimum), definition of relative luminance
- Wikipedia: CIELAB colour space (lightness L* and the D65 white point)
- Wikipedia: Notan (light and dark design study)
Figures and text last checked on Tuesday, November 10, 2026.