getStyle should parse colors

Activity

John-David Dalton
- Milestone cleared.
- Milestone order changed from 0 to 0
The snippet you link to no longer exists. Could you please repost.

September 12th, 2010 @ 01:11 AM
Joe Gornick
- Assigned user changed from John-David Dalton to Joe Gornick
- Milestone order changed from 6 to 0
October 6th, 2010 @ 05:16 PM
Joe Gornick
- State changed from new to open
The idea of parsing colors means we always want to return a standard color format. We've talked about standardizing on HEX, however, with the addition of specify alpha using rgba or hsla, this may not be the best approach.

Maybe we standardize on always returning rgb and rgba values. If we head down this path, we could also provide helper methods to convert to HEX and when it's an RGBA value, maybe return an object with a color and alpha properties?

Our setStyle method might also be able to recognize when a browser does not support the rgba or hsla syntax and convert those values to HEX and also update the opacity level on the element?

I do realize that when using rgba or hsla doesn't actually affect the opacity value of the element, but when older browsers don't support this syntax, we could cheat and use opacity?

Here are some steps I think we will need to do:

Convert #RGB -> #RRGGBB
#FFF -> #FFFFFF

Convert RGB/RGBA
rgb[a](number, number, number[, alphavalue])

rgb[a](percent, percent, percent[, alphavalue])

Convert HSL/HSLA
hsl[a](number, percent, percent[, alphavalue])

Thoughts?

October 8th, 2010 @ 01:09 AM
Radoslav Stankov
I would suggest some sort of special color object, with all convert methods on it. This object should behave like string or something like it.

October 8th, 2010 @ 05:17 AM
Joe Gornick
From minimal testing, getComputedStyle will automatically convert all values to rbg/rgba as a string.

October 8th, 2010 @ 12:48 PM
Juriy Zaytsev
Special color object is a good idea.

I use something similar in fabric.js (http://github.com/kangax/fabric.js/blob/gh-pages/src/color.class.js) — fabric.Color constructor, which exposes instance methods like toRgb, toRgba, toHex, etc. Constructor itself can also parse different formats, which makes it easy to:
```
var myColor = new fabric.Color('#ff5555');
myColor.toRgb(); // "rgb(255,85,85)"
myColor.toRgba(); // "rgba(255,85,85,1)"

myColor.setAlpha(0.2).toRgba(); // "rgba(255,85,85,0.2)"
```
It's also easy to do things like overlay, or convert color to graycale:
```
myColor.overlayWith('rgb(0,0,0)').toRgb(); // "rgb(64,22,22)"
new fabric.Color('#ff5555').toGrayscale().toRgb(); // "rgb(136,136,136)"
```
October 13th, 2010 @ 12:39 PM

That's pretty cool. Maybe it could also support HSB(a), HSL(a).

var myColor = new Color('#ff0000');
myColor.toHsb(); // 'hsb(0%, 100%, 50%)'
myColor.deSaturate().toHsb(); // 'hsb(0%, 0%, 50%)'
myColor.setBrightness(.75).toHex(); // '#bfbfbf'

For animation it might also be nice to be able to get a transition between two colors. That would make it easy to animate colors. With support for HSB you could even animate only the brightness or saturation for example. But maybe the transition part is better left to some fx library.

var fromColor = new Color('#bfbfbf'),
    toColor   = new Color('hsb(160°, 0.4, 0.25)');

var currentHex = fromColor.getHexTransition(toColor, .5); // '#778066'
// or
fromColor.getTransition(toColor, .5).toHex(); // '#778066', same thing

October 16th, 2010 @ 10:44 AM

Joe Gornick
- State changed from open to new
February 21st, 2011 @ 05:08 PM

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.