Currently written in a non-prototypal form, but could easily be changed if necessary. Also bear in mind, it's a quickly thrown together class intended for pretty simple (and pointless) purposes. Used like so:
Creating Colors:
PHP Code:
// create colors using RGB values:
var color = new Color(r, g, b);
// or using CSS string in RGB, #, or HSL format.
// color *names* like red, yellow, and pumpkinish-orange are not mapped
var color = new Color(cssString);
// these all work as expected
var red = new Color(255,0,0);
var green = new Color("#00ff00");
var blue = new Color("hsl(240,100%,50%)");
var yellow = new Color("rgb(255,255,0)");
Playing with colors:
PHP Code:
// you can blend two colors. the *pct* parameter determines how much
// of the resulting color is taken from the *added_color*.
// ** NOTE: this will blend colors in a manner that artists are more
// accustomed to. thus:
var red = new Color(255,0,0);
var yellow = new Color(255,255,0);
var orange = red.getBlendedColor(yellow, 0.5);
var red_orange = red.getBlendedColor(yellow, 0.3);
// and NOT what a programmer might expect:
var red = new Color(255,0,0);
var green = new Color(0,255,0);
var not_yellow = red.getBlendedColor(green, 0.5);
not_yellow.toRGBString(); // yields "rgb(128,128,0)"
Getting color strings out of your Color class:
PHP Code:
// toString() is overridden to provide a CSS hex string
document.getElementById('something').style.color = color.toString();
// but, you can also summon up the corresponding RGB and HSL strings
// if it makes you happy -- or directly call for the HEX
color.toRGBString();
color.toHSLString();
Oh, and because toString() called by default in String contexts, you should actually be able to avoid explicitly calling it out, if you wish, when you assign it to a CSS value. In other words, this should work:
PHP Code:
var red = new Color(200,0,0);
document.body.style.background = red;
And if you get confused and forget that red is already defined as a color, instead thinking you defined it as a CSS string, this should still work:
PHP Code:
var red_again = new Color(red);
red_again.toRGBString(); // yields "rgb(200,0,0)"
Well, there's at least one important thing I've learned:
The existing conversion formulas from RGB2HSL and v.v are not to be used in professional work.
The error margins are to wide for that!
Well, there's at least one important thing I've learned:
The existing conversion formulas from RGB2HSL and v.v are not to be used in professional work.
The error margins are to wide for that!
Well, sort of. On the other hand, these notations theoretically originated out of a need in a professional setting, not from hobbyists with nothing better to do. So, despite having no perfect conversion formula, they're still going to be used in professional settings.
And it's pretty widely known that color format conversions are imperfect. Even going from display format (RGB) to print format (CMY/RYB) is inaccurate.
but not the conversion process.
professionals refuse to convert their sRGB source to HSL, HSV or similar they even try to avoid re-compression as much as possible.
And in fact to me (speaking as a human) RGB color space is very strait forward and I can write rgb colors almost by hart and have no difficulties in understanding which color needs increase or decrease to get the exact nuance I'm going after. Something I was never comfortable doing in hsl.
but when printing there are calibration procedures involved and we are all aware that light and print are completely different mediums.
but not the conversion process.
professionals refuse to convert their sRGB source to HSL, HSV or similar they even try to avoid re-compression as much as possible.
And in fact to me (speaking as a human) RGB color space is very strait forward and I can write rgb colors almost by hart and have no difficulties in understanding which color needs increase or decrease to get the exact nuance I'm going after. Something I was never comfortable doing in hsl.
but when printing there are calibration procedures involved and we are all aware that light and print are completely different mediums.
CS pros certainly tend towards RGB. Though HSL, as I understand it, is designed to make color selection more intuitive for the graphics pros. And I must admit, finding a color with an HSL tool like Mr Initial Man's is much simpler and more intuitive than trying to zero in on the RGB values, even having used RGB for 13+ years.
Also notable, HSL corresponds directly to the actual color spectrum. RGB doesn't correspond directly to anything. The conversions that RGB vectors undergo prior to being displayed are ironically much more magical and impure than the conversion from [anything] to RGB. The RGB components in data aren't similarly proportional to the RGB pixel intensities on screen.
And that's the reason you had to type sRGB instead of just RGB. The "pure" RGB values are mapped to the latest set of tables and curves agreed upon by most computer hardware and software vendors. First comes the definition of the gamut, followed by the physical translation of component values into actual intensities, which I'm led to believe is not a linear process.
HSL to RGB is much more natural than that. The conversion is simple geometry. I might even dare to claim that its only real shortcoming is that the resulting RGB vector is pure. So, if you correctly intuit a color in HSL, you may not see what you expected: the "pure" color you get from the conversion is tainted during the conversion for RGB to ... a different RGB.
... Anywho. Yes. RGB should be used for internal color representation. HSL is primarily a representation for color selection.
I was expressing my thought and the lesson I've learned from watching how it is being achived and of course what the practical results are. And that the error margin of this conversion is not acceptable.
I was using the "sRGB" because it is equal to computer monitor range and deeper than that of a normal consumer TV or to be more precise because it is the most widely used Standard today.
(you may skip this) Otherwise from the human point of view (as I'm not a robot either), I think that rgb2hsl is not only inaccurate but that hsl in it self is somewhat dumb.
The dumb part comes as a result of a wrong concept evolved out of the poor understanding of RGB component notions. Since RGB component is a color in itself their numerical scale represents the luma/intensity not some color saturation type of thing. Even when at 0, the R (red) component is fully red "fully saturated".
Rising R doesn't mean you are saturating this channel. Because there is no such thing as saturation. It's a concept and it's a wrong one. In fact all concepts are either arbitrary, subjective or simply wrong.
Cant saturate scalar values. The color of a silver comes from the particular quality of its surface which reflects all three colors at the same intensity. Not that its reflection is "de-saturated". Moreover it's a visual noise. But thankfully it is evenly distributed and perhaps pleasant to watch. Therefore lowering the "saturation" scale, which will be acting on rgb will in fact rise (two other) lower components (of rgb) to the level of the leading one, which consequentially completely disables the H component of the HSL system. The selected angular color will have no effect on the outcome. Rising the "saturation" on the other hand will simply increase the existing diferences [deltas] of the current rgb.
Also the so called luminance is dubious rising the luminosity will cause the rise of intensity of all all three in parallel which conditionally will either introduce clipping (out of gamut) noise [which by the way becomes audible on the reciver (quite loud and irritating)] or if clamped will cause errors : modify the affected/selected color. But the dumbest part of it all is that when rising the L to 100% the color becomes white.
55 is equal to the maximum output of the emitting device. Whereas in real world the intensity of the color is unlimited. It depends on the quanta of photons of the given wavelength reaching your senses.
Or all I'm saying is that the conversion formulas being used have to many passes of rounding errors. And the main problem is the narrowness of only 360 steps for all three colors, in fact of the full color range which makes the conversion precision even harder and approximate. Even though I still believe that there could be a better conversion method waiting to be discovered.
Bookmarks