Tag Archives: color

CSS: How to Fill a Div with Gradient Background Color across most Browsers with CSS Programming 07 MAY 2012

Gradient colors are pretty awesome, pretty to look at and a nifty visual effect.

Unfortunately for us though, CSS standards when it comes to handling gradients was pretty lacklustre over the years, resulting in all the major browsers pretty much defining their own browser specific CSS rules to achieve gradient background colors.

The following is a CSS example indicating how to achieve a gradient color which will appear in just about all major browsers. Of course, the only way this works is by defining the browser specific CSS rules for pretty much every available browser rendering kit…

.gradientdiv {
background-color: #57ceaf;
background-image: -webkit-gradient(linear, left top, left bottom, from(#5ec4e5), to(#50d97a));
background-image: -webkit-linear-gradient(top, #5ec4e5, #50d97a);
background-image: -moz-linear-gradient(top, #5ec4e5, #50d97a);
background-image: -o-linear-gradient(top, #5ec4e5, #50d97a);
background-image: -ms-linear-gradient(top, #5ec4e5, #50d97a);
background-image: linear-gradient(top, #5ec4e5, #50d97a);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#5ec4e5', EndColorStr='#50d97a');
}

Nifty.

Ubuntu Server: Enable Nano Syntax Highlighting CodeUnit 27 NOV 2010

Although newer versions of Ubuntu (10.04 and up) already come with the helpful nano syntax highlighting enabled, older versions don’t – though thankfully switching this on is pretty simple to achieve.

To enable nano syntax highlighting for a user, first copy the nanorc file to the users home directory:

cp /etc/nanorc ~/.nanorc

Next, edit the file, scrolling down to the bottom of the file and uncommenting the lines for the languages you wish to turn syntax highlighting on for.

nano ~/.nanorc

Save your changes and fire up nano against a file with a recognised language extension to see the colorful result.

Easy peasy :)

PHP: Random Color Generator Function CodeUnit 20 OCT 2010

Although I’ve posted simple random color generating code snippets before, I’ve noticed since that most of them have a flaw in that they sometimes don’t always produce a proper six character long hex color code.

Hence I have posted my latest random color generating PHP function to these pages in the interest of reminding myself at a later stage when I need it again!

So let’s have a look at the function shall we?

function generateRandomColor(){
    $randomcolor = '#' . strtoupper(dechex(rand(0,10000000)));
    if (strlen($randomcolor) != 7){
        $randomcolor = str_pad($randomcolor, 10, '0', STR_PAD_RIGHT);
        $randomcolor = substr($randomcolor,0,7);
    }
return $randomcolor;
}

Pretty simple really.

Grab a random decimal number, convert it to hex and pad right with some zeroes to ensure the proper character length.

Fairly random and guaranteed to always give you pretty results!

PHP: Convert Web Hex Color Code to RGB Array Programming 18 OCT 2010

green php elephants - elephpantsSometimes you need to RGB array that makes up a color when working in the wonderful world of PHP. Don’t ask me why or when, though that said, I have required it at least once before when setting text color whilst generating PDFs using the FPDF library – so I have at least established that you do sometimes want to do this.

So let’s scribble down a neat little function that will convert a plain old web hex color to its RGB components for us then, shall we?

function convertHexToRGB($hex) {
    $hex = ereg_replace("#", "", $hex);
    $color = array();
    if(strlen($hex) == 3) {
            $color['r'] = hexdec(substr($hex, 0, 1));
            $color['g'] = hexdec(substr($hex, 1, 1));
            $color['b'] = hexdec(substr($hex, 2, 1));
    }
    else if(strlen($hex) == 6) {
            $color['r'] = hexdec(substr($hex, 0, 2));
            $color['g'] = hexdec(substr($hex, 2, 2));
            $color['b'] = hexdec(substr($hex, 4, 2));
    }
    return $color;
}

As you can see, the function does little more than make use of the useful hexdec function, though it neatly deals with hex codes that may or may not come in with the standard # prefix, or in the shorthand three character length instead of the standard six characters.

So now you know.

PHP: Convert a RGB color Array into a Web Hex Code Programming 15 OCT 2010

green php elephants - elephpantsRGB, that annoying little way of expressing a color via values between 0 and 255 for each of the three components that makes up a color. Always in the form of an array consisting of three values, namely one for red, one for green and one for blue, wouldn’t it be nice if we had a simple function that automatically converted such an array to the more universal web hex code? (Well when I say universal I mean developing on the web).

So let’s do that then. The following little function accepts three inputs, namely the red, green and blue values, converts each to the hexadecimal equivalent with the correct padding (remember a correct hex code is six characters long), concatenates them all together and returns a nice # prefix hex code string for us.

function convertRGBToHex($r, $g, $b) {
    $hex = "#";
    $hex.= str_pad(dechex($r), 2, '0', STR_PAD_LEFT);
    $hex.= str_pad(dechex($g), 2, '0', STR_PAD_LEFT);
    $hex.= str_pad(dechex($b), 2, '0', STR_PAD_LEFT);
    return $hex;
}

Simple, clean, and oh so useful (especially when dealing with firefox which seems to enjoy throwing color values as RGB arrays at you!).

OnTime: How to Change the Colors Associated with Features, Defects and Tasks CodeUnit 23 JUL 2010

OnTime from AxoSoft is a powerful project management tool that is indispensable in churning out software development projects on time, thanks to its many built in scrum/agile project management features.

Today’s quick tip shows you how you can set the associated colours for all those various list items that appear under the Features, Defects and Tasks tabs.

Now as you already know, your personal OnTime dashboard is pretty configurable in terms of what you want it to reflect, and thus it comes as no surprise to learn that one can in fact associate a particular color for just about any item type in OnTime.

This means you can color code your lists via background and foreground color combinations, enhancing the overall experience and helping you work through the data at an even faster rate.

So how do we set the colors? Well, if you have the rights to do so, go to the Tools menu, follow the Manage submenu and select the List Types option. This will bring up a dialog with a number of tabs, allowing you to edit, create or remove the different types of status, priority, severity, etc. types that exist on the system.

Clicking on an existing type brings up another dialog and you will notice a checkbox at the bottom which reads “Enable Color”. Check this box and you will now be able to select an associated color using the “Change Color” color control.

Save your changes and exit back to OnTime. Refresh the database and fiddle with the color coding button to set which types get used for background coloring and which get used for foreground coloring.

And that is all there is to it. Nifty.

Dull Colors when Printing on my Canon IP4500 in Ubuntu CodeUnit 29 JUN 2010

Plug and play is a lifesaver in the world of Personal Computing, really it is, but in the same breath it can be quite frustrating when the default settings set aren’t necessarily the optimal settings for your machine! Take my Canon IP4500 printer for example. Ubuntu recognised it effortlessly on plugging it in, and with a few clicks I was already pushing out test page after test page.

However, something was not quite right. The colors were coming out extremely dull, almost shaded grey to the naked eye, not to mention the oranges which were all coming out as a dull brown – in other words, not particularly attractive printing at all!

Anyway, as you can well expect, the root of the color problem lay with the colour model being used to print with. Now most inkjet printers are Cyan, Magenta, Yellow and Black ink printers and thus it makes sense to use the CYMK color model to print to that printer. However, on closer inspection of the default printer settings (found under System -> Administration -> Printing) I noticed that the color model selected was RGB!

So a quick change on the dropdown to the CMYK, a hit on the print test page button, and I was back in business, with a vibrant, bright orange printed Ubuntu Logo sitting in front of me! :)

(Though honestly, you should probably try printing test pages out on all the available color models to see what works best for your printer!)

Convert FireFox Color rgb(xxx,yyy,zzz) to Hex CodeUnit 26 MAY 2010

Firefox has a nasty habit of returning element background colors and colors in general in the format

rgb(xxx,yyy,zzz)

as opposed to the normal

#xxyyzz

hexadecimal format we’ve been accustomed to seeing from the likes of Internet Exlorer and the rest of its browser ilk.

Obviously this can trip up a fair bit of your otherwise nifty jQuery or plain old vanilla Javascript driven color features and as such, is definitely something that generally does have to be dealt with by your code.

Hence the following little useful Javascript function to use on any element color or background-color retrieval call:

//Helper function to convert a digit to a two column Hex representation
function toHex(N) {
	if (N==null) return "00";
	N=parseInt(N); if (N==0 || isNaN(N)) return "00";
	N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
	return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
}

//Function to convert rgb() format values into normal hex values
function RGBtoHEX(str)
{
	if (str.substring(0, 3) == 'rgb') {
		var arr = str.split(",");
		var r = arr[0].replace('rgb(','').trim(), g = arr[1].trim(), b = arr[2].replace(')','').trim();
		var hex = [
			toHex(r),
			toHex(g),
			toHex(b)
		];
		return "#" + hex.join('');				
	}
	else{
		return str;
	}
}

So slapping this into your code would result in you changing your calls to look like this:

alert(RGBtoHEX($('#myelement').css('color')));

As you can see by examining the inside of RGBtoHex, it will only attempt to change the values fed into it in the rgb(xxx,yyy,zzz) format. Values like the one returned by IE (i.e. #06a660) will be returned unharmed!

Nifty and useful in other words!

Excellent jQuery Color Picker Plugin CodeUnit 21 MAY 2010

I stumbled upon this frankly excellent, though unfortunately generically named, jQuery color picker plugin the other day. Color Picker is a jquery plugin developed by Stefan Petre, which simply put, delivers you with a neat little widget that allows a user to select a color the same way you would select a color in a graphics application like say Adobe Photoshop.

It is particularly simple, provides you with a number of configurable options as well as layouts to choose from. Listed as its main features, Color Picker exhibits a great flat mode (in other words can appear as an element in the page), power controls for color selection, easy customization (swapping in and out base images) and can fit nicely in the standard viewport.

It is dual licensed under MIT and GPL in case you were wondering.

Implementing is as simple as including the stylesheet and javascript file in your header and then instantiating the plugin in the usual way:

 $('input').ColorPicker(options);

where the options is a standard hash of optional paramters. These options include:

...