If you want to design minecraft beacon colors right now, you can find a current version of the app here: https://beacon.colortree.net/ alternatively, you may clone this repository and build it from source with sbt fullOptJS.
In Minecraft, beacons project vertical columns of light directly into the sky and imbue players with enhanced abilities. Players can change the color of a beacon's light beam by channeling it through a sequence of stained glass blocks. This affords a much greater diversity of possible beacon colors than dye colors in minecraft, yet far fewer than the number of colors available in sRGB.
The final color isn't a mere average of the colors in the sequence. Rather, the top color always contributes 50% and each color below contributes half as much as the color above it. Because the relevance of each color below the top follows a pattern of exponential falloff, players may find it difficult to predict which stained glass sequences will produce a specific color.
The Beacon app solves this problem by computing every possible beacon color with a technique called Memoization or Dynamic Programming, converting them to the L*u*v* perceptually uniform color space, then making them searchable by storing them in a spacial datastructure called an Octree.
The following table shows the percentage contributions of each color in a stained glass sequence; the max sequence length is 21 because any colors you can get with sequences longer than 21 blocks can be obtained with a shorter sequence.
| Stained Glass Levels | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| Color 1 | 100.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% | 50.0% |
| Color 2 | 50.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | 25.0% | |
| Color 3 | 25.0% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | 12.5% | ||
| Color 4 | 12.5% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | 6.25% | |||
| Color 5 | 6.25% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | 3.125% | ||||
| Color 6 | 3.125% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | 1.5625% | |||||
| Color 7 | 1.5625% | 0.7813% | 0.7813% | 0.7813% | 0.7813% | 0.7813% | 0.7813% | 0.7813% | 0.7813% | 0.7813% | 0.7813% | 0.7813% | 0.7813% | 0.7813% | 0.7813% | ||||||
| Color 8 | 0.7813% | 0.3906% | 0.3906% | 0.3906% | 0.3906% | 0.3906% | 0.3906% | 0.3906% | 0.3906% | 0.3906% | 0.3906% | 0.3906% | 0.3906% | 0.3906% | |||||||
| Color 9 | 0.3906% | 0.1953% | 0.1953% | 0.1953% | 0.1953% | 0.1953% | 0.1953% | 0.1953% | 0.1953% | 0.1953% | 0.1953% | 0.1953% | 0.1953% | ||||||||
| Color 10 | 0.1953% | 0.0977% | 0.0977% | 0.0977% | 0.0977% | 0.0977% | 0.0977% | 0.0977% | 0.0977% | 0.0977% | 0.0977% | 0.0977% | |||||||||
| Color 11 | 0.0977% | 0.0488% | 0.0488% | 0.0488% | 0.0488% | 0.0488% | 0.0488% | 0.0488% | 0.0488% | 0.0488% | 0.0488% | ||||||||||
| Color 12 | 0.0488% | 0.0244% | 0.0244% | 0.0244% | 0.0244% | 0.0244% | 0.0244% | 0.0244% | 0.0244% | 0.0244% | |||||||||||
| Color 13 | 0.0244% | 0.0122% | 0.0122% | 0.0122% | 0.0122% | 0.0122% | 0.0122% | 0.0122% | 0.0122% | ||||||||||||
| Color 14 | 0.0122% | 0.0061% | 0.0061% | 0.0061% | 0.0061% | 0.0061% | 0.0061% | 0.0061% | |||||||||||||
| Color 15 | 0.0061% | 0.0031% | 0.0031% | 0.0031% | 0.0031% | 0.0031% | 0.0031% | ||||||||||||||
| Color 16 | 0.0031% | 0.0015% | 0.0015% | 0.0015% | 0.0015% | 0.0015% | |||||||||||||||
| Color 17 | 0.0015% | 0.0008% | 0.0008% | 0.0008% | 0.0008% | ||||||||||||||||
| Color 18 | 0.0008% | 0.0004% | 0.0004% | 0.0004% | |||||||||||||||||
| Color 19 | 0.0004% | 0.0002% | 0.0002% | ||||||||||||||||||
| Color 20 | 0.0002% | 0.0001% | |||||||||||||||||||
| Color 21 | 0.0001% |
As you can see, the farther down the column, the more negligible the percentage, so in sequences deeper than 21 blocks, the lowest colors have no meaningful effect on the colors.
This project, written in Scala.js, makes good use of the Scala color science library Uriel, the Octree from Spatial, vector math from S.L.A.S.H., and native arrays from NArr.
It was envisioned by s5bug, features a font by Heaven Castrato and a color picker by Ivan Matveev.