Color Interpolation Demos

This is a quick demo I put together so you can see the difference between interpolations using different color spaces. You can click on the values below and edit them. (Known bug: The hue value setting is a little fidgety because of the non-uniqueness of hue values).

RGB

Interpolating directly in RGB space from d3.rgb(255,0,0) to d3.rgb(0,255,0):

LAB

Interpolating in LAB space from d3.lab(0,1,0.5) to d3.hcl(120,1,0.5):

HSL

Interpolating in HSL space from d3.hsl(0,1,0.5) to d3.hsl(120,1,0.5):

HCL

Interpolating in HCL space from d3.hcl(0,1,0.5) to d3.hcl(120,1,0.5):

Some fun examples