decimal color / color count

[quasicodo42]

Hey this is a great tool! The transparency plugin makes it top level.

I work with an older color data (vb) where colors are represented in decimal format, ie, #FFFFFF equals 16777215, This website is for reference: https://www.mathsisfun.com/hexadecimal-decimal-colors.html

It would be nice/convenient to get the decimal value of the color as well as the other options you provide.

Additionally, using the wheel on a small mobile device is great! It would also be nice to dumb down the colors quite a bit for fat thumbs or when color precision isn't necessary. It would be nice to have a parameter that would change the amount of colors available: 8, 16, 32, etc., up to millions.

Just some thoughts to make it next level.

Thanks,

Jake

[jaames]

Hey, thank you for the kind words and great suggestions!

Converting hex <-> dec is pretty easy to do in JavaScript:

// hex to decimal
var hex = '#ffffff';
var dec = parseInt(hex.replace('#', '0x'));

// decimal to hex
var dec = 16777215;
var hex = '#' + dec.toString(16).padStart(6, '0');

Since it's so simple to convert I suppose it makes sense to also include it in the library. Is there any preference for the property name? Something like color.rgbInteger or color.decimal?

The color limitation thing is also a good idea, although I think it would be a little more difficult to implement. I'm not sure whether it makes sense since wheel-style color pickers like iro.js aren't really meant for precision color choices anyway

Cheers though :)

[quasicodo42]

Cool, great to hear from you! I think either of those names would work. I have seen it mostly as decimal, but that could be due to the way I search. Here it's called decimal as well. https://convertingcolors.com/decimal-color-16744576.html

So, if I were to vote color.decimal would get mine.

The limitation is to stay within some kind of standard. For example, it's impossible to choose real named colors, or even white. Just a thought. Thanks.

[KaanMol]

@jaames maybe instead of putting this in Iro.JS itself, we should make it really easy to implement this sort of functions for the end-user. That will help different scenario's probably in the future (:

[jaames]

@KaanMol Oh, like a way to easily extend iro.Color? That's a decent idea actually

[KaanMol]

Yeah, that keeps Iro.JS atleast small and straight to the point. Probably not everybody needs this

[jaames]

Good point! Object.defineProperty can be used to add extra properties (I do this in iro-transparency-plugin)

Object.defineProperty(iro.Color.prototype, 'decimal', {
  get: function() {
    return parseInt(this.hexString.replace('#', '0x'));
  },
  set: function(newValue) {
    this.hexString = '#' + newValue.toString(16).padStart(6, '0');
  }
})

It's pretty simple, but perhaps a small wrapper around it would be useful

[KaanMol]

Do you want to make this on the Typescript branch or on the current one? If you want to make it on the Typescript one, let's add it to a to-do list there.

[jaames]

Closing this since I don't think it's important to add this

I might consider adding a simple way to extend iro.Color to add extra properties, though