Add support of HSV (HSB) about polychrome HOT 9 CLOSED

Just in case someone stumble upon this issue too, there is another tool which seems to be doing similar thing, but also supports HSV and CMYK: https://github.com/One-com/one-color

from polychrome.

Thanks for the suggestion, @ArmorDarks. I'll look into this and ping you when I have a PR ready.

from polychrome.

After looking into this some more @ArmorDarks , I think this is a bit out of the scope of what this module aims to offer. The purpose of this module at it's entry point was to parse css color strings and provide manipulations and output to other css color strings. The common ground here is that all string inputs and outputs from this module are supported in CSS.

I want to understand the request more, so I have two questions:

1. Why support HSV/HSB if it isn't supported as a CSS color value?
2. How would you use polychrome with HSV(B)? Because there isn't really a string to parse, you would pass in the 3 values? polychrome(h, s, v)?

from polychrome.

@cdonohue

Purpose was briefly described in mentioned Sass issue.

Yes, HSV indeed isn't CSS spec, but it used in all Adobe products (which not to mention, are quite popular, which establishes kinda of "standard"), and thus huge part of designers have to deal with HSV color model at first place. Since CSS doesn't support HSV and only HSL, moving HSV color values from Photoshop or Illustrator to CSS is quite painful.

This becomes especially important, if you want to adjust colors dynamically (withs Sass adjust-color function). Usually you want to do this, when you have set of primary colors, and all other colors are simply deviations from that set. Since HSV reacts differently to manipulation of brightness than HSL, it becomes impossible to adjust color based on HSV from Photoshop values and involves a lot of tinkering with lightness, hue and saturation just to achieve same shift as in Photoshop.

The main idea is to write Sass function, which will take any color string and HSV value based on which should be made color adjustment, and than output any CSS-compatible color. In other way, to write an alternative to Sass adjust-color function, but which operates based on HSV, not HSL. Since this library already makes great efforts in manipulating colors, it would make this task much easier.

How would you use polychrome with HSV(B)? Because there isn't really a string to parse, you would pass in the 3 values? polychrome(h, s, v)?

To be honest, for me any approach will work. I think HSV can be represented as hsv(h,s,b) string, but I'm perfectly fine with direct passing of values with polychrome({ h: 11, s: 11, v: 11 })

from polychrome.

@ArmorDarks could you make use of another package, like hsv-rgb?

import polychrome from "polychrome";
import hsvToRgb from "hsv-rgb";

const [r, g, b] = hsvToRgb(h, s, v);
const color = polychrome(`rgb(${r},${g},${b})`);

Would that work?

from polychrome.

@ArmorDarks ping

from polychrome.

@cdonohue Sorry for delay.

Sure, hsv-rgb will work, thanks for sharing! Though, it would be much better to have single dependency in form of polychrome, which seems to be quite nice project. We're planning adopt it and include it in Kotsu anyway, to solve some other color-related conversion issues, and if it could solve HSV model issue too, it would be even greater.

I'm also quite sure that because of such "popularity" of HSV model due to Adobe products, other people will benefit greatly if polychrome could handle HSV too. Maybe include hsv-rgb as polychrome dependency?

from polychrome.

@ArmorDarks I think that allowing another app to compose polychrome with something like hsv-rgb would be the best decision, then.

This way, polychrome can stay decoupled and the decision is left up to the developer on what libraries need to be used to augment it.

from polychrome.

@cdonohue well, it is your library, so you're decisions.

Just as my note, I don't see any reason to not support HSV model directly in this library, because it is popular and this lib seemed to me like an attempt to make manipulation with most popular in web color models easier.

from polychrome.