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.
Begin by downloading ColorCop 5.4.3. Currently 5.4.3 is the latest version. It is normally in zip file format but can also be in .exe (executable) file format. Once downloaded double click on the colorcop-setup.exe file to install it. The installation process if very straight forward, nothing complex.
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.
Binary 10000001 would be 129 and Binary 00110011 would be 51. Therefore A BYTE (one number/one character) can only have a decimal total between 0 and 255,
which in turn means each colour (red, green and blue) can only have a decimal value between 0 and 255. Or put another way. A binary value between 00000000
and 11111111.
Hex-Decimal, or Hex as it is preferred, uses a different number format to decimal. It counts in steps of 16 and uses 0 - 9 and then A - F as its base.
So decimals 0 - 9 are hex 0 to 9 but then decimals 10 - 15 are hex A to F, as follows: 10 (0A), 11 (0B), 12 (0C), 13 (0D), 14 (OE) and 15 (0F).
Decimal numbers 16 - 31 are hex 10 to 1F and decimal numbers 32 - 47 are hex 20 to 2F. So the pattern for the last hex digit in each row of 16 numbers is
a range between 0 and F. Each time you start a new set of 16 numbers the last hex digit of the first hex number will be 0. The last hex digit of the
second hex number will be 1. And so on until you reach the sixteenth hex number whose last hex digit will end with a F. See the following diagram.
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 <body 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).