Gallery
Instagram
Flickr
Pinterest
DaveCOLLIER
DevelopmentPages
Blocks of Equal Brightness
Hues x° apart on the colour circle
Hues x° apart on the colour circle, at a given brightness starting from 15% saturation and going up by saturation specified as SV Spacing below. See notes at foot of samples for what this means.
Brightness Calculation Formula:
hues apart ° Brightness: SV spacing %
Notes:
All of the coloured blocks on this page are at the same brightness, therefore converted to greyscale they will all end up the same shade of grey.
Perceptually, they aren’t all the same greyscale, clearly. This is more marked with some brightness calculation formulas than others. That they are not means that none of the formulas is perfect, no one seems to have devised a completely convincing one.
The way the calculation of each block works is that starting at saturation 15% (for any lower than that and the colour looks more grey), and HSV value at 100%, the value is reduced by 0.5% until a brightness match is found (brightness is not the value, brightness is calculated from a formula based on RGB values). Then for the next block the saturation is increased by the given percentage and the look starting from value 100% done again, right up until and not including the saturation goes over 100%.
The block below is a checkerboard containing all the colours from above.
Board colour item size px Download