fbpx

time-based HSB color values

My interest in time-based color values came from reading about the concept of chromo°. Picking a point from the HSB color model proved more complicated than I originally thought. Ben Bryant helped me do the hard math parts to figure this one out, so special thanks to him.

See the Pen time-based HSB by adam rowe (@barabadam) on CodePen.

Above is a working JavaScript sample of an equation to obtain color values from the HSB color model based on time units.
Below is the equation in general terms. View this page’s source for the exact code, which also converts the colors to hexadecimal values.

(round(max(min(abs(767*((($degree+0) % 360)-180)/180)-256,255),0),0))*256*256+
(round(max(min(abs(767*((($degree+120) % 360)-180)/180)-256,255),0),0))*256+
round(max(min(abs(767*((($degree+240) % 360)-180)/180)-256,255),0),0),6)

$degree is the percentage of time unit (divided by half of the total units to offset the difference [by 180°] between chromo° angles and HSB values).

medium:
(artwork medium)