How to generate old syntax for rgba for CSS?

I’ve noticed that the library is using this syntax:

rgb(65.098% 49.804% 34.902% / 0.997);

Where can I use browser support for this syntax? It seems this is quite new. Can you generate older syntax:

rgba(100, 100, 100, 0.997);

Where can I check browser support for this new syntax? I work for a library that works in IE11 (I know it’s deprecated but I want my library to work for old browsers even IE11).

[LeaVerou]

I’m not sure how others but the way color works on computer it more intuitive to use 0-255 color range than floating point number, what it should to if the color is between two values? what will the output of 0.3333333333% I feel that percentage is confusing that’s why I prefer what system is using.

Not sure why you feel 0-255 is more intuitive, if 0.3333% is hard, why is 84.3333 not hard? Note that the 0-255 are not necessarily integers, exactly because color is not necessarily 8 bit anymore.

BTW: what is that space before the last comma? I also would like to have clean output, it looks like a bug to me.

I just pushed a fix for that in bf36ebc3e3d077e4e13b3d0f0898f35e594a5891.

I am using Typescript and it would not allow to call toString with a format key that maps to an object. Maybe I was doing something wrong.

Typescript support is still somewhat beta, it was just added in #221. I just pushed a fix for this in d0ab5d1fe61e43f37386f7634a0cc4aee15e2302, @MysteryBlokHed @jgerigmeyer hope I did it right.

It would be very nice with such a format shorthand.

I just pushed it in 667c19a60d5a6c8c81e9d07bd217ebda385a10b2 ! Feel free to try it out and let me know what you think! Docs still TBD, would be lovely if someone wanted to help out with that.

[LeaVerou]

It’s confusing because documentation hides all information except function signatures, and you need to uncheck the checkboxes to see the actual documentation. Clicking on signature just add hash to URL.

Yeah, we should probably remove those docs. They are also wildly out of date.

This does not seem to yield the desired result on my side:

What is the desired result? It does have commas, and it is rgba() so it’s doing everything you asked it to?

I have the same issue I would like to have numerical value not percentage, but it works.

Percentages are generally better as it’s a representation that is not designed after 8bit implementation constraints. But you can get numbers, it’s just a little more involved:

let lv_magenta = new Color("#ff006688");

// Custom functional format:
lv_magenta.toString({format: {
	name: "rgba",
	commas: true,
	coords: [
		"<number>[0, 255]",
		"<number>[0, 255]",
		"<number>[0, 255]",
	]
}}) // 'rgba(255, 0, 102 , 0.5333)'

or, to reuse the format:

let lv_magenta = new Color("#ff006688");
let rgba_number = {
	name: "rgba",
	commas: true,
	coords: [
		"<number>[0, 255]",
		"<number>[0, 255]",
		"<number>[0, 255]",
	]
};
lv_magenta.toString({format: rgba_number}) // 'rgba(255, 0, 102 , 0.5333)'

We should probably add a shortcut so you can just do format: "rgba-number", I’m just not sure what the use cases are. Why do you need 0-255 numbers?

I only wonder in how many browsers.

All browsers support percentages in rgb() since CSS 1 and in rgba() since rgba() existed…