How To Grab A Colour From The Computer Screen

Seen A Nice Colour On A Website?.....
Grab It With ColorCop And Use It!

When designing a website it is not unusual to be left with a scenario whereby you are looking for a certain colour to use for each web page's background (i.e. a musky yellow). After playing around with natural colours you then decide to scour the internet, looking at different websites, clip art, images and so on until you spot the exact colour you want. However. Now you have found the colour you do not know how to get its RGB (Red, Green and Blue) colour value from the screen into the HexDecimal value required by HTML code.

Fortunately this is where a small program called ColorCop can help you. It is a Colour Picker (Selector) and Colour Grabber program that allows you to grab any colour off your computer screen.

It automatically splits your grabbed colour into its RGB (Red, Green and Blue) colour components, and more precisely turns each of those colour components into their respective HexDecimal and Decimal number formats (code values). This means whenever a piece of HTML code requires a RGB colour, in either the HexDecimal or Decimal number format, you will know the code value for that RGB colour.

Fig 1.0  Double click on the COLOR COP desktop shortcut icon to continue

When colorcop is first installed it will open automatically when the installation has completed, but thereafter you need to double click on its desktop shortcut icon to launch (execute) it. When the colorcop window opens you may think it is very small, which it is, but at the same time you should notice that is the beauty of it.

It has the essential tools on it for you to grab a colour off the screen and at the same time is very compact. For example. If you click on the colorcop icon, in the top-left corner of the window, a menu will appear. Clicking the OPTION MENU menu-item then offers you settings for Web Safe colors, HexDecimal number format, Eye-Drop or Cross-Hair cursor, 1x to 16x zoom and so on.

For the meantime though leave the settings as they are set by default, because I will be showing examples of the important settings and features later. In this first example I will show you how to grab a color from the screen.

Fig 1.1  Click on the colorcop ICON

Fig 1.2  Click on the OPTION MENU menu-item

Fig 1.3  Hover over the COLOR sub-menu and select SNAP TO WEBSAFE

Begin by clicking on the Eye-Drop pointer but do not release the click (left mouse button). Keep the left mouse button pressed (held down) and then move (drag) the mouse pointer over to the area of the screen where the colour you want is. As you drag the mouse pointer it changes into the eye-drop pointer.

When you have got the eye-drop pointer over your desired part of the screen, and more precisely over the colour you want, release the left mouse button. The mouse pointer will then change back into its normal pointer and colorcop will display the RGB colour values in both HexDecimal and Decimal number format, which is ideal for HTML code.

In this example I dragged the eye-drop pointer over to the colorcop desktop shortcut icon and then released the left mouse button when I was over a green square.

Fig 1.4  Click on the Eye-Drop Pointer.....

Fig 1.5  .....and move (drag) it over to.....

Fig 1.6  Hover over the COLOR sub-menu and select SNAP TO WEBSAFE

Although the above works with the small desktop shortcut icon of ColorCop the same grabbing technique applies to any part of the desktop screen. For example. If you have a web page on display and wanted its blue background colour for example you would simply drag the eye-drop pointer over to that web page's background and hover over the blue.

MAGNIFYING  THE  SCREEN  AREA

If you are trying to get a specific colour from a detailed image (i.e. a photograph) but find its surrounding colours are too close together to be able to pick the colour you want, you can always try using colorcop's magnifier to zoom into the detail. It ranges from 1x zoom up to 16x zoom. Here is how you use it.

To the right-hand-side of the magnifier you will see a PLUS [+] sign and a MINUS [-] sign. Click on the [+] sign to increase the zoom and click on the [-] sign to decrease the zoom. In this example I have increased it to 16x zoom.

Fig 1.7  Click on the [+] sign to increase the zoom to 16x

After changing the zoom click on the magnifier itself but do not release the click (left mouse button). Keep the left mouse button pressed (held down) and then move (drag) the mouse pointer over to the area of the screen you want magnifying (Fig 1.8 below). As you drag the mouse pointer it changes into the magnifier pointer.

When you have got the magnifier pointer over your desired part of the screen, and more precisely over the colour area you want (Fig 1.9), release the left mouse button. The mouse pointer will then change back into its normal pointer and colorcop will keep the magnified area inside its preview pane (Fig 1.10).

When you hover over the magnified area, inside the preview pane, the mouse pointer will change into the cross-hair + pointer so that you can grab (select) a colour. Simply click on the colour you want and colorcop will display the RGB colour values of that colour in both HexDecimal and Decimal number formats. In this example I magnified the ColorCop desktop shortcut icon, zoomed in on the preview pane and then selected the brown-ish colour with the mouse (cross-hair) pointer (Fig 1.10).

Fig 1.8  Move (drag) the magnifier over to.....

Fig 1.9  ...the colour area of the screen you require.

Fig 1.10  .....and then click on the colour you want.

Although the above works with the ColorCop desktop shortcut icon the same magnifying/grabbing technique applies to any part of the desktop screen. For example. If you have a photograph on display, perhaps inside a web page, and need to zoom into a specific colour you would simply drag the magnifier pointer over to that web page photograph, zoom into the preview pane and then use the mouse (cross-hair) pointer to grab (select) the colour you want.

INTERPRETING  THE  COLOUR  VALUES

So now you have a RGB colour value, on the left of the colorcop window, how do you use it? For example. The brown-ish colour from the above example has a Red value of 166, a Green value of 138 and a Blue value of 0. In HexDecimal number format this means Red is A6, Green is 8A and Blue is 00. The common way to use a colour value is in HexDecimal format, but as this is more for the programmer HTML provides a Decimal RGB() function (command/instruction) for you to use. Before I show you examples of that I will first explain, briefly, the number formats.

Computers use a number format called BINARY that consists of 0 BITS (Binary Digits) and 1 BITS (Binary Digits). A 0 bit represents OFF and a 1 bit represents ON. One BYTE (one character) is made up of 8 BITS to give it its total value. For example. 00000000 has the value of 0 (zero) whereas 11111111 has the value of 255. And 10000000 has the value of 128. How would you know that? Answer. Because you would be familiar with the human values that are assigned to each BIT. Bits go from right to left in the programming world, therefore the 1 in 10000000 is bit 7 and the 1 in 00000001 is bit 0.

Fig 1.11  Diagram of the BINARY numbering system with DECIMAL (Human) Values

Fig 1.11 above shows that when all 8 Bits (binary digits 7 to 0) of a number (BYTE) are switched off (set to 0) their decimal (human) bits are assigned a value of zero; and when all 8 Bits of a number (BYTE) are switched on (set to 1) their decimal (human) values are assigned a value of one.

This means when you see Binary 11111111 you have to add up the assigned decimal values to give a decimal total of 255. That is: 128 (bit 7) + 64 (bit 6) + 32 (bit 5) + 16 (bit 4) + 8 (bit 3) + 4 (bit 2) + 2 (bit 1) + 1 (bit 0) = 255. So in the third example you have Binary 10011101 which is 128 (bit 7) + 0 (bit 6) + 0 (bit 5) + 16 (bit 4) + 8 (bit 3) + 4 (bit 2) + 0 (bit 1) + 1 (bit 0) = 157.

Fig 1.12  Diagram of the HEX-DECIMAL numbering system (0 to F) with DECIMAL (Human) Values

When you have grabbed a colour, or picked a colour from ColorCop's predefined colours, you can still alter that colour's Red, Green and Blue values by editing the values inside the R, G and B edit boxes or by editing the Hex value inside the HEX edit box. Alternatively. Click on the CUSTOM button to pick/edit a colour from scratch. Either way, when you have your colour value you can use it in a HTML color Attribute.

Although html color attributes allow colour values in hex format (i.e. #FF4ED6, #ff4ed6 or #fF3eD6) and in decimal format using the rgb() function (i.e. 255,78,214), I would not recommend using the rgb() function; simply because not all web browsers support (execute) it. They all support the hex format though, that is always prefixed with a hash (#) sign. For example. "font" is a html Tag (instructions) with the attribute (setting) color.

So you could use "font color=#ff4ed6"or "font color=rgb(255,78,214)"but as said, not all web browsers will support the rgb() function. Another example is the html tag "body" that uses the bgcolor attribute. Although you could use "bgcolor=rgb(255,78,214)" it is better to use "body bgcolor="#ff4ed6".

A part from using a hex formatted colour value you can also use a specific colour by name, such as "font color=red", "font color=blue"and so on. This is because certain colour values have been given common names. For example. Hex #FFFFFF is known as white. Hex #000000 is known as black. Hex #FF0000 is known as red. And hex #FFFF00 is known as yellow.

For a more complete list search the internet for HTML COLORS or HTML COLOR NAMES. Here is an official list. W3Schools - HTML COLOR NAMES. As they suggest on that web page, always use the hex format for a colour and not the name format if you want your html code validated (to be 100% valid).

WHAT  ABOUT  WEBSAFE  COLOURS?

In the early years of 8 Bit computers and monitor screens only a maximum of 256 different colours were supported, because 8 bits can only produce values of 0 - 255 (thus 256 colours). As a result 216 of those colours were designated as cross-platform "Web Browser Safe" colours, meaning they could displayed the same on different computers and in different web browsers.

The other 40 colours were designated as "Fixed System" colors because they were not cross-platform, meaning they would display differently on different computers and web browsers. So the 216 color palette was created to ensure that all computers and web browsers would display the same colors correctly when running in 256 color palette mode.

These "Web Browser Safe" colours do not matter now because computers/technologies have moved on from using 256 colours (8 bits) to using 16 Million colours (32 bits).....with 64 Bit computers/technologies out there as well. So basically, all computers and web browsers these days will display red (hex #ff0000) as red (hex #ff0000), blue (hex #0000ff) as blue (hex #0000ff) and so on.

Should you use "Web Browser Safe", 216 colours, then? Well. If you want your website to look good on a Palm Phone or something else that is using 8 bits or less and/or you are satisfied with the standard 216 "Web Browser Safe" colours, which consist of many basic colours, then I would say use them.

Otherwise. If you want more colour in your website design, and/or have visitors from the Windows market only that use Internet Explorer only for example, then ignore the "Web Browser Safe" colours. Saying this. The point just made about "Web Browser Safe" colours using many of the basic colours is a good point.....even if I did say so myself!

You can test "Web Browser Safe" colours using colorcop by selecting the SNAP TO WEBSAFE menu-item (Figures 1.3 above). Here is an example of the same colour without and with "Web Browser Safe" (SNAP TO WEBSAFE) colouring.

Fig 1.13  Not using "Web Browser Safe" colours

Fig 1.14  Using "Web Browser Safe" colours

As you can see; The blue is more of a green when using "Web Browser Safe" colouring (when SNAP TO WEBSAFE is switched on). With basic colours though, regardless of "Web Browser Safe" (SNAP TO WEBSAFE) colouring being used or not, Red (rgb 255,0,0) is Red (rgb 255,0,0), Blue (rgb 0,0,255) is Blue (rgb 0,0,255) and so on.

CREATE  A  CUSTOM  COLOUR

The last thing to show you is the Custom Colour Palette. If you click on the CUSTOM button in the center of ColorCop's window (Fig 1.15 below) the Color palette window will appear. It allows you to create a customized colour in one of five ways.

1) Enter your red, green and blue colour values into the respective R, G and B edit boxes. 2) Enter your hue, saturation and luminance values into the respective H, S and L edit boxes. 3) Click on a predefined BASIC colour and then change its red, green and/or blue colour values if need be. 4) Drag the CROSS/TARGET CURSOR in the Colour Array window pane around and then change its red, green and/or blue colour values if need be. And 5) Move the COLOUR SLIDER on the right-side of the window Up/Down and then change its red, green and/or blue colour values if need be.

When you have finished editing/customizing your colour click on the ADD TO CUSTOM COLORS button to continue.

Fig 1.15  Click on the CUSTOM button to continue




Fig 1.16  Click on the ADD TO CUSTOM COLORS button to create a customized colour

Clicking on the ADD TO CUSTOM COLORS button will place your customized colour inside the first (top-left) Custom Colors box, currently pink, upon first use of the palette. If you want to place your colour inside another one of the 16 boxes always click inside that box first, before editing your colour. Otherwise, editing your colour first and then selecting box 12 for example will result in your colour becoming White, because it will have taken the colour of box 12 (White). This would mean you have to edit your colour again. So always select a box first.

Fig 1.17  Absolute Color Picker - A Great alternative to ColorCop

There are other colour pickers/grabbers out there that offer more features than ColorCop but I use, and recommend, ColorCop for its simplicity.

Similar to colorcop is Color Mania. And another great colour picker/grabber is Absolute Color Picker, but unfortunately it currently does not work with Windows 7 (which is a shame).