How to create a custom RGB color space?

[sidewayss]

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 rgb color space distinct from srgb that accepted coordinates as 0-255. One that explicitly uses the CSS rgb() function, though it appears that Color.js srgb already does that.
Seems like nobody uses color(srgb 0 0 0) :-)

[sidewayss]

RGBColorSpace uses [0, 1] as its range, and I'm not sure how much else of it requires overriding. If someone can give me some tips/guidance, I can submit a PR to add a new rgb color space.

[facelessuser]

color(srgb 0 0 0) is new, so I imagine it won't be used a lot at first. There are many libraries that use [0, 1], but there are also many that use [0, 255], that range originally being defined to be used in UINT8 type variables.

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.

[sidewayss]

@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 getComputedStyle(), which returns rgba() with [0-255] for rgb, hsl, and hwb, and I display and assign-to-CSS-property rgb values as [0-255]. At this point I am caching coordinates and trying to reuse them in all 3 contexts: display, assign-to-CSS, and Color.js. Either I need to cache 2 sets of coordinates, or I need to convert more on demand, or I need a new color space.

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 rgb, since that's the name of the CSS function it uses and that's the way the other spaces are named, srgb being the one exception.

[facelessuser]

Again, Display P3 is RGB, Rec. 2020 is RGB, sRGB is RGB. RGB is a model, not a space. I get the CSS association, but generally, in the bigger picture of a Color library, it becomes a very ambiguous name.

If I get some time, I can look into creating an example of creating a custom space and registering it.

[sidewayss]

Thanks. I understand that RGB is everywhere under the surface. My mistake: my code uses space.cssId to match the function name, so if that's set to "rgb" I'm in good shape. I currently have an exception for srgb.

[sidewayss]

If I get some time, I can look into creating an example of creating a custom space and registering it.

If you do that I'll write it up so it can be used in the docs, at least a blow-by-blow example. I assume that's of interest.

I can distribute this custom space file, right? I am imagining that it would require a bit of js code to do the registration.

[lloydk]

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 tobase and fromBase functions but you'd have to write a custom parsing routine (see the srgb color space) to ensure that color(--srgb255 128.4 0 0) is stored as [128, 0, 0]. Also, functions like range and steps and possibly some other functions may return non integer coordinates for this space.

// 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);

[sidewayss]

Thanks! I'll give it a try later today. In the process I'll find out whether or not it's preferable to doing conversions back and forth.

[sidewayss]

@lloydk how did you get your code snippet above to do all the coloring by type? I used the standard triple backquote and I got black & white in mine below.

[lloydk]

you can add a language after the triple backquote. e.g. '''js or '''css or '''ruby

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting

[sidewayss]

Done. Thanks!

[lloydk]

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);
}

[sidewayss]

My color space is using "lab" as it's default display space. How do I set that to srgb? I don't see spaces that set a display or displaySpace property. The srgb space works because CSS.supports("color(srgb)") here:

color.js/src/display.js

Line 53 in 40e7a05

if (typeof CSS === "undefined" || CSS.supports("color", /** @type {string} */ (ret)) || !defaults.display_space) {

And somewhere later it converts that to the rgb() function using percentage units.

[sidewayss]

@lloydk - I figured it out by mimicking the srgb space. And then I figured out how to avoid converting to percentages. It's all in the formats property of the object passed to new ColorSpace():

formats: { rgb: { coords: Array(3).fill("<number>[0, 255]") }}

Which I borrowed from this line:

color.js/src/spaces/srgb.js

Line 9 in 40e7a05

let coordGrammarNumber = Array(3).fill("<number>[0, 255]");

Though you probably knew all of that already. I updated my example comment below.

[sidewayss]

@lloydk - My only remaining question, and it's not critical, is how to set the precision to zero so that it serializes integers? How do I do it without passing an options object as as arg to display()? I don't see an example among the source files.

[sidewayss]

Not a problem for me, but thanks for the detail.

[lloydk]

You'll also have to change the imports for ColorSpace, sRGB and sRGBLinear depending on how you're bundling or importing color.js. I created that space within the color.js project itself so the imports ended up being relative to the actual source code.

[sidewayss]

I've just done that, as I'm importing from colorjs.io. I use /dist/color.js elsewhere, but the examples I see in the docs use /src/ColorSpace.js for any other source files. Or does dist/color.js bundle ColorSpace? I'm using /src/spaces for srgb and srgb-linear. I'll get it working and fiddle around with it a bit, then get back to you here. Unless I get stuck... but that seems unlikely. I just figured out how to set the cssId, so that's my next step.

[sidewayss]

The first real hitch is managing a single instance of the ColorSpace class that has this new space in the registry. I'm not talking about an instance of the class in the normal sense of "instance", but the class itself, whatever a single instance of that is called. I cannot register the new space in a different ColorSpace than it was created with.

This line in register():

color.js/src/ColorSpace.js

Line 275 in 40e7a05

space = this.get(space);

fails here in get():

color.js/src/ColorSpace.js

Line 297 in 40e7a05

if (!space || space instanceof ColorSpace) {

because space is not an instance of this ColorSpace.

I notice what I think are some new additions to Color that are helpful:

• Color.Space is the ColorSpace class for this Color class, and that precludes an import.
• Color.spaces = ColorSpace.registry, which is something I obliquely requested a while back.

But I cannot have a separate srgb255.js module. Dynamic import() doesn't solve it either. The timing of importing and reexporting does not work in any configuration that I have tried, and I don't even want to get into that import timing muck because it's always messy. I now do this inside the module where I import Color from colorjs.io:
const sRGB255 = new ColorSpace(...);

Additionally:

1. I cannot import Color from colorjs.io/dist and sRGBLinear from colorjs.io/src/spaces, again the ColorSpace class is not the same.
2. On the other hand, if I import Color from /src, the standard spaces are not registered by default, only the one I just registered.
3. So now I get the sRGB and sRGBLinear instances of ColorSpace from the registry, instead of importing them.

I have got it doing the basics now, but I have a bit more to test. Once I've got everything ironed out I'll post my code in a new comment.

[sidewayss]

Setting an explicit cssId requires removing the formats:{color:{id:"--srgb255"}}:

color.js/src/ColorSpace.js

Line 55 in 40e7a05

if (!this.formats.color?.id) {

Or I could set formats:{color:{id:"rgb"}} but I'm trying to imitate spaces/a98rgb.js with it's cssId:"a98-rgb".

Given that I have no plans to serialize it (CSS already provides a way), and that Color.js can't read what it serializes, this seems fine. If it's good enough for a98rgb.js then it's good enough for me.

[lloydk]

I cannot import Color from colorjs.io/dist and sRGBLinear from colorjs.io/src/spaces, again the ColorSpace class is not the same.

I think you ran into something similar to this issue #303

[sidewayss]

Could well be. Thankfully in my case the solution was an improvement, in that it's fewer import statements. At least I prefer it that way. I was already getting the registry, but via:

import {spaces} from "https://colorjs.io/src/spaces/index.js";

It's also not too surprising that the module structure for an internal ColorSpace instance would be different from that of a private, custom one. So it doesn't bother me. I can see how it might be problematic in other cases.

[sidewayss]

Some info regarding the code snippet I'm going to post in the next comment:

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].

export default new ColorSpace({
id: "srgb255",

Because this is a private space I went with id:"rgb255". I want it to sort before srgb and after the rec2100 spaces. If this ever makes it into Color.js, the id can change to "srgb255" or whatever is deemed best.

color(srgb 0 0 0) is new, so I imagine it won't be used a lot at first.

Encapsulating this in a color space causes me to distinguish betweeen rgb() and color(srgb), so my library now has those two as separate instances of its color function class. Add me to the list of early adopters.

[sidewayss]

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.
}

[sidewayss]

Now that I have my rgb255 color space fully working, I like it. It allows me to remove code in several places, offsetting the new code, which is all in one place. I also like separating rgb() and color(srgb) in my framework and app. It removes exceptions and allows users to pick their coordinate format. Overall the new color space normalizes things.

It doesn't seem a stretch to me that Color.js would have separate color spaces for rgb() and color(srgb). The srgb space wouldn't have to convert to percentages anymore. Is there another reason to avoid color()? caniuse.com puts global usage at 91.47%. rgb() is obviously universal. Can't you specify a fallback color space or space.format of rgb()?

[sidewayss]

I have updated the object I pass into new ColorSpace() to include this property, my initial take on what I need:

serialize: (coords, alpha) => {
    if (alpha !== undefined)
        coords.push(alpha);
    return `rgb(${coords.map(n => n.toFixed(0)).join(E.sp)})`;
}

But it never executes. The code runs through it's normal call stack, setting the precision in:

serialize.js/serialize()
Format.js/serializeCoords()
Types.js/serialize()u
util.js/serializeNumber()=>toPrecision()

On a side note, why the + in +toPrecision() here?

color.js/src/util.js

Line 37 in 40e7a05

n = +toPrecision(n, precision);

Aren't there spaces where negative values are legit?

[sidewayss]

Should it be executing my serialize() here in display.js/display()?

color.js/src/display.js

Line 51 in 40e7a05

let ret = /** @type {Display} */ (serialize(color, options));

I'm going to have to setup a codepen or something local to run the srgb hex serialize() and see how it does what it does...

[lloydk]

I have updated the object I pass into new Color() to include this property, my initial take on what I need:

Did you mean to say ColorSpace() instead of Color()?

serialize: (coords, alpha) => {
if (alpha !== undefined)
coords.push(alpha);
return rgb(${coords.map(n => n.toFixed(0)).join(E.sp)});
}

Can you paste the entire ColorSpace definition.

[sidewayss]

I did mean ColorSpace(). Here it is, unedited to make it generic:

    sRGB255    = new ColorSpace({
        id:    "rgb255",
        name:  "sRGB (0-255)",
        base:   sRGBLinear,
        cssId:  Fn.rgb,
        coords: {},
        fromBase: rgb => sRGB.fromBase(rgb).map(n => n * 255 ),
        toBase:   rgb => sRGB.toBase(  rgb .map(n => n / 255)),
        formats: {
            rgb: {
                type:"custom",
                coords:Array(3).fill("<number>[0, 255]"),
                serialize: (coords, alpha) => {
                    if (Is.def(alpha))
                        coords.push(alpha);
                    return `${Fn.rgb}(${coords.map(n => n.toFixed(0)).join(E.sp)})`;
                }
            }
        }
    }),

[sidewayss]

@lloydk - But you might want to go to the end of this discussion to see the current state of affairs, if you have not already. I have it working, but it screws up something else.

[sidewayss]

[facelessuser]

I just realized that "hex" is not a color space.

I was agreeing that hex is not a color space, it is a format method on sRGB.

[sidewayss]

Then it was the use of the negative that threw me. Many people, but especially a close friend of mine, start sentences with "Yea, no...". It makes sense in many cases, but if the listener is actually paying attention it might throw them.

[facelessuser]

I just responding quickly. I didn't think too much of what I was saying. In the moment it made sense in my head.

[sidewayss]

Yea, no. :-)

[sidewayss]

I got it to work! But with a big caveat.

1. format type must be set to "custom" so that this line executes:

   color.js/src/serialize.js

   Line 78 in 40e7a05

   ret = format.serialize(coords, color.alpha, options);

2. I needed to put the serialize property in the format, not the ColorSpace:

formats: {
    rgb: {
        type:"custom",
        coords:Array(3).fill("<number>[0, 255]"),
        serialize: (coords, alpha) => {
            if (Is.def(alpha))
                coords.push(alpha);
            return `${Fn.rgb}(${coords.map(n => n.toFixed(0)).join(E.sp)})`;
        }
    }
}

The caveat is that when I try this: color = new Color("darkred"), it runs into this line and exits prematurely, causing me errors later:

color.js/src/parse.js

Line 126 in 40e7a05

let color = format.parse(env.str);

Looks my format object needs a parse function too...

[sidewayss]

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.

[sidewayss]

The other reason is that my app page uses Color.js for everything except animation playback. But animation playback uses my library, for which Color.js is merely an option enabled by passing in a Color instance. It uses CSS for all the color spaces CSS has available. That code, right or wrong, prefers integer 0-255 over percentages for RGB, as it takes numeric arguments and does its own hex and named colors conversion to that format. So I'm mixing the two libraries here in this color animation app page, and this new color space makes that smoother. The rgb255 space is local to this one app page.

[facelessuser]

new Color("sRGB", "darkred")

Yes, this throws an error as when you specify a color space, the second argument is expected to be coordinates. Strings are only parsed when only a single string is provided. Then it goes through the various spaces looking for a match.

[sidewayss]

Is there a reason you can't just have all your string colors parsed by sRGB and convert to your RGB space for manipulation? I kind of figured that was the approach you were going for when you started down this path, but maybe not?

And finally, to get directly to your question: That is exactly what I do. I do it with new Color() for the start and end colors in the animation. That defaults to sRGB, but I don't really care what it is because Color.js will convert it for me later. I get colorspace-specific with the left and right sides of the app, each of which has a ColorSpace, a canvas for display, and coordinates displays.

[sidewayss]

new Color("sRGB", "darkred")

Yes, this throws an error as when you specify a color space, the second argument is expected to be coordinates. Strings are only parsed when only a single string is provided. Then it goes through the various spaces looking for a match.

It goes through all the spaces looking for all matches. The break statement is for an interior loop, not the outer ColorSpace.all loop:

color.js/src/parse.js

Line 112 in 40e7a05

for (let formatId in space.formats) {

[sidewayss]

That right there would solve it for all "custom" spaces, breaking all the way out on the first match. Right now it's the last "custom" format space that sets the return value, from the last space in the collection that has a "custom" format.

[sidewayss]

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 serialize(), but it exposes what appears to be a bug in parse() by adding a second color space with a "custom" format.

I'm going to refresh my Color.js repo and see if I can get this to work.

[sidewayss]

It occurred to me out of the blue to run npm update, not 100% sure that it was even a command. It churned for a while, spat out some warnings and exited successfully. I then ran npm run build and it generated 83 errors. I've attached a text file of the output.
npm-errors.txt

[lloydk]

It occurred to me out of the blue to run npm update, not 100% sure that it was even a command. It churned for a while, spat out some warnings and exited successfully. I then ran npm run build and it generated 83 errors. I've attached a text file of the output. npm-errors.txt

npm install is what you wanted, but npm update will probably be ok.

The 83 errors are from typescript linting and are expected.

[sidewayss]

Great, I got it up and running and tested my two changes and they work. I just committed my changes to my remote repo on github and it says "Lint and Test Type: all jobs have failed". See here:
https://github.com/sidewayss/color.js/actions/runs/10746938032

Is this more of the same 83 errors? Or do I need to do something before opening a PR?

[sidewayss]

No, it's a coding style problem. I don't usually add curly braces when they are merely optional. Does this project have a Prettier setup?

[sidewayss]

I just created a new PR here: #595

All the checks have passed.

[sidewayss]

I have updated my answer code with the new "custom" format type and proper alpha serialization (in the new / A format, as I prefer that to the deprecated comma-separated format, though that might not be 100% accepted by browsers at this time). I decided to keep the check on alpha as only !== undefined and not to ignore 1. It's the low risk choice. I don't even think I need the alpha at all in my use case, but it's certainly worth putting in the example above.

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.

[LeaVerou]

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 rgb() function supports percentages just fine — e.g. rgb(0% 50% 100%) is a perfectly valid color.
That said, the srgb color space parses colors specified using this range + rgb() just fine. You just can't specify them with an array.

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 rgb() and hex to that color space by removing it from the formats of the sRGB color space and adding it there — since no property is private you can do whatever :D You don't need to specify them again, you can just write code that copies them at runtime (I haven't tested this, but don't see why it wouldn't work). That way you get any updates to them as well.

[sidewayss]

There is literally no reason to use it

There may be no reason to use it but the browsers use it internally in element.style and getComputedStyle(), restricting and rounding the values to ints. They convert HSL and HWB to integer rgba(), the deprecated version of the function. As far as the browsers are concerned RGB appears to still be restricted to 8 bit. I followed their lead. I did mention above that the integer format for serialization was not critical, but once I got started I got hooked figuring it out - and we did!

As I stated above, this works great for me. It normalizes everything to CSS except one thing: the srgb space still uses the rgb() function instead of using color(srgb). That is the one exception I still need to handle in my code, and it's only to inform the user of the CSS display space vs the requested space if they differ.

I do hope you'll approve my PR #595, as it cleans this up a bit and removes the restriction that custom space formats must parse as well as serialize.