#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    4
    Rep Power
    0

    Cool Predefined colors with RGBA?


    I use mostly use predefined colors in my CSS for simplicity, eg black, white, red.
    I now want to start using RGBA, but something 'obvious' like this doesn't work: color: rgba( white, 0.5 )
    Does this mean I have to go back to using hex or decimal?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    933
    Rep Power
    279
    To my knowledge, RGBA use decimal representation of each color (red, green, blue), so, you can't even use hexadecimal..it must be decimal.
    where each color is represented by a number between 0 [black] to 255 [white].
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    The opacity property will let you keep defining colors the way you are used to, and still have control over transparency.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    67
    Rep Power
    0
    rgba takes numerical values for the first 3 parameters and a decimal value for the 4th parameter which is the opacity.

    There are lots of online tools to great rgba values for you from hex. I think photoshop has this sort of thing built in too.
    http://kawaii-nation.com (^._.^)ノ
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    933
    Rep Power
    279
    Originally Posted by someGuyGatsby
    rgba takes numerical values for the first 3 parameters and a decimal value for the 4th parameter which is the opacity.
    My use of the word "decimal" (in this case) is defined as a "base10" number... not as a number with a decimal place in it.

    Just as hexadecimal is defined as a "base16" number ( or in its case an alphanumeric symbol from zero to F).

    Comments on this post

    • someGuyGatsby agrees : Fair enough, my bad.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    4
    Rep Power
    0
    Thanks guys.
    I knew the standard syntax, just hoping someone knew of a clever way that wasn't documented.
    Looks like color names can't be used with transparency.
    The way I invented in my question would have been a great way to do it I think.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    933
    Rep Power
    279
    LindaJeanne already mentioned the use of the opacity CSS property by itself to allow you to continue your usage of color "words" instead of the hex and rgb-decimal variants.

    I found this article that may help with setting up separate opacity CSS usage.
    http://css-tricks.com/css-transparen...-all-broswers/
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    4
    Rep Power
    0
    Originally Posted by DonR
    LindaJeanne already mentioned the use of the opacity CSS property by itself to allow you to continue your usage of color "words" instead of the hex and rgb-decimal variants.
    Oh... thanks LindaJeanne - for some reason I missed reading your reply
  16. #9
  17. Wiser? Not exactly.
    Devshed God 1st Plane (5500 - 5999 posts)

    Join Date
    May 2001
    Location
    Bonita Springs, FL
    Posts
    5,955
    Rep Power
    4037
    Whether using the opacity property is a viable option depends on what you need. The problem with using opacity: vs rgba is you also make the content less opaque. For example:
    http://jsfiddle.net/dBXqU/1/
    Code:
    <div id="container">
        <div id="left"><p>This is the left side</p></div>
        <div id="right"><p>This is the right side</p></div>
    </div>
    Code:
    #container { background: red; width: 500px; height: 100px;}
    
    #left { width: 240px; float: left; height: 100px; }
    #right { width: 240px; float: right; height: 100px; }
    
    
    #left { 
        background: blue;
        opacity: .5;
    }
    
    #right {
        background: rgba(0, 0, 255, .5);
    }
    The text on the left is barely readable due to the opacity effect, where as on the right it is still easily readable.

    Basically, if you want the effect of rgba, you should use rgba.
    Recycle your old CD's, don't just trash them



    If I helped you out, show some love with some reputation, or tip with Bitcoins to 1N645HfYf63UbcvxajLKiSKpYHAq2Zxud
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    4
    Rep Power
    0
    Thanks for the example kicken!

IMN logo majestic logo threadwatch logo seochat tools logo