This code is adapted from the Java Applet originally hosted at https://yehar.com/blog/?p=307#comment-1256021 by SalusaSecondus.
I am not a dyer and did this as a favor to a friend.
The original version was released to the public domin.
In an effort to preseve it, I hand translated it into HTML and Javascript and am hosting it here (also under the public domain).
This webpage is entirely self-contained and may be downloaded to your local machine or rehosted elsewhere.
I intend to make minor usability tweaks as I find them, but I'm not a web developer or someone who generally builds user interfaces.
Since this is hosted in a GitHub repository, I encourage people to submit Pull Requests or Issues to improve this.
To aid in use, I am duplicating the application description below from the original author.
Original description
The basic idea of the Dye Mixer is to let you to try out various dye combinations on various canvases under various lighting conditions, in "virtual reality", with only virtual fabric and dye wasted. :-)
Instructions
Here are descriptions of the different parts of the Dye Mixer user interface:
You can alter the virtual lighting conditions by choosing the appropriate Illuminant. Objects appear a different color under different illuminants, so make a choice similar to what you have where your work will be viewed in.
Illuminant Swatch shows the appearance of the illuminantion on a truly white surface. Each Swatch shows its CIE xy color coordinates.
Checking Illuminant White adapt makes the illumination appear the same color as the white on your computer screen, to which your vision has adapted to. This will make subjective color evaluation easier. However, if you want to compare absolute colors by holding an object against the computer screen, you should uncheck Illuminant White adapt.
Before proceeding to dyes, you must choose the Canvas. Dyes appear different color on different canvases.
Canvas Swatch shows the appearance of the canvas in the chosen illumination.
Checking Canvas White adapt makes the canvas appear the same color as the white on your computer screen. This may be useful if you have a large canvas, to which your vision adapts, and a small dyed area, and you want to see how the dyed area appears in the context of its surroundings. To view absolute colors, uncheck Canvas White adapt.
Checking Canvas Brightness adapt increases the amount of light the canvas is exposed to, but does not interfere with the absolute tone of color. Canvas Brightness adapt has no effect if Canvas White adapt is enabled.
The Dye Mixer allows mixing 8 dyes simultaneously. For each dye:
Choose the Dye you want to use. Note that the Dye Mixer is ignorant of the chemical compatibility of different dyes and canvases.
Checking Mix will include the dye in the combined mixture of dyes.
Amount of dye can be changed either by operating the slider, or numerically. The actual amount or concentration of dye required for the same effect in the laboratory can be direcly proportional to the Amount value. (I'd love to hear your experiments on this!) The proportionality coefficient you must use is different for different dyes and canvases.
Swatch shows the dyed canvas.
Mixed swatch shows the canvas dyed with all the selected dyes.
Checking Mixed swatch Brightness adapt increases the amount of light the dyed canvas is exposed to, but does not interfere with the absolute tone of color.
Here are some typical uses for the Dye Mixer:
You have a color in the back of your mind and wish to find a dye combination to realize it. Set your computer screen white balance so that it matches the white balance in the space you are in, or just let your eyes adjust to the monitor white balance. Enable Illuminant White adapt. Choose the Canvas and Illuminant as close as possible to what your work will be showed using. Try different dye amounts and combinations until you get an acceptable result. Just to be sure, write down what you are using. Try to use dyes sparingly! In actual reality, for each of the dyes you use in the mix, dye a swatch and see if it gets the same tone of color as the Dye Swatch in the Dye Mixer. Adjust the amount of dye until you have a matching result (see below for matching instructions).
You want to compare the color of a real-life object to a color produced by the Dye Mixer. Adjust the white balance of your computer screen to 6500 K. Choose an illuminant as close as possible to what you have in the space you are in. Disable white adaptations in the Dye Mixer. Adjust the computer screen contrast and the amout of lighting in your room so that the Dye Mixer's swatch has the same brightness as the object. Compare the colors between the Dye Mixer's swatch and the object.
The original author recommends making a test swatch and then placing it against white paper for contrast.
Then, use this site to color match as close as you can and that gives you a "reference amount."
Divide the amount of dye you used by the reference amount to get your "scaling factor."
In the future, when you need to figure out how much of this dye you need to use, multiple the "amount" reported by this page by the "scaling factor" you calculated earlier.
