Click here to Skip to main content
15,861,168 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

 
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 
GeneralRe: Colorz 2.0 Pin
Geert Delmeiren18-Jul-02 20:25
Geert Delmeiren18-Jul-02 20:25 
GeneralRe: Colorz 2.0 Pin
Jeremy Falcon19-Jul-02 8:18
professionalJeremy Falcon19-Jul-02 8:18 
GeneralRe: Colorz 2.0 Pin
Jörgen Sigvardsson10-Feb-04 7:23
Jörgen Sigvardsson10-Feb-04 7:23 
Dude? Where's 2.0? Wink | ;)

--
Gott weiß ich will kein Engel sein.
GeneralRe: Colorz 2.0 Pin
Jeremy Falcon10-Feb-04 8:48
professionalJeremy Falcon10-Feb-04 8:48 
GeneralGrab color no longer works Pin
Matt Philmon13-Nov-00 3:17
Matt Philmon13-Nov-00 3:17 
GeneralRe: Grab color no longer works Pin
Jeremy Falcon13-Nov-00 5:46
professionalJeremy Falcon13-Nov-00 5:46 
QuestionGrab Color option in Colorz : how do I turn it off? Pin
Rudi Farkas11-Sep-00 1:06
sussRudi Farkas11-Sep-00 1:06 
AnswerRe: Grab Color option in Colorz : how do I turn it off? Pin
Jeremy Falcon15-Sep-00 17:12
professionalJeremy Falcon15-Sep-00 17:12 
GeneralWeb Safe Palette Pin
Max Zakharzhevskiy15-Feb-00 12:11
sussMax Zakharzhevskiy15-Feb-00 12:11 
GeneralBad link Pin
Eddie Velasquez15-Feb-00 2:34
Eddie Velasquez15-Feb-00 2:34 

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.