Click here to Skip to main content
13,196,730 members (72,927 online)
Click here to Skip to main content
Add your own
alternative version


40 bookmarked
Posted 11 Dec 1999

A sophisticated color picker control

, 11 Dec 1999
Rate this:
Please Sign up or sign in to vote.
A replacement color picker control allowing you full visual control over RGB and HSB selections
  • Download demo project - 287 Kb
  • Sample Image - ColorSpace.jpg

    <!-- Article Starts -->

    Ever wanted one of those fancy color picking dialogs that apps like Corel PhotoHouse have ? If you did, here it is !!

    First, some general stuff about how I got this stuff together.

    The most important part, obviously , is the color space conversion from RGB to HSB. I got some help ( lots actually) on this from one of the discussion boards on Codeguru ( Thanks !)

    Once you have this piece of code, you have the next problem, which is to create proper bitmaps which are required for displaying the color spaces.

    Creating the Hue bitmap is quite easy as you just have to go through each of the hue values (0-360) and iterate through each of the saturation values (0-255). I used a standard brightness value of 255 for the bitmap as other values give pretty dull results.

    Next , and this is the difficult part - comes the part where you create the RGB bitmap. This is a little tough as you have to not only create gradients but also fit them together seamlessly . I accomplished this by first creating rectangular gradients and then using some texture mapping code ( courtesy Micheal Abrash - Zen ) to fit them together .

    Now the next part is to give the whole thing a user interface. Again the HSB part is easy as finding the angle of a point as well as its distance from another are pretty straightforward. And to those math gurus who are fuming at the code - please forgive me - I took the simplest approach I knew of -

    x2 + y2 = a2.

    Then we come to the RGB space. Again, this requires a lot of 3d math - I again took the easiest route - As I knew which bitmap I was using as well as the coordinates of the vertices, I used some 2d math to map points from the 3d space to 2d and vice versa. It`s not terribly elegant , but it works , and thats what I get paid for.

    If you look at the contructor of the CColorPickerDlg, you`ll notice that I set up certain values for the vertices and centre. This I got from the bitmap I`m using. You could quite easily use a different bitmap if you don`t like the one I provide ( can`t imagine why though !!!) , by just setting different values here . The code which actually does the math should adjust accordingly.

    Unfortunately - this bit of code was written by burning a lot of midnight oil in a real big hurry !! So I didn`t comment too much. I`ll try to post an update in the coming weeks with a few upgrades as well as a lot of comments.

    Now - for the important stuff - how do you use it ? Simple - Copy the Dialog resource - IDD_DIALOG_COLORS from the resource file of the demo project into your project.

    Next - Copy the two Bitmap resources IDB_BITMAP_HSB and IDB_BITMAP_HSB from the demo project into your own workspace.

    Then, include ColorPickerDlg.h in the file you want to call it from ( the view in the demo ) and use the following bit of code :

    CColorPickerDlg dlg(m_color) // where m_color is the color you want to inialize
                                 // want to inialize with
    if(dlg.DoModal() == IDOK)
        // User pressed ok
        m_color = dlg.GetColor();

    That is it. And yes, please include

    • ColorPickerDlg.cpp
    • Dib.cpp
    • Common.cpp

    in your project. The latter two are support files which provide some DIB manipulation routines as well as some of the math stuff.

    The demo app which I have provided uses gray = (192,192,192) as the default background. Choose View | Color Space to invoke the color picker . When you choose a different color, it is used as the background.

    The CColorPickerDlg will also automatically handle WM_SYSCOLORCHANGE messages to always make sure that no funny images are displayed.

    Thanks to Chris Mauder for a few suggestions inclding the very good one of including the two gradient bitmaps as resources.


    This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

    A list of licenses authors might use can be found here


    About the Author

    Rajiv Ramachandran
    Web Developer
    United States United States
    No Biography provided

    You may also be interested in...


    Comments and Discussions

    GeneralGreat!! and Question [modified] Pin
    nakhasan7-Mar-08 18:49
    membernakhasan7-Mar-08 18:49 
    GeneralI think my function is 10 times faster Pin
    soichi11-Jan-03 12:30
    membersoichi11-Jan-03 12:30 
    Generalthanks Pin
    flying_pi29-Oct-02 8:42
    memberflying_pi29-Oct-02 8:42 
    GeneralExcellent Pin
    Philippe Lhoste14-Mar-02 1:01
    memberPhilippe Lhoste14-Mar-02 1:01 
    GeneralAnother color picker Pin
    Robert Minder31-Jan-02 3:53
    memberRobert Minder31-Jan-02 3:53 
    GeneralRe: Another color picker Pin
    Philippe Lhoste10-Jun-04 1:46
    memberPhilippe Lhoste10-Jun-04 1:46 
    GeneralPlease read the documentation - Pin
    Rajiv Ramachandran25-Mar-00 9:53
    sussRajiv Ramachandran25-Mar-00 9:53 
    Generalother files also needed Pin
    Mel Stober25-Mar-00 8:11
    sussMel Stober25-Mar-00 8:11 
    GeneralRe: other files also needed Pin
    AberAber23-Dec-07 16:57
    memberAberAber23-Dec-07 16:57 

    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.171019.1 | Last Updated 12 Dec 1999
    Article Copyright 1999 by Rajiv Ramachandran
    Everything else Copyright © CodeProject, 1999-2017
    Layout: fixed | fluid