colorjs/color-space

HSI out of bounds values and hue shifting

jtlapp opened this issue · 6 comments

jtlapp commented

The HSI conversion will take valid intensity values and convert them to RGB bytes > 255.

Also, shifting the intensity by a small amount can produce a rather large change in hue.

const cs = require('color-space');

console.log('HSI:');
let rgb1 = [ 0xb7, 0xc7, 0xff ];
let hsi = cs.rgb.hsi(rgb1);
let rgb2 = cs.hsi.rgb(hsi);
console.log(`     from RGB ${round(rgb1)} to HSI ${round(hsi)}`);
console.log(`  back to RGB ${round(rgb2)}`);
hsi[2] += 6;
let rgb3 = cs.hsi.rgb(hsi);
console.log(`  i+=6 to RGB ${round(rgb3)}`);

function round(vals) {
    return [Math.round(vals[0]), Math.round(vals[1]), Math.round(vals[2])];
}

Yields:

HSI:
     from RGB 183,199,255 to HSI 228,14,212
  back to RGB 183,199,255
  i+=6 to RGB 188,205,262
dy commented

Thanks for the catch! Can you help with fixing that?

jtlapp commented

There are so many ways to express this conversion, I'm not finding the algorithm you modeled. I'm coding it from scratch to see if I get better behavior. Will share when I'm done.

  • 👍1
jtlapp commented

I implemented this algoirthm and got these results:

     from RGB 183,199,255 to HSI 227,14,212
  back to RGB 183,200,254
  i+=6 to RGB 188,206,261

Despite using two different algorithms, our results are in rough agreement. There must be something about HSI that I'm not understanding.

jtlapp commented

I experimented with bounding the RGB outputs to 0..255 and the colors I get seem quite reasonable for my image transformations. I think that's all you need to do!