blog : relative color syntax channel values

[romainmenke]

While reviewing the MDN docs for relative color and reading threads like this one it stands out that it isn't intuitively clear to people what the actual values are behind the channel keywords.

Part of the issue is that the specification has gone through multiple iterations while implementers were shipping.

I think that a visualization of the channel values might help.

This shows:

• the channel keywords that will be available
• the channel values for the origin color (the input color)
• the math expressions per channel (this is just the input params)
• the output channel values of the final color

When you use a known color function with incorrect channel keywords you will get a red outline while still seeing the actual channel keywords that are available.

I keep going back and forth on some style choices like text alignments, so the first screenshots show a slightly older version than what I finally picked

[romainmenke]

🤔 Maybe the ranges (ref 0% and ref 100%) should also be indicated for each channel.
Then you know what the current value is and what the sensible range of mutation is.

[romainmenke]

I've added indicators for the percentage ref ranges.

[Antonio-Laguna]

This is looking great to me! Awesome tool definitely to have handy!

[romainmenke]

Thank you for reviewing 🙇

[argyleink]

this rocks! ty for making it!

[romainmenke]

Thank you Adam 🎉