HSV and HCG color models?


#1

Hello. Why in CSS no possible to add custom color models? For example HCG and HSV?

Here is HCG color model: https://github.com/acterhd/hcg-color/blob/master/convert/hcg.js


#2

This (farily new) part of the css-color spec should answer most needs about different color models / profiles… https://drafts.csswg.org/css-color/#icc-colors


#3

Also, there’s the HSL color model as well, which is the same as HSV:
https://developer.mozilla.org/en/docs/Web/CSS/color_value#hsl()


#4

I want HSV and HCG. Second also is color model (later I present proof). Sad that for CSS no custom color model API.


#5

As @frivoal mentioned before: it’s coming to the spec. (See his link) Check it out, read the docs. If you have any issues with the spec: now’s the time to give feedback and maybe change a thing or two.


#6

I think register colors like this (in worklet):

registerColor("hsva", {
  input: [{
    format: "",
    type: ["number", "percentage", "percentage", "float"], //number, float, percentage, angle
    min: [0, 0, 0, 0],
    max: [360, 100, 100, 1]
  }],
  output: {
    format: "rgba", 
    type: ["number", "number", "number", "float"], 
    min: [0, 0, 0, 0], 
    max: [255, 255, 255, 1]
  },
  to: function(hsva){ //Input defined by min and max, with JS number type
    return [0..255, 0..255, 0..255, 0..1];
  }
});

registerColor("hsva", {
  input: [{
    format: "rgba",
    type: ["number", "number", "number", "float"],
    min: [0, 0, 0, 0],
    max: [255, 255, 255, 1]
  }],
  output: {
    format: "hsva", 
    type: ["number", "percentage", "percentage", "float"], 
    min: [0, 0, 0, 0], 
    max: [360, 100, 100, 1]
  },
  to: function(rgba){ //Input defined by min and max, with JS number type
    return [0..360, 0..100, 0..100, 0..1];
  }
});

In CSS:

.element {
  color: hsva(360, 100%, 100%, 0.1); //CSS input accept: rgba, rgb
  color: hsva(rgba(255, 255, 255, 0.1)); //Before convert to hsva, then to rgba
}

Also available multiple defines at same name. Available “rgb”, “hsl” outputs.