Mark Miller

Working with Color in CodeRush

Working with color in source code has never been as easy or intuitive as it should be. Looking at hex values or a color name like Bisque and then trying to imagine what that color looks like is a challenge. Finding the correct color to use in a new style in a CSS file is also challenging.

Furthermore, going from color to code is rarely a picnic.

Fortunately, CodeRush 10.1 brings developers much closer to the real colors with new Color features. In this post I’ll discuss CodeRush features for working with color, both new and old.

Generating Color Declarations from HTML

This Intelligent Paste feature has been around for years. Simply copy an HTML color declaration (e.g., “#4B70BC”) and paste that inside a C# or VB file inside a method, property accessor, or inside a type (but not in a member) on an empty line, and you’ll get something like this (C# example shown):

ShowColorSmartPaste

This intelligent paste will create a local variable or a field, depending upon where you paste. As with all Intelligent Paste operations, you can press Undo to get the literal contents of the clipboard if you don’t like the CodeRush version. All Intelligent Paste operations are defined on the Intelligent Paste options page. Follow these steps to get there if you want to see them all:

  1. From the DevExpress menu, select "Options...".
  2. In the tree view on the left, navigate to this folder: Editor\Clipboard
  3. Select the "Intelligent Paste" options page.

Note: This page level is Advanced, and will only be visible if the Level combo on the lower-left of the Options dialog is set to Advanced or Expert.

Working with Color Declarations from Templates

When working with color from templates, the mnemonic to remember is “CL”.

Normally (without CodeRush), if I want to bring up a list of named colors using Intellisense, I have to type in “Color.”. With CodeRush installed, I can now simply type “CL” (lower case is fine) followed by the space bar to expand the template, and this is important: the caret must be at a location where a Color expression is valid (so not on an empty line but instead as a parameter to a method or an assignment to a variable or a property. Also, the active project must have a reference to System.Drawing or System.Windows.Media (CodeRush will add the appropriate namespace reference to the source file if needed).

If you need a color from the SystemColors class, expand the “SYC” template (again, lowercase is fine, but for clarity I like to specify templates using uppercase letters).

Back to that CL mnemonic. You can combine this shortcut with other CodeRush code templates that work with types. For example, MCL will generate a method that returns a Color, VCL will create a variable declaration (local, parameter, or field) of type Color, and ACL will generate an auto-implemented property of type Color. There are also PCL (for properties of type Color with backing store) and NCL for newly-initialized variables of type Color.  And there is “CL.E” for Color.Empty.

Try these in a project that references System.Drawing or System.Windows.Media.

Color Swatches in the Code

Remember that color declaration we generated at the top of this post when I pasted a color reference into the code? You probably noticed that bluish rectangle under the word Color. Here’s that screen shot again:

ShowColorSmartPaste

And here’s a variation with different values:

ColorSwatch

Those rectangles appearing below the Color type reference are color swatches. These are very cool. Now you no longer have to reverse engineer RGB color values in your head to figure out exactly what color you’re looking at in the code.

NamedColorSwatches

The CodeRush Color Dialog

So what happens when you want to edit a color in the code? Good news: just click the color swatch with the mouse and up pops the CodeRush Color dialog, which looks like this:

ColorPickerAppears

The CodeRush Color dialog consists of several pages, which we’ll examine in a moment. At the bottom of the CodeRush Color dialog is a sample color swatch which reveals the selected color, and to the right of the sample is a Favorites button. FavoritesButton

We’ll talk more about the cool things you can do with favorite colors in a moment. But first, let’s take a look at the pages.

The Color Picker

The “Picker” page, the one you see in the screen shot above, is perhaps the most weighty. If you need to pick a color based on hue, saturation, brightness, red, green, or blue, you can do it here. You can also set opacity, enter an HTML color (including shorthand for web-safe colors such as “369”), and change a selected color to it’s nearest web-safe neighbor. And you can select a color from an existing image or window appearing on your desktop by clicking the eye-dropper tool. EyeDropper

When working with color, you can use one of two mechanisms: red, green, & blue or hue, saturation & brightness (RGB and HSB). You may prefer to work with HSB on the Picker page since these attributes make it easy to change the brightness or the saturation without modifying the hue, which can produce nice color variations like this:

Variations

or this:

Variations2

Keeping most of the UI colors in the same hue is useful for reducing visual noise in a user interface.

Regardless of which of the two mechanisms you choose to work in, specifying a color on this page is always a convergence of three values. I like to visualize this as a cube which holds all colors. If I’m working in RGB, the dimensions of that cube are 256x256x256.

Here’s an example of a three-dimensional arrangement of colors organized by saturation (width), brightness (height), and hue (depth):

ColorCube

So to specify a color in this three-dimensional space the Picker page gives you a two-dimensional grid, like this:

TwoDimensionalGrid

and a one-dimensional vertical gradient, like this:

OneDimensionalGrid

These two controls work together to let you specify any color in this three-dimensional space. The vertical gradient allows you to select any plane in this space, and two-dimensional grid lets you select a color on that plane.

The vertical gradient is useful when you want to isolate one of the three attributes of the cube you’re working with onto a single dimension, allowing adjustments to only one value while keeping the other two attributes static.

To isolate an attribute just click its corresponding radio button on this page.

For example, to isolate the Saturation attribute, click the “Sat:” radio button.

 BySaturation

Notice the labels on the two-dimensional grid have changed to show Brightness on the vertical axis and Hue on the horizontal axis.

Isolating the Brightness attribute looks like this:

ByBrightness

Things get interesting when you isolate one of the RGB channels. For example, here’s Red:

ByRed

Here you can see where the color will go as you increase or decrease the RGB values.

Here’s what it looks like when you isolate the Green channel:

ByGreen

And for completeness, here’s what it looks like when you isolate the Blue channel:

ByBlue

If you need a color from the desktop, click the Eyedropper button EyeDropper and then click on the color you want. A sample of the color under the eyedropper will appear below the button, and to the right you’ll see a magnified portion of the screen with a rectangle in the center representing the eyedropper position.

PickColor

If we’re working with a color that isn’t web safe, the “Make Web Safe” button will be enabled. Clicking it will to take the selected color to its nearest web-safe neighbor, like this:

 WebSafeNow

Right above the Make Web Safe button is the hex edit control, useful for copying or pasting hex triplet representations of color (for example, “B6005A”). You can also use a three-digit shorthand when representing web safe colors, for example enter “369” in the hex edit control and you’ll get this:

WebSafeShorthand

Which is shorthand for #336699.

Web Colors

Speaking of web-safe colors, let’s switch to the Web page, where you can select from all 216 web-safe colors:

WebSafeColors

Named Colors

Here’s the Named page for .NET colors based on the X11 color names:

NamedColors

System Colors

SystemColors

Document Colors

The Document page shows all the colors defined in the active document (before taking this screen shot I opened a C# class which defined many colors):

DocumentColors

Favorite Colors

And finally, we have the Favorites page, which might initially look like this:

Favorites

The favorites page holds favorite colors in groups called palettes.

There are three interesting buttons on the top row of this page:

DeleteSelectedColor Delete Selected Color
DeleteActivePalette Delete Active Palette
CreateNewPalette Create New Palette

You can rename the active palette simply by typing in a new name in the combo box at the top of the dialog (press Enter to commit the change or Escape to cancel). For example, let’s rename this palette to “My Faves”, like this:

MyFaves

Press Enter to commit the change, or you can commit the rename by simply moving focus away to another control.

At the bottom of the CodeRush Color dialog, to the right of the color sample, sits the Favorites button. FavoritesButton

If you click the button, the sample color will be added to the active palette page.

AddFavorite

Let’s add another color to this page. Click on the Named color tab, select DarkOrange:

DarkOrange

Then click the Favorite button, and watch what happens under the mouse:

ReturnButtonBig

The Favorites button changes to a Return button, so a single click on this can get you right back to the page you started from. This makes it easy to add several favorite colors from anywhere in the CodeRush Color window.

There’s one more cool thing you can do with favorite colors. To demonstrate, let’s create a new palette page. Click the Create New Palette button. CreateNewPalette

Now let’s go to the Picker page and find a favorite color, like this:

DevExpressBlue

For this demo I’m grabbing the DevExpress blue from the web site using the Eyedropper.

Now, right-click the Favorite button and select Add Color Distribution, then click the number of colors of varying lightness you want to add in the same hue as this color. I’ll select 21.

AddColorDistribution

Which generates 21 colors based on the selected color, like this:

DevExpressColorDistribution

Generating the Color Reference

Once you have the color you want, just click the OK button and the active color reference will be replaced with a reference to the color selected. Here’s the DevExpress blue placed in a C# file after clicking OK:

DevExpressColorInCode

Oh, and if you’re still wondering what Bisque looks like, here it is:

  ColorBisque

We hope you enjoy the CodeRush features that make working with color easier. As always, let us know what we can do to improve your development experience.

Published Apr 26 2010, 11:37 AM by
Bookmark and Share

Comments

Twitter Trackbacks for Working with Color in CodeRush - Mark Miller [devexpress.com] on Topsy.com

Pingback from  Twitter Trackbacks for                 Working with Color in CodeRush - Mark Miller         [devexpress.com]        on Topsy.com

May 3, 2010 6:19 AM

Lex Li

It is another perfect addition to developers who use Color every day! Thanks a lot.

May 3, 2010 7:35 PM

Michael

Hi Mark

Excellent post , tell me are there plans to add the colour swatch to html colour's as defined in css files.

Regards Michael

May 6, 2010 6:08 PM

Mark Miller (DevExpress)

Michael,

Color swatches appear in C#, VB, XAML, HTML, and CSS files and are all fully supported by the CodeRush Color picker.

May 7, 2010 1:34 PM

Daniel Shitrit

Great post -:)

July 20, 2011 12:48 PM

About Mark Miller (DevExpress)

Mark Miller is a C# MVP with strong expertise in decoupled design, plug-in architectures, and great UI. Mark is Chief Architect of the IDE Tools division at Developer Express, and is the visionary force behind productivity tools like CodeRush and Refactor!, as well as the DXCore extensibility layer for Visual Studio. Mark is a popular speaker at conferences around the world and has been writing software for over two decades.
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners