I was playing around with a new project recently and wanted to figure out the complementary color of a given color. All you need for this are the RGB values of the color for which you want to find the complement.
There are lots of ways of specifying a color on the Open Web:
And it’s not just the 17 CSS color names, there are 147 cool-sounding extended color names like papayawhip. So given that a user can input a color in all sorts of ways, what’s the right way to do this?
The Hard Way
The DOM Way
It turns out there is. It’s called the CSS DOM and I always seem to forget about this document. Piecing together information from the SVG DOM and the CSS DOM, this is how you would get the red value of a fill attribute on a circle:
var red = someCircle.getPresentationAttribute("fill").rgbColor.red.getFloatValue(1);
That’s just a bit perverse, but at least it’s possible.
In testing this I was delighted to discover that Opera and WebKit let me do it. Sadly, Firefox does not.
The Best-Laid Plans…
Here’s where the plot thickens. Seems like the CSS Working Group was chartered to produce a new version of the CSS DOM to make the interfaces less clunky. Seems like the CSS WG sent out a notice strongly warning browsers not to implement certain DOM interfaces in the CSS DOM. Seems like it’s six years later and there’s no new document.
Unfortunately this is where my sad little tale ends. Erik of Opera suggests that the SVGT 1.2 uDOM is really the right way to do this. It doesn’t matter that I agree with him because I don’t think Webkit or Mozilla have any interest in implementing this any time soon.