theme makers guide to colour options - hex values or rgb(a)?

or - how to make nice opacities and gradients on your theme…

( honestly, they can be lovely i’m just not good at picking colours… O_O )

read on for the tutorial…

when making themes, most theme makers will use hex colours - the 6 digit alphanumeric code that corresponds to a colour, usually prefixed with a ‘#’…e.g. #ffffff = white, #000000 = black, #ff0000 = red, #0000ff =blue, #33cc33 = green etc.

these are also the colours you see in tumblrs basic editor when you’re editing a theme. 

however…

in some themes, you might see rgb or rgb(a) values instead – so why use them?

rgb ( red, green, blue ) values will produce exactly the same colours as hex values - for example;

#000000 = rgb(0,0,0,)
#ffffff = rgb(255,255,255,)
#ff0000 = rgb(255,0,0)

if you want to know what rgba matches to what hex value, you can use something like - colorpicker.com.

at this point, rgb values seem a little more complicated - but there is an advantage to using them - if you add in another value - rgba - then you can bring in opacity!

for example;

this theme has an rgba background for the posts - 

.post {
   padding:20px;
   width: 400px;
   background-color: rgba(0, 0, 0, 0.7);
   background: rgba(0, 0, 0, 0.7);}

the rgb is ‘0′ (black) and the ‘a’ is ‘0.7′ meaning an opacity of 0.7 (so if you have a background then it will be partially visible through the background, but your posts should be easily readable. ) - if you’d tried to do this with a hex value, there’s no way to lower the background opacity without lowering the entire post opacity ( including the text ) making it harder to read ( unless you want to code in a whole ton of extra styling blocks :\ )!

what you can also do with rgba colours - is to include a gradient.  like so- 

yes, i know it’s a bit eyewatering, because i chose rather vibrant colours, but you can mix and match to your hearts content - you can also change the angle of the gradient.  the example above is a -45 degree gradient ( top left corner to bottom right corner )

here’s a left to right gradient - 

(no my colour choices do not get any better)…

and here’s the code…

background: -moz-linear-gradient(left, rgba(125,240,48,1) 0%, rgba(181,13,181,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(125,240,48,1)), color-stop(100%, rgba(181,13,181,1)));
background: -webkit-linear-gradient(left, rgba(125,240,48,1) 0%, rgba(181,13,181,1) 100%);
background: -o-linear-gradient(left, rgba(125,240,48,1) 0%, rgba(181,13,181,1) 100%);
background: -ms-linear-gradient(left, rgba(125,240,48,1) 0%, rgba(181,13,181,1) 100%);
background: linear-gradient(to right, rgba(125,240,48,1) 0%, rgba(181,13,181,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#7df030’, endColorstr=’#b50db5’, GradientType=1 );

holy shit!?  that’s a lot of code… O_O  – and yes, you need all of it, for cross browser compatibility. ( and you can tweak the opacity on the generator or manually in your code by just altering the last number in the rgba - anything from ‘0′ ( invisible ) to ‘1′ ( visible with no opacity )). 

however, don’t worry - you don’t need to work it all out on your own!  there are handy dandy generators out there that you can use, and then all you need to do is copy and paste into your theme!  you can use this for post backgrounds, theme backgrounds, or any other element you like…

here are a couple of generators that are v nice - ( and if you google, you can find a ton more )

gradient generator
gradient generator

so next time you’re designing a theme, consider trying out an rgba colour scheme!

love from,
octomoosey :3