Click here to Skip to main content
12,761,421 members (32,910 online)
Click here to Skip to main content
Add your own
alternative version


37 bookmarked
Posted 15 Jul 2002

Colour preview and picker applet

, 15 Jul 2002 CPOL
Rate this:
Please Sign up or sign in to vote.
A simple applet that lets you preview how various font and background colours interact. Has the added ability of being able to pick any colour from the screen.


This is a simple applet that can be used to preview how various coloured font and background colours interact with each other. It also has the ability to pick colours from anywhere on the screen.

This app is based on Colin Davies' Corner Color Test which, unfortunately, had a few problems when I tried to run it on my Win2000 machine. Rather than bother Colin, who is very busy with his latest project, I thought I would have a go at writing my own version.


  • Colin Davies for the original idea, plus the help and suggestions he gave in developing this app.
  • Dr Joseph Newcomer for his CImageButton class.
  • Keith Rule for his CMemDC class.
  • Various others for suggestions and testing.

Using the Colour applet

Note : All settings are saved in the registry under the key :

        \PJ Arends

Main Window

Main Window

Colour SlidersAdjust the various colour intensities by moving the sliders. You can use the up and down arrow keys for adjustments, and use the left and right keys to switch between sliders. There are no shortcut keys to these controls, but they can be easily controlled from their associated edit controls.
Edit ControlsManually enter the colour values in the edit controls. You can use the up and down arrow keys to increase or decrease the value in the edit controls. The following shortcut key strokes will set the focus to the edit controls
  • Alt-R Red edit control
  • Alt-G Green edit control
  • Alt-B Blue edit control
Foreground Radio-buttonThe sliders adjust the colour of the sample foreground.

Shortcut key : Alt-F

Background Radio-buttonThe sliders adjust the colour of the sample background.

Shortcut key : Alt-K

Pick Colour Button

Use the mouse to pick colours from the screen. Once you find the colour you like, press Control-Alt-P and the "Pick Colour" option will be turned off, saving the colour.

  • Shortcut key (Alt-P)  -  Start
  • Shortcut key (Control-Alt-P) -  Stop
Magnify CheckboxUsed with "Pick Colour". When picking a colour from the screen, the cursor will be contained within a small magnifying window that follows the cursor around the screen. Use the arrow keys on the keyboard for finer control over the cursor. Close the magnifying window with either a left mouse button click, or pressing the enter or escape keys.

Shortcut key : Alt-M

Hexadecimal CheckboxToggle the intensity display numbers between decimal and hexadecimal.

Shortcut key : Alt-H

Web Safe CheckboxRestricts the colours to the 216 web safe colours.

Shortcut key : Alt-W

Reset ButtonReset the text and background colours to the system defaults.

Shortcut key : Alt-S

Copy ButtonCopy the colour values to the clipboard.

Shortcut key : Alt-C

Options ButtonsBrings up the display options dialog.

Shortcut key : Alt-O

Arrow ButtonsMove the Colour program window into a corner. There are no shortcut keys associated with these buttons

Colour Options Dialog

Colour Options Dialog

OK ButtonCloses the dialog, saves and applies the settings

Shortcut key : Enter

Cancel ButtonCloses the dialog, reverts to old settings

Shortcut key : Escape

Default ButtonSets all the controls to their default values

Shortcut key : Alt-D

Always On Top CheckboxThe main window will always stay on top of all other windows on the screen.

Shortcut key : Alt-A

Window Size EditboxThe length of the sides of the magnifier window (i.e. Entering 100 will give you a 100 pixel by 100 pixel window)

Shortcut key : Alt-Z

Pixels Shown EditboxThe number of pixels across and high in the magnifier window (i.e. Entering 9 will show a grid 9 pixels by 9 pixels in the window)

Shortcut key : Alt-P

Shape RadiobuttonThe sample window will have a shape in it instead of text

Shortcut key : Alt-H

Rectangle RadiobuttonThe shape will be a rectangle

Shortcut key : Alt-R

Triangle RadiobuttonThe shape will be a triangle

Shortcut key : Alt-N

Ellipse RadiobuttonThe shape will be an ellipse

Shortcut key : Alt-E

Height EditboxThe height of the shape in pixels

Shortcut key : Alt-G

Width EditboxThe width of the shape in pixels

Shortcut key : Alt-W

Text RadiobuttonThe sample window will have text in it instead of a shape

Shortcut key : Alt-T

Sample Radiobutton and EditboxThe text will be the user defined text entered in the edit box

Shortcut key : Alt-M

Cursor Screen CoordinatesThe text will be the screen coordinates of the mouse cursor

Shortcut key : Alt-S

Font ButtonBrings up the font selection dialog to select the font used to display the text

Shortcut key : Alt-F

Decimal Format EditboxThe formatting string for decimal output. The formatting string should follow the same rules as the formatting strings used in the MFC CString::Format function except instead of using a 'd' or 'i' as a place holder for numbers, you have to use a 'r' or 'R' for the Red colour,a 'g' or 'G' for the green colour, and a 'b' or 'B' for the blue colour.

i.e. If the RGB values are 171, 222, 106, and the format string is (not including quotes) : "Red = %r, Green = %g, Blue = %b", the output will be "Red = 171, Green = 222, Blue = 106"

Shortcut key : Alt-C

Hexadecimal Format EditboxThe formatting string for hexadecimal output. The formatting string should follow the same rules as the formatting strings used in the MFC CString::Format function except use lowercase 'r', 'g' or 'b' instead of 'x' for lowercase letters in the hexadecimal number, and use uppercase 'R', 'G', or 'B' instead of 'X' to use uppercase letters in the hexadecimal number.

i.e. If the RGB values are AB, DE, 6A, and the format string is (not including quotes) : "Red = 0x%08R and Blue is %b, Ok?", the output will be "Red = 0x000000AB and Blue is 6a, Ok?"

Shortcut key : Alt-X

Classes of Interest

CMagnifierWindow class

The CMagnifierWindow class is a simple class that is used by the Colour app to show a magnified portion of the screen. While the magnifier window is on the screen, it will remain centered on the mouse cursor. You can move the cursor, and the magnifier window, around the screen using the mouse or the arrow keys on the keyboard. A left mouse button click, or the 'Enter" or 'Escape' keys will hide the magnifier window from view.

To use the class in one of your own apps, add the files MagnifierWindow.h and MagnifierWindow.cpp to your project. Simply declare an instance of the class in your code, call the Create() member function to create the window, call the ShowMagnifier() function to use the magnifier, and the HideMagnifier() function to stop using it. When the user hides the magnifier window by clicking or using the keyboard, the window will post a user defined message WMU_HIDEMAGNIFIER which is defined in the MagnifierWindow.h header file.

The operation of the magnifier is quite simple. In the ShowMagnifier() function a snapshot is taken of the entire screen and saved in a screen size bitmap that is left selected in a memory device context, and the window is shown using a call to the ShowWindow(SW_SHOW) function. As the window moves around the screen, the portion of the screen that is to be magnified is drawn into the magnifier window using the StretchBlt() function. Then, in the HideMagnifier function, the bitmap and memory device context are destroyed, and the window is hidden with a call to the ShowWindow(SW_HIDE) function.

CMagnifierWindow class member functions


The class constructor initializes the class members but does not create the actual window, you have to call the Create() function to do that. The constructor takes no parameters, and does not return any value.

BOOL CMagnifierWindow::Create (int size, int pixels, CWnd* pParentWnd)

The Create() function creates the actual magnifier window, but leaves it hidden from view. The Create() function returns a nonzero value if it is successful in creating the window, and it returns zero if it fails.


  • int size - The size of the magnifier window in pixels
  • int pixels - The number of pixels to be shown in the magnifier window
  • CWnd *pParentWnd - A pointer to the magnifier window's parent window. This is the window that will receive the WMU_HIDEMAGNIFIER message when the user hides the magnifier window

BOOL CMagnifierWindow::ShowMagnifier()

The ShowMagnifier() function shows the magnifier window on the screen. The function returns TRUE on success, and FALSE on failure. The function does not take any parameters

void CMagnifierWindow::HideMagnifier()

The HideMagnifier() function removes the magnifier window from the screen, but it does not destroy it. The function takes no parameters, and does not return any value.

Other classes

While the rest of the classes are nothing special, some people may be interested in some of the functionality.

The CNumEdit class (NumEdit.cpp and NumEdit.h) is a CEdit derived class the limits it's input to decimal or hexadecimal numbers between 0 and 255. The class uses the EN_UPDATE message handler to validate the numbers entered into it.

The CColourSlider class (ColourSlider.cpp and ColourSlider.h) is a simple subclass of a CSliderCtrl that draws a gradient colour in the track bar.

That's it, I hope some of you find this useful.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

PJ Arends
Canada Canada
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMultiple monitor support for CMagnifierWindow Pin
-Dy22-Nov-06 4:09
member-Dy22-Nov-06 4:09 
GeneralRe: Multiple monitor support for CMagnifierWindow Pin
PJ Arends22-Nov-06 8:24
memberPJ Arends22-Nov-06 8:24 
GeneralRe: Multiple monitor support for CMagnifierWindow Pin
-Dy29-Nov-06 3:03
member-Dy29-Nov-06 3:03 
GeneralVery Good!! Pin
WREY28-Sep-02 1:06
memberWREY28-Sep-02 1:06 
GeneralTwo suggestions: Pin
Shog95-Aug-02 7:51
memberShog95-Aug-02 7:51 
GeneralWohoo.. Pin
Rama Krishna17-Jul-02 18:05
memberRama Krishna17-Jul-02 18:05 
GeneralIs that... Pin
Darren Schroeder17-Jul-02 17:36
memberDarren Schroeder17-Jul-02 17:36 
GeneralRe: Is that... Pin
PJ Arends17-Jul-02 17:43
memberPJ Arends17-Jul-02 17:43 
GeneralRe: Is that... Pin
Darren Schroeder18-Jul-02 2:49
memberDarren Schroeder18-Jul-02 2:49 
GeneralSuggestions Pin
Chris Maunder16-Jul-02 22:24
adminChris Maunder16-Jul-02 22:24 
GeneralRe: Suggestions Pin
Nishant S16-Jul-02 22:45
subeditorNishant S16-Jul-02 22:45 
GeneralRe: Suggestions Pin
PJ Arends16-Jul-02 22:48
memberPJ Arends16-Jul-02 22:48 
GeneralRe: Suggestions Pin
Chris Maunder16-Jul-02 23:01
adminChris Maunder16-Jul-02 23:01 
GeneralRe: Suggestions Pin
PJ Arends16-Jul-02 23:10
memberPJ Arends16-Jul-02 23:10 
GeneralRe: Suggestions Pin
Chris Maunder16-Jul-02 23:14
adminChris Maunder16-Jul-02 23:14 
GeneralRe: Suggestions Pin
Colin Davies17-Jul-02 10:07
memberColin Davies17-Jul-02 10:07 
GeneralExcellent work! Pin
Alvaro Mendez16-Jul-02 11:51
memberAlvaro Mendez16-Jul-02 11:51 
GeneralAnother fine example of educational value Pin
ViolaCase16-Jul-02 11:25
memberViolaCase16-Jul-02 11:25 
GeneralRe: Another fine example of educational value Pin
PJ Arends16-Jul-02 17:36
memberPJ Arends16-Jul-02 17:36 
GeneralGood work! Pin
Shog916-Jul-02 8:07
memberShog916-Jul-02 8:07 
GeneralNice work - from a beta tester :-) Pin
Nishant S16-Jul-02 2:15
subeditorNishant S16-Jul-02 2:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 16 Jul 2002
Article Copyright 2002 by PJ Arends
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid