Click here to Skip to main content
15,860,972 members
Articles / Web Development / HTML

Colorz - The RGB Assistant

Rate me:
Please Sign up or sign in to vote.
3.41/5 (12 votes)
28 Aug 2006MIT 130.3K   1.6K   28   35
Aids developers with color intensities

Sample Image - Colorz

Description

After developing applications and web pages for a while, I came to a point where I realized a major gap exists in the typical programming paradigm in that visualizing fine-grained color values in code was almost impossible unless you happen to use a WYSIYYG or RAD environment. And that there are still plenty of circumstances where such an environment will still be used.

Even the notion of HTML's naming colors never really helped because it only applied to basic values (i.e., <body bgcolor="white">), or had some obscure name that nobody even knows what it is. Lastly, most developers already know the basic colors, like RGB 255, 255, 255 equals white, RGB 0, 255, 255 equals cyan, etc.

This still begs the question, what if you want to see a color, perhaps coordinate a color in an environment-independent manner that was quick to use and allowed for easy copy and pasting for a pseudo integration mechanism. And, regardless of my editor of choice, I would always have a means to do this. Thus, Colorz was born.

What Colorz is, is a tiny program that allows you to use three scrollbars to specify colors in the RGB color space by manipulating the R intensity, the G intensity, and the B intensity of a color while showing you what it looks like and the appropriate values, essentially allowing you to see a color in real-time while you choose it.

Although Colorz was one of the first applications of such a nature out there on the web, realistically, the idea for it is not exclusive to me. As such, my goal was to focus in on just what it is Colorz is supposed to be. With this in mind, the idea was to keep it small and lightweight to deliver just what's needed and nothing more. It has a smaller memory footprint than Notepad so it will not hog system resources.

Specifications

  • Mode

    Switch between foreground (text color) and background modes. This enables you to coordinate color values and visually see what color looks good with what color.

  • Format
    1. Decimal -- This option allows you to specify the RGB color in decimal notation, with values between 0 and 255 for each intensity (suitable for environments such as the Windows API).
    2. Float -- This option allows you to specify the RGB color in floating point notation, with values between 0.0 and 1.0 for each intensity (suitable for environments such as OpenGL).
    3. Hex -- This option allows you to specify the RGB color in hexadecimal notation, with values between 0 and FF for each intensity (suitable for environments such as HTML).
  • Options
    1. Grayscale -- This option keeps the scrollbars in uniform to allow only shades of gray.
    2. On Top -- This option will keep the Colorz window on top of other windows for convenient placement while you are working.
    3. Grab Color -- This option is probably the reason most people use this application. It will allow you to pick the RGB color off of any point on the screen using the cursor. This can be a huge timesaver if you find the perfect color and want to know the values for it. After turning this option on, hold down the CTRL key to activate it.
    4. Auto Copy -- This feature allows you to paste the value directly in your code! Turning this on will have whatever value you specify (or pulled from the screen) be automatically copied to the clipboard.
  • Features
    • Has a small memory footprint, and will not hog system resources.
    • Highlights the textual output in correspondence to the Auto Copy selection.
    • Allows you to use thee different ways to specify a color; so regardless of the environment, Colorz will work with it.
  • Fixes
    • The "Grab Color" activation hotkey was changed to CTRL to avoid conflicts with menus and accelerators.
    • Now, when switching between background and foreground mode, Colorz retains the separate values.
    • When finished grabbing a color, the scrollbars automatically reflect the new color.
    • Must hold down the ALT key for the "Grab Color" feature to work.

      This fixes you picking your color and losing the information when you move the cursor again.

This program has made my life a little easier numerous times. If it helps me, I hope it'll help someone else out there in cyberspace. And maybe, some will learn from it. Enjoy!

Technical

This program demonstrates what is involved in writing a dialog-based application for Windows® using nothing but C and the Windows API. It further explores concepts pertaining to the GDI, with a focus on device contexts and bit block transfers. And, it shows how to manipulate the clipboard.

There was a workaround needed for the "Grab Color" feature. The reason being is that I used the GetPixel function for it; therefore, if you have coordinates for a non-client area in a window, it returns -1. This is not a valid color, so I used BitBlt to rectify the problem by copying the pixel to a static control and then using GetPixel on the control, thus returning a valid color. The following code demonstrates this technique:

C++
// get a handle to the window under the cursor
hWndxy = WindowFromPoint(spoint);

// get a handle to the preview pane
hPreview = GetDlgItem(hWnd,IDC_STATIC_PREVIEW);

// get the dc for the window in question
hDC = GetDC(hWndxy);

// GetPixel() requires client coordinates
ScreenToClient(hWndxy, &cursor);
rgb = GetPixel(hDC, cursor.x, cursor.y);

/*/
/ / The following is a workaround for the GetPixel API. If the
/ / cursor is over a titlebar or other non-client areas of the
/ / window it'll return -1 for the RGB intensities. In this case
/ / we use BitBlt to copy the color to our control and extract
/ / the intensities from that.
/*/

// check to see if intensities are valid
if(rgb == -1)
{
    HDC hDCPrev = GetDC(hPreview);

    BitBlt(hDCPrev, 0, 0, 1, 1, hDC, 
           cursor.x, cursor.y, SRCCOPY);
    rgb = GetPixel(hDCPrev, 0, 0);

    // clean up
    ReleaseDC(hPreview, hDCPrev);
}

// clean up
ReleaseDC(hWndxy, hDC);

Credits

This program uses a function called MoveWnd to center the window when the program starts. This function originated as CenterWindow, and was found in an excellent book named "Win32 Programming" by Brent E. Rector and Joseph M. Newcomer. I rewrote the function to fix a couple of things, add extra functionality, and I renamed it in the process.

I wrote the remains of the program from scratch with the assistance of the ever popular MSDN Library and knowledge acquired from "Win32 Programming".

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Team Leader
United States United States
I've been in software development since 1994. Over the years I've learned quite a lot in what it takes to complete the process of pushing out a quality product to customers in a timely fashion. As most of my colleagues could attest, there have been many challenges in our new and growing field in the past couple of decades as the industry matures rapidly. Much more so than most others historically speaking.

As such, I've learned one of the best aspects of software engineering is embracing the change that inherently comes along with it as new technologies constantly emerge to help us improve our world one application at a time as we make sense of the overwhelming amount of data now prevalent in the Information Age.

We truly live in a time unlike that ever known to mankind in recorded history, and it is my hope to do my part to help it along to face the challenges and demands of tomorrow.

Comments and Discussions

 
GeneralStill the best Pin
Mike Gaskey3-Apr-08 3:49
Mike Gaskey3-Apr-08 3:49 
GeneralRe: Still the best Pin
Jeremy Falcon6-Apr-08 11:21
professionalJeremy Falcon6-Apr-08 11:21 
Generallatest version Pin
renjith_sr20-May-07 1:45
renjith_sr20-May-07 1:45 
GeneralRe: latest version Pin
Jeremy Falcon9-Apr-08 7:08
professionalJeremy Falcon9-Apr-08 7:08 
GeneralWindows XP Pin
equivocator9923-Nov-06 4:40
equivocator9923-Nov-06 4:40 
GeneralRe: Windows XP Pin
Jeremy Falcon23-Nov-06 11:48
professionalJeremy Falcon23-Nov-06 11:48 
GeneralFeature Pin
S Douglas14-Nov-06 22:01
professionalS Douglas14-Nov-06 22:01 
GeneralRe: Feature Pin
Jeremy Falcon15-Nov-06 6:52
professionalJeremy Falcon15-Nov-06 6:52 
GeneralRe: Feature Pin
S Douglas18-Nov-06 21:08
professionalS Douglas18-Nov-06 21:08 
Jeremy Falcon wrote:
Or is this a way of saying you prefer the way that dialog looks when choosing a color?

:->
For just quickly picking a given color using the scroll bars is a bit much. Now refining that color with the scroll bars isn’t so bad but getting the approximate color is a bit much.



I'd love to help, but unfortunatley I have prior commitments monitoring the length of my grass. :Andrew Bleakley:


GeneralRe: Feature Pin
Jeremy Falcon23-Nov-06 13:14
professionalJeremy Falcon23-Nov-06 13:14 
NewsColorz 1.3.1 Demystified Pin
Jeremy Falcon25-Aug-06 19:00
professionalJeremy Falcon25-Aug-06 19:00 
GeneralRe: Colorz 1.3.1 Demystified Pin
Mike Gaskey29-Aug-06 1:37
Mike Gaskey29-Aug-06 1:37 
GeneralRe: Colorz 1.3.1 Demystified Pin
Jeremy Falcon29-Aug-06 4:54
professionalJeremy Falcon29-Aug-06 4:54 
GeneralExcellent Pin
Member 108017322-Sep-04 2:33
Member 108017322-Sep-04 2:33 
GeneralRe: Excellent Pin
Jeremy Falcon22-Sep-04 4:58
professionalJeremy Falcon22-Sep-04 4:58 
General2.0 means 2 years... Pin
internal27-Oct-04 20:12
internal27-Oct-04 20:12 
GeneralRe: 2.0 means 2 years... Pin
Jeremy Falcon28-Oct-04 5:10
professionalJeremy Falcon28-Oct-04 5:10 
GeneralRe: 2.0 means 2 years... Pin
internal29-Oct-04 3:02
internal29-Oct-04 3:02 
QuestionRefresh ? Pin
Kim Marius Haugen24-Feb-04 10:01
Kim Marius Haugen24-Feb-04 10:01 
AnswerRe: Refresh ? Pin
Jeremy Falcon24-Feb-04 13:52
professionalJeremy Falcon24-Feb-04 13:52 
GeneralRefresh ? Pin
Kim Marius Haugen26-Feb-04 9:25
Kim Marius Haugen26-Feb-04 9:25 
GeneralRe: Refresh ? Pin
Jeremy Falcon26-Feb-04 9:30
professionalJeremy Falcon26-Feb-04 9:30 
GeneralColorz 2.0 Pin
Jeremy Falcon13-May-02 10:37
professionalJeremy Falcon13-May-02 10:37 
GeneralRe: Colorz 2.0 Pin
Geert Delmeiren16-Jul-02 1:08
Geert Delmeiren16-Jul-02 1:08 
GeneralRe: Colorz 2.0 Pin
Jeremy Falcon18-Jul-02 16:59
professionalJeremy Falcon18-Jul-02 16:59 

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.