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
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
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
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()
I want HSV and HCG. Second also is color model (later I present proof). Sad that for CSS no custom color model API.
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.
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.