Skip to content
Color & Light

Colour ratios for three-face shading

Lightness steps for tops, lefts and rights that always read.

We prototype every scene on paper first. A sheet of triangle-grid paper, a soft pencil and ten minutes are enough to find out whether a composition works. It is far cheaper to erase a pencil line than to rewrite a dozen nested transforms, and the sketch doubles as documentation when someone asks why a block sits where it does.

At a glance

Shading steps
Face Lightness Example
Top 72% #7C9DFF
Left 60% #4A6FE8
Right 44% #2A4DB5

Handling motion

Performance is rarely a problem for one hero cube, but a scene with fifty transformed blocks is a different story. Each block may become its own compositing layer, and every layer costs memory. Open the Layers panel before you ship and count them. If the number surprises you, flatten the static parts into a single SVG.

Reading isometric art is a learned skill, and most readers have learned it from games and instruction manuals. That shared vocabulary is what makes the style so friendly. It also means readers notice immediately when something is off, even if they cannot say why, so consistency matters more than detail.

Isometric drawing keeps every parallel line parallel. There is no horizon and no vanishing point, so a block at the back of the scene is exactly as large as one at the front. That sounds like a limitation, but it is the reason the style works so well for diagrams: you can measure anything, compare anything, and line things up without fighting perspective.

Download

cubefold-angle-cheatsheet.pdfOne printable page of isometric angles and ratios. 813 B
Download cubefold-angle-cheatsheet.pdf

Questions

Can I use this without JavaScript?

Yes. Every scene in our tutorials is pure HTML and CSS; JavaScript only adds optional interactions.

Does it work on phones?

It does, as long as the scene is scaled with clamp() and never wider than the viewport.

Can I use the code in client work?

Yes. All tutorial code is MIT licensed, so you can use it anywhere with attribution in the source.

Share

Written by

Priya Raman

Priya covers accessibility and tooling. She reviews every illustration on the site with a screen reader before it ships.

All 18 posts by Priya Raman

3 comments

  1. Dana Ortiz

    Has anyone tried this with container queries? Feels like a good fit.

    Reply to Dana Ortiz
    1. Ivo Petrov

      Glad it helped. The values are in the colour ratios reference.

      Reply to Ivo Petrov
  2. Hana Sato

    Tiny typo in the second code block: the unit is missing on the translate value.

    Reply to Hana Sato

Leave a comment

Your email address won’t be published. Required fields are marked.