Click here to Skip to main content
Click here to Skip to main content

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 Sliders Adjust 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 Controls Manually 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-button The sliders adjust the colour of the sample foreground.

Shortcut key : Alt-F

Background Radio-button The 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 Checkbox Used 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 Checkbox Toggle the intensity display numbers between decimal and hexadecimal.

Shortcut key : Alt-H

Web Safe Checkbox Restricts the colours to the 216 web safe colours.

Shortcut key : Alt-W

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

Shortcut key : Alt-S

Copy Button Copy the colour values to the clipboard.

Shortcut key : Alt-C

Options Buttons Brings up the display options dialog.

Shortcut key : Alt-O

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

Colour Options Dialog

Colour Options Dialog

OK Button Closes the dialog, saves and applies the settings

Shortcut key : Enter

Cancel Button Closes the dialog, reverts to old settings

Shortcut key : Escape

Default Button Sets all the controls to their default values

Shortcut key : Alt-D

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

Shortcut key : Alt-A

Window Size Editbox The 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 Editbox The 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 Radiobutton The sample window will have a shape in it instead of text

Shortcut key : Alt-H

Rectangle Radiobutton The shape will be a rectangle

Shortcut key : Alt-R

Triangle Radiobutton The shape will be a triangle

Shortcut key : Alt-N

Ellipse Radiobutton The shape will be an ellipse

Shortcut key : Alt-E

Height Editbox The height of the shape in pixels

Shortcut key : Alt-G

Width Editbox The width of the shape in pixels

Shortcut key : Alt-W

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

Shortcut key : Alt-T

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

Shortcut key : Alt-M

Cursor Screen Coordinates The text will be the screen coordinates of the mouse cursor

Shortcut key : Alt-S

Font Button Brings up the font selection dialog to select the font used to display the text

Shortcut key : Alt-F

Decimal Format Editbox The 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 Editbox The 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

Comments and Discussions

GeneralMultiple monitor support for CMagnifierWindow Pinmember-Dy22-Nov-06 4:09 
GeneralRe: Multiple monitor support for CMagnifierWindow PinmemberPJ Arends22-Nov-06 8:24 
GeneralRe: Multiple monitor support for CMagnifierWindow Pinmember-Dy29-Nov-06 3:03 
GeneralVery Good!! PinmemberWREY28-Sep-02 1:06 
GeneralTwo suggestions: PinmemberShog95-Aug-02 7:51 
GeneralWohoo.. PinmemberRama Krishna17-Jul-02 18:05 
GeneralIs that... PinmemberDarren Schroeder17-Jul-02 17:36 
GeneralRe: Is that... PinmemberPJ Arends17-Jul-02 17:43 
GeneralRe: Is that... PinmemberDarren Schroeder18-Jul-02 2:49 
GeneralSuggestions PinadminChris Maunder16-Jul-02 22:24 
GeneralRe: Suggestions PinsubeditorNishant S16-Jul-02 22:45 
GeneralRe: Suggestions PinmemberPJ Arends16-Jul-02 22:48 
GeneralRe: Suggestions PinadminChris Maunder16-Jul-02 23:01 
GeneralRe: Suggestions PinmemberPJ Arends16-Jul-02 23:10 
GeneralRe: Suggestions PinadminChris Maunder16-Jul-02 23:14 
GeneralRe: Suggestions PinmemberColin Davies17-Jul-02 10:07 
GeneralExcellent work! PinmemberAlvaro Mendez16-Jul-02 11:51 
GeneralAnother fine example of educational value PinmemberViolaCase16-Jul-02 11:25 
GeneralRe: Another fine example of educational value PinmemberPJ Arends16-Jul-02 17:36 
GeneralGood work! PinmemberShog916-Jul-02 8:07 
GeneralNice work - from a beta tester :-) PinsubeditorNishant S16-Jul-02 2:15 

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

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

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