Developers Web home

Calculate the tinting of a face colour depending on the angle with a light source

Usually colours are represented by hex: 0xffffff or #ffffff

First we must derived the red, green and blue integer components of a hexidecimal colour value [colour].

[red] = [colour] >> 16 (bit-wise shift right by 16 bits)

[green] = ( [colour] - ( 255 × 255 × [red] ) ) >> 8 (bit-wise shift right by 8 bits)

[blue] = ( [colour] - ( 255 × 255 × [red] ) - ( 255 × [green] ) )

To provide control over the behaviour of the tinting we can define a contrast variable [cont], with values between 0 (no effect) and 1 (maximum effect). To stop any wash-out of colour, I suggest a contrast of around 0.8. So [cont] = 0.8

The tinting [tint] value is to be between 0 and 1, so...

if [tint] < 0.5 (darken)

[red] = [red] - ( [red] × [tint] × [cont] )

[green] = [green] - ( [green] × [tint] × [cont] )

[blue] = [blue] - ( [blue] × [tint] × [cont] )

if [tint] > 0.5 (darken)

[red] = [red] + ( ( 255 -[red] ) × [tint] × [cont] )

[green] = [green] + ( ( 255 -[green] ) × [tint] × [cont] )

[blue] = [blue] + ( ( 255 -[blue] ) × [tint] × [cont] )

Finally, we musy rebuild the hexidecimal colour:

[colour] = [red] << 16 ^ [green] << 8 ^ [blue]

or

[colour] = ( [red] × 255 × 255 ) + ( [green] × 255 ) + [blue]

The result is [colour] with tinted colour components in the hexidecimal form: 0xffffff or #ffffff

No conversation on this topic You must be logged in to add to the conversation