Re-colour an image according to different brightness criteria. Needs a bit of experiment with the sliders to get a satisfyingly artistic or *meaningful* result. The changed image is shown below the sliders. And the purpose of it all? I don’t know. Yet. It does help in the understanding of colour brightness levels.

Select picture White SolesWhite Soles BlobbyAngel ScrumEuston Office

or specify image url apply

 will be converted to 800px × 600px – see copyright notice

 

 

 

This page require HTML5 – your browser version is too old for this page to work for you.

 

where the difference in brightness between RED element of a pixel and the next highest of the triad is greater than the brightness-diff slider value, pixel will become the red-replace colour

 

 

 

 

brightnesss diff:

  red-replace hex:        

where the difference in brightness between GREEN element of a pixel and the next highest of the triad is greater than the brightness-diff slider value, pixel will become the green-replace colour

 

 

 

 

brightnesss diff:

  green-replace hex:        

where the difference in brightness between BLUE element of a pixel and the next highest of the triad is greater than the brightness-diff slider value, pixel will become the blue-replace colour

 

 

 

 

brightnesss diff:

  blue-replace hex:        

pixels will be black where they are not alredy converted and the brightness is <= the slider value>

 

pixels will be white where they are not already converted and the brightness is >= the slider value

 

grey-replace hex:        

all other pixels will become this shade of grey

 

There are different formulas for calculating relative brightness:

STW*

W3C YIQ

CIE XYZ

Lgt’ness

Average

Explanation of each formula at foot of page.

 

This page require HTML5 – your browser version is too old for this page to work for you.

Copyright: all my photos have a Creative Commons ShareAlike attribution, you can do what you like with them but I ask that you credit me for the pic. Be careful with other people’s photos, do not reproduce them unless you have permission.

Download 800×600 Result Download full size Result

to filename: type: jpegpnggif

0%

Brightness levels, STW*, W3C YIQ, CIE XYZ, Lightness and Average, are calculated according to five different formulas for converting to greyscale.

(On the first three of the brightness conversions, STW*, YIQ and XYZ, green will take strong precedence over red, and red strong precedence over blue. That’s because it does, with those brightness conversion formulas.)

STW* is the formula devised by me, and discussed in detail on Readable Text in Colour – STW*. You’ll probably find that this is the option that gives the most convincing relative brightness level results. It usually does.

W3C YIQ is the YIQ formula recommended by the W3C and discussed on Holes in the W3C Colour Readability Guidelines.

The formulas for other three: CIE XYZ, Lightness and Average, can be found on Puzzling Greys.

Casamatita Colour Simplifications

 

4