one fing leads . . .

Experiments with Opacity Ranges
Re-colour an image according to different brightness levels. Seven brightness levels can be set to a specified hue and opacity. Purpose is to simulate something of a dyeing process on an image, and see what results.
Select picture
or specify image url apply
 will be converted to 800px × 600px – see copyright notice
 
 
This page requires HTML5 – your browser version is too old for this page to work for you.
 
Background
photo
transparent
texture
Paper Texture 1
Paper Texture 2
Paper Texture 3
Paper Texture 4
Canvas Texture 1
Canvas Texture 2
Canvas Texture 3
Canvas Texture 4
texture and background colour will only be apparent on elements with less than 100% opacity
colour:
 
 
 
 
 
         brightness:
 
replace colour where pixel brightness is
0 to
 
 
 
 
 
use pixel brightness as opacity level, or: inverse, or:
Opacity %
 
         brightness: set to 49
 
replace colour where pixel brightness is
50 to
 
 
 
 
 
use pixel brightness as opacity level, or: inverse, or:
Opacity %
 
         brightness: set to 99
 
replace colour where pixel brightness is
100 to
 
 
 
 
 
use pixel brightness as opacity level, or: inverse, or:
Opacity %
 
         brightness: set to 149
 
replace colour where pixel brightness is
150 to
 
 
 
 
use pixel brightness as opacity level, or: inverse, or:
Opacity %
 
         brightness: set to 199
 
replace colour where pixel brightness is
200 to
 
 
 
 
use pixel brightness as opacity level, or: inverse, or:
Opacity %
 
         brightness: set to 255
 
replace colour where pixel brightness is
255 to
 
 
 
 
use pixel brightness as opacity level, or: inverse, or:
Opacity %
 
         brightness: set to 255
 
replace colour where pixel brightness is
255 to 255
 
 
 
 
use pixel brightness as opacity level, or: inverse, or:
Opacity %
 
         brightness: set to 255
 
Remember settings for next time (uses one cookie)
There are different formulas for calculating relative brightness:
like PS
W3C YIQ
YIQ Sqd
CIE XYZ
XYZ Sqd
Lgt’ness
Average
 
brightness weighted
 
inverse gamma
gamma
: exponent
 
(Explanation of each formula at foot of page.)
This page requires HTML5 – your browser version is too old for this page to work for you.
There are many different ways of calculating greyscale, by multiplying the red, green and blue colour values by different fractions. These give different results.
The results can be applied linearly or with a brightness weighting. (For brightness weighting in graphic form, see Colour Brightness Experiment.) Brightness-weighted results will inevitably be darker by the nature of the curve, as shown graphically on Colour Brightness Experiment.
Brightness weightedThis applies a brightness weighting according to the following formula for inverse gamma, where ic = the calculated brightness value and exp the exponent, the function returns a percentage that is then multiplied by 255:
var c = ic/255.0;
if ( c <= 0.04045 ){
return c/12.92;
} else {
return Math.pow(((c+0.055)/(1.055)),exp);
}
and the formula for gamma where v = the calculated brightness, returns a float between 0 and 255:
if(v <= 0.0031308){
v *= 12.92;
} else {
v = 1.055*Math.pow(v,1.0/exponent)-0.055;
}
return (v*255);
The formulas for calculating greyscale are as follows:
like PSApproximates to the greyscale calculation formula used by Photoshop. red_value × 0.2235, green_value × 0.7154, blue_value × 0.0611, each in turn passed through the inverse gamma formula:
var c = ic/255.0;
if ( c <= 0.04045 ){
return c/12.92;
} else {
return Math.pow(((c+0.055)/(1.055)),2.4);
}
then the result vi passed through a gamma formula as follows, which returns a percentage that is then multiplied by 255:
return vi<=0.0031308 ? vi * 12.92 : 1.055*Math.pow(vi,1.0/2.4)-0.055;
W3C YIQYIQ coefficients also known as Digital CCIR601 and suggested in the Web Accessibility Guidelines from the W3C and challenged by me (see Holes in the W3C Colour Readability Guidelines. ) red_value × 0.2125 + green_value × 0.7154 + blue_value × 0.0721
YIQ Sqd sqrt((0.0.2125 * red_value^2) + (0.7154 * green_value^2) + (0.0721 * blue_value^2))
CIE XYZred_value × 0.299 + green_value × 0.587 + blue_value × 0.114
XYZ Sqd sqrt((0.0.299 * red_value^2) + (0.587 * green_value^2) + (0.587* blue_value^2))
Lightness½ × (max(R,G,B) + min(R,G,B)), see Puzzling Greys.
Average(R + G + B) ÷ 3, see Puzzling Greys.
 

 
more experiments for the sake of my dreams