#58 new
Juriy Zaytsev

getStyle should parse colors

Reported by Juriy Zaytsev | September 29th, 2009 @ 11:14 AM

Comments and changes to this ticket

  • John-David Dalton

    John-David Dalton September 12th, 2010 @ 01:11 AM

    • Milestone cleared.
    • Milestone order changed from “0” to “0”

    The snippet you link to no longer exists. Could you please repost.

  • Joe Gornick

    Joe Gornick October 6th, 2010 @ 05:16 PM

    • Assigned user changed from “John-David Dalton” to “Joe Gornick”
    • Milestone order changed from “6” to “0”
  • Joe Gornick

    Joe Gornick October 8th, 2010 @ 01:09 AM

    • 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])


  • Radoslav Stankov

    Radoslav Stankov October 8th, 2010 @ 05:17 AM

    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.

  • Joe Gornick

    Joe Gornick October 8th, 2010 @ 12:48 PM

    From minimal testing, getComputedStyle will automatically convert all values to rbg/rgba as a string.

  • Juriy Zaytsev

    Juriy Zaytsev October 13th, 2010 @ 12:39 PM

    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)"
  • Nick Stakenburg

    Nick Stakenburg October 16th, 2010 @ 10:44 AM

    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
  • Joe Gornick

    Joe Gornick February 21st, 2011 @ 05:08 PM

    • State changed from “open” to “new”

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.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

JavaScript frameworks share similar features and functionality such as DOM manipulation, event registration, and CSS selector engines. FuseJS attempts to incorporate the strengths of these frameworks into one stable, efficient, and optimized core JavaScript framework.