Converting colours RGB & Hexadecimal
Using Color Cop FREE software
February 2006
Contents
Introduction............................................................................................................................................................. 2
What are pixels? ...................................................................................................................................... 2
Why use a colour converter? ................................................................................................................. 2
What is Hexadecimal Code?.................................................................................................................. 2
What is RGB?.......................................................................................................................................... 3
What are web safe colours? ................................................................................................................... 3
Installing Color Cop ............................................................................................................................................... 4
Using the eyedropper tool ..................................................................................................................................... 5
Matching RGB with Hexadecimal code/vice versa........................................................................................... 6
Using Web Safe colours......................................................................................................................... 6
Using the magnifier tool ........................................................................................................................................ 7
(i) Contents
Introduction
There are quite a few tools for converting hexadecimal code to RGB and vice versa, but Color Cop is
FREE software and has several other useful attributes included in the program such as an eyedropper
that can be dragged to other areas of the screen and a magnifier tool to magnify the pixels in the image.
Note: This booklet is best viewed on screen or printed to colour.
What are pixels?
This is a complex subject
which is beyond the level of
this document, but suffice it to
say that each colour displayed
on a monitor is made up of
many small picture (pix)
elements (el). In many
contexts, they are reproduced
as dots or squares and can be
visibly distinct when not fine
enough.
The intensity of each pixel is
variable; in color systems, each
pixel has typically three or four
dimensions of variability such
as Red, Green and Blue, or
Cyan, Magenta, Yellow and Black. The more pixels used to represent an image, the closer the result
can resemble the original. In computer programming, an image composed of pixels is known as a
bitmapped image or a raster image. More information from http://en.wikipedia.org/wiki/Pixel
Note: The human eye is unable to detect more than 7,000,000 colours.
Why use a colour converter?
You may wish to match colours from a program that only uses the RGB (red, green and blue) colour
palette, such as PowerPoint or Word, with colours in a program that only uses hexadecimal coded
colours, such as Dreamweaver or other web-related programs. For more information
http://en.wikipedia.org/wiki/Web_colors#Converting_RGB_to_hexadecimal.
What is Hexadecimal Code?
An example of a colour expressed in hexadecimal code would be #FFCC66 (pale orange).
Hexadecimal describes a base-16 number system. That is, it describes a numbering system containing
16 sequential numbers as base units (including 0) before adding a new position for the next number.
The hexadecimal numbers are 0-9 and then use the letters A-F. For more information
http://whatis.techtarget.com/definition/0,,sid9_gci212247,00.html
2 Installing Color Cop
What is RGB?
An example of a colour expressed in the RGB colour palette is R:255 G:204 B:102 (pale orange).
Red, Green, and Blue. The three colours of light which can be mixed to produce any other colour.
Coloured images are often stored as a sequence of RGB triplets or as separate red, green and blue
overlays. These colours correspond to the three “guns” in a colour cathode ray tube and to the colour
receptors in the human eye.
What are web safe colours?
Web safe colours have RGB decimal values, which are multiples of 51 or zero. (0, 51, 102, 153, 204,
and 255). It is not thought that using web safe colours is of the same importance nowadays as it was a
few years ago when using the older-style monitors. View web safe colours displayed in both
Hexadecimal and RGB http://www.websitetips.com/color/colourchart.html.
Colours displayed on computer monitors will vary considerably from monitor to monitor depending on
many factors, but web safe colours remove an element of uncertainty by using colours that can be
displayed by the average monitor. These colours do not lend themselves to as many different possible
hues as non web safe colours. For more information go to
http://www.motive.co.nz/glossary/websafe.php
Note: It is now thought that only 22 colours out of the total 216 recommended web safe colours are truly web safe.
3 Installing Color Cop
Installing Color Cop
Depending on your Security levels and whether you are logged on as Administrator you can download
this program from http://www.prall.net
Note: You can also download this program within WTS and run it on the N:\ drive
Installation using Option 1:
You may see the following statement in your browser:
“To help protect your security, Internet Explorer blocked this site from downloading files to
your computer. Click here for options…” right click on this statement and select “Allow”
You have a choice of 2 options:
Option 1: Select colorcop-setup.exe and
run the program.
Option 2: Select colorcop.zip and save the
file in order to unpack it later in the
directory you wish to place the program,
i.e. unzip colorcop.zip and follow the
screen prompts but create a new folder
called: colorcop to unzip the program
into.
Note: The second option is recommended
if you wish to save the file within WTS or
if you have pop-ups currently blocked and
do not wish to temporarily unblock them.
You will be required to state where you would
like the program to be saved. It is
recommended that you accept the default.
Installation using Option 2:
Create a short cut on the desktop if you installed the program using Option 2:
Go to the folder you created where the program was unzipped, e.g. colorcop
Right click on the file called: ColorCop.exe
Select: Send to | Desktop (create shortcut)
4 Installing Color Cop
Using the eyedropper tool
Open Color Cop either by clicking on the desktop icon if you installed Color Cop using Option 1 or by
going to the folder where you unzipped the program if you used Option 2.
By default Color Cop will be the top most window
on your screen allowing you to drag the eyedropper
tool to any other window you have open.
Through the use of the eyedropper the lower of the two images below has had the left and right sides
of the canvas extended by 100 pixels using the closest colour match on each side.
The left side filled with R: 172 G: 182 B: 218
The right side filled with R: 092 G: 107 B: 166
If you intended to use one of those colours within, say the background of a web page, Color Cop
would display the hexadecimal equivalent for that colour.
For example
R: 172 G: 182 B: 218 in hexadecimal is: #ACB6DA
R: 092 G: 107 B: 166 in hexadecimal is: #5C6BA6
5 Using the eyedropper tool
Matching RGB with Hexadecimal code/vice versa
The image on the left displays PowerPoint‟s colour palette and the image on the right displays the
hexadecimal and RGB code in the Color Cop FREE conversion program. Whichever way round you
intend to match the hexadecimal or RGB codes you will be able to key-in either into Color Cop.
PowerPoint Color Palette Color Cop conversion
Using Web Safe colours
The image on the left shows a hexadecimal colour #A6B6DA and the image on the right shows the
nearest web safe colour, which is #6699CC.
To select Snap to WebSafe
right click on Color Cop or
click-on: [Ctrl-w]
This is a toggle so you can do
the same to deselect this.
Note: Snap to WebSafe ON/OFF is displayed at the bottom of the Color Cop screen each time you
change this option.
6 Matching RGB with Hex and Hex with RGB
Using the magnifier tool
There are times when you may wish to „fine tune‟ the colour you wish to use and some images may be
quite complex in that they use a variety of colours. In these instances you may find using the magnifier
tool is helpful. It will magnify the chosen area of the screen up to 16 times. You will then be able to
select the colour from that magnification.
The strength of
magnification is displayed
at the bottom of the
Color Cop screen.
Step 1:
Drag the eyedropper to the area of the image you wish to establish the colour
Step 2:
Click-on the + or – buttons next to the magnifier tool to increase/decrease magnification
Step 3:
Click-on the desired pixel within the viewing pane to select the desired RGB or the Hexadecimal colour
Reinforce your Learning
Use this manual to help you perform the following tasks…
Find the hexadecimal equivalent to R:255 G:192 B:111
Find the RGB equivalent to the hexadecimal code
#5E7F6C
Fill a rectangle in PowerPoint with a matching colour to that of the
UCL logo on the current UCL’s home.
7 Using the magnifier tool
Learning Technologies Support Service
Office: The Barleycorn
23 Gower Place
t. 020 7679 (3)3559 / (3)7170 / (3)3878
e. ltss@ucl.ac.uk
http://www.ucl.ac.uk/learningtechnology