-
Does Color.js have a way to specify a color using rgb coordinates in the standard integer 0-255 range? For me, it would be very convenient if there was an |
Beta Was this translation helpful? Give feedback.
Replies: 15 comments 68 replies
-
|
Beta Was this translation helpful? Give feedback.
-
RGB would be a misleading name and a bit vague as what you are asking for is an sRGB alternative (a specific RGB representation) just scaled between [0, 255]. I can't speak as to whether the project wishes to have a specific space that handles values specifically in this range or not, but regardless, you should be able to craft your own and register it for personal use at least. I'll let others speak to whether an alternative space with this representation is desired or not. Personally, I do not find it too difficult to scale values to and from [0, 255] in the few times I need to specifically deal with such values. |
Beta Was this translation helpful? Give feedback.
-
@facelessuser Thanks for your answer. Yes, I am currently converting from [0, 255], but I just encountered yet another place where I have to do it, so I posted this question. I get a lot of color values via Any tips/guidance on creating and registering this new color space? Any docs to read? If I can do that, then if it's of interest to others it can be integrated here. The name of the space is not critical, though I would prefer it to be called |
Beta Was this translation helpful? Give feedback.
-
As @facelessuser alluded to it's probably better to handle the conversion in your application. But if you want to go the custom color space route here's a custom color space that handles coordinates in the 0-255 range. If you want to ensure the coordinates are integers you can modify the // srgb255.js
import ColorSpace from "../ColorSpace.js";
import sRGB from "./srgb.js";
import sRGBLinear from "./srgb-linear.js";
export default new ColorSpace({
id: "srgb255",
name: "sRGB (0-255)",
coords: {
r: {
range: [0, 255],
},
g: {
range: [0, 255],
},
b: {
range: [0, 255],
},
},
base: sRGBLinear,
fromBase: rgb => {
return sRGB.fromBase(rgb).map(val => val * 255 );
},
toBase: rgb => {
return sRGB.toBase(rgb.map(val => val / 255));
},
formats: {
color: {
id: "--srgb255",
coords: ["<number>", "<number>", "<number>"],
},
},
});
// To register the ColorSpace you can do something like this in your application code (untested):
import sRGB255 from "./srgb255.js"
import ColorSpace from "../ColorSpace.js";
ColorSpace.register(sRGB255);
|
Beta Was this translation helpful? Give feedback.
-
One other thing, because this is a non standard color space you won't be able to use the serialized output as a value in css. .willnotwork {
color: color(--srgb255 128 0 0);
} |
Beta Was this translation helpful? Give feedback.
-
Not a problem for me, but thanks for the detail. |
Beta Was this translation helpful? Give feedback.
-
You'll also have to change the imports for |
Beta Was this translation helpful? Give feedback.
-
Some info regarding the code snippet I'm going to post in the next comment:
Because this is a private space I went with
Encapsulating this in a color space causes me to distinguish betweeen |
Beta Was this translation helpful? Give feedback.
-
This snippet has been edited to make sense as a standalone. I have a slightly unorthodox coding style that is on the dense side, and I have yet to adopt the new trend of trailing commas: import Color from "https://colorjs.io/dist/color.js";
export Color;
document.addEventListener("DOMContentLoaded", loadIt, false);
function loadIt() {
const
RGB = "rgb", // my code has a collection of CSS function names, including color() spaces, so I don't need this
ColorSpace = Color.Space,
registry = Color.spaces,
sRGBLinear = registry["srgb-linear"],
sRGB = registry["srgb"],
sRGB255 = new ColorSpace({
id: "rgb255",
name: "sRGB (0-255)",
base: sRGBLinear,
cssId: RGB,
coords: {},
fromBase: rgb => sRGB.fromBase(rgb).map(v => v * 255 ),
toBase: rgb => sRGB.toBase( rgb .map(v => v / 255)),
formats: {
rgb255: {
type:"custom",
coords:Array(3).fill("<number>[0, 255]"),
parse: () => false, // necessary until PR #595 is merged
serialize: (coords, alpha) => {
coords = coords.map(n => n.toFixed(0)).join(" ");
if (alpha !== undefined)
coords += ` / ${alpha}`;
return `rgb(${coords})`;
}
}
}
}),
coords = sRGB255.coords,
range = {range:[0, 255]};
[...RGB].forEach(char => coords[char] = range);
ColorSpace.register(sRGB255);
const sorted = Object.values(registry).sort((a, b) => a.id < b.id ? -1 : 1);
for (const space of sorted) {
// populate a <select> with the space ids, displaying cssIds where appropriate
}
// etc.
} |
Beta Was this translation helpful? Give feedback.
-
Now that I have my It doesn't seem a stretch to me that Color.js would have separate color spaces for |
Beta Was this translation helpful? Give feedback.
-
So my format needs a parse function, I'll start fiddling with that, but based on the srgb "hex" format, I'm not sure how to parse CSS named colors like "darkred", and I have no idea what else needs to be in there. Can I use an existing Color.js parse function here? If I simply copy the srgb "hex" parse function into my custom space, it returns only 2 coordinates for "darkred", maybe because it's looking for "#RRGGBB". An existing parser that handles CSS named colors would seem the way to go. |
Beta Was this translation helpful? Give feedback.
-
It took a minute (is there a grep, a way to search source files for text on github?), but I checked and srgb.js is the only file in the spaces folder that has the text "custom". So this parse() code works when there is only one set of "custom" formats all contained in a single color space. I need "custom" to enable I'm going to refresh my Color.js repo and see if I can get this to work. |
Beta Was this translation helpful? Give feedback.
-
I have updated my answer code with the new "custom" format type and proper alpha serialization (in the new I included the dummy parse property/function with a comment about removing it after the PR merges. Thanks so much to both of you, @facelessuser and @lloydk. You have been extremely helpful and patient. I almost gave up there for a bit, but in the end we got a good result. An answered question shouldn't be closed, or should it? Keeping it open gets it into more query results for users browsing questions, or so I believe at this time. |
Beta Was this translation helpful? Give feedback.
-
0 - 255 was designed at a time when RGB was restricted to 8 bit. There is literally no reason to use it, and CSS doesn't need it. Even the If you really really need to do so for some reason, I agree a custom color space is the way to go. You could even route parsing |
Beta Was this translation helpful? Give feedback.
This snippet has been edited to make sense as a standalone. I have a slightly unorthodox coding style that is on the dense side, and I have yet to adopt the new trend of trailing commas: