Choose a color space

Designers tend to think about color in terms of color spaces or models. OmniGraffle’s default color space on Mac and iOS is sRGB (standard Red Green Blue), which is based on RGB.

When it comes to choosing a color space for your project, OmniGraffle offers two ways to mix your colors: HSB (Hue, Saturation, Brightness), and RGB (Red, Green, Blue). Without presenting a Masters or PhD dissertation on color theory, there are a couple things that you should know about the HSB and RGB color spaces:

• HSB, sometimes also referred to as HSL or HSV, rearranges the geometry of the RGB color space in a cylindrical coordinate system to present a more intuitive representation of colors. HSB is more commonly used in image editing software and for image analysis.
• RGB, on the other hand, is an additive color model, in which the three colors—Red, Green, and Blue— are added together to produce colors. RGB’s strength, however, is in displaying colors electronically; it’s perfect for mobile devices, TVs, scanners, and more.

So, when it comes to choosing and mixing colors in OmniGraffle, which model should you choose: RGB or HSB? Largely, it depends on the output form.

If you are producing assets for a website or a mobile or desktop app, sticking to the RGB color space is the way to go. If you are processing images, or working with OmniGraffle Pro’s Blends and Filters, you might get better results with HSB.

It’s not that you can’t use HSB colors for electronic purposes, it’s just that RGB is more adept at serving the display’s electrons.

Using the HSB color selectors

With HSB, you aren’t necessarily choosing colors as you do with RGB; instead, you mix different intensities of color.

• Since HSB is a cylindrical coordinate system, and defines the perceptive appearance of a color. The Hue is set as a value in degrees, ranging from 0° to 360°.
• Saturation is a percentage value of color (Hue). At 0 percent, the Hue color value is nullified, while at 100 percent, the color value is the strongest.
• Brightness mixes in a percentage value of white. At 0 percent, the Hue and Saturation are nullified, resulting in black; while at 100 percent the Hue is brighter due to the white value added into the mix.

To achieve a darker Hue, slide the Brightness down; to make the color pop, turn up the Saturation.

Using the RGB color selectors

When mixing RGB colors, remember that the colors are additive, which means adding more of a color results in a lighter tone or an entirely different color as the values are combined. The individual values of RGB range from 0 to 255. With the Red, Green, and Blue sliders set to 0, the resulting color is black. Conversely, set each of the RGB sliders to 255 (all the way to the right), and the resulting color is white.

Changing an object’s Opacity

Opacity defines a percentage value of an object’s opaqueness, ranging from 0 percent (or fully transluscent) to 100 percent (or fully opaque). When an object is fully opaque, colors and objects underneath do not show through. The HSB, RGB, and Gray color tabs each have an Opacity slider which you can use to change an object’s level of opaqueness.

What about CMYK?

CMYK is another color space that many of you may be familiar with, particularly if you have designed something to be printed.

The CMYK color model, otherwise known as a four-color or process color model, is used almost exclusively in printing. The four colors—Cyan, Magenta, Yellow, and Key (or Black)—are split into different channels for printing. With a four-color press, black—the key—is typically laid down first, followed by cyan, magenta, and yellow, with the sheet running through the printer one time for each color of the process. (This is why printing a 4C brochure can be more expensive than running a dual- or monotone printing.)

Going from RGB to CMYK is nearly impossible, since both color models are device-dependent. Even using sophisticated color management software, the conversion rarely produces an exact match since the color gamuts of the spaces are so different.