Color Values: When and How to Use Them

Colors can be represented in several formats, with Pantone, CMYK, HEX, and RGB being the most prevalent. While HEX and RGB are the standards for screen design, it’s vital to know their differences, especially when working with brands that appear in both digital and print formats.

Pantone: Use for Print

Pantone colors are specific ink mixtures that maintain the same hue worldwide. While you cannot print Pantone colors on a standard printer, official Pantone guides can serve as references. Professional printing services can apply these colors accurately, but they tend to be pricier, making them ideal for logos and branding elements, while CMYK is generally used for other print materials.

CMYK: Use for Print

The CMYK model combines cyan, magenta, yellow, and black (key) to create various print colors. These four colors are standard in both home printers and professional print shops.

RGB: Use for UI Design

The RGB system stands for red, green, and blue, which are emitted by screens, making them light-based rather than ink-based. The light spectrum encompasses a broader range than print, leading to inherent mismatches between print and screen colors. Nonetheless, harmonious palettes can still be achieved. In UI design, RGB values range from 0 to 255; for instance, RGB(255, 255, 255) represents white, while RGB(0, 0, 0) denotes black.

RGBA: Use for UI Design

RGBA extends RGB by adding an alpha channel that controls transparency, ranging from 0.0 (fully transparent) to 1.0 (fully opaque). For example, RGBA(255, 255, 255, 0.5) represents white with 50% opacity.

HEX: Use for UI Design

HEX is a convenient shorthand for RGB, providing the exact same color in a simpler format that is easy to share and implement. A HEX code consists of six digits prefixed by a hash, where the first two represent red, the next two green, and the last two blue.

Note: Print and screen colors will never be perfectly aligned due to their different creation processes; however, the key is to maintain harmony within each palette.

Converting Colors Between Print and Screen

When tasked with converting print colors for UI design, or vice versa, various online converters can assist. Among them, the official Pantone converter, using the Pantone Color Bridge, is particularly recommended. You can visit the Pantone color finder page for accurate conversions.

Once you enter HEX, RGB, or CMYK values, the tool will suggest matching Pantone colors, along with their associated values.

Tip: If you're converting from screen to print, it's wise to reference a physical Pantone swatch for accurate color matching.

How Many Colors Should Be Used in UI Design?

While there are no strict limitations in UI design, it's advisable to limit your color palette to two to three primary colors. Variations of these colors can be utilized, emphasizing the importance of color combinations over sheer quantity.

If you have a vibrant concept that requires many colors, feel free to deviate from conventional limits; rules are made to be broken.

How to Choose, Mix, and Match Colors in UI Design

If you have a knack for color selection and mixing, that's excellent! However, if you're uncertain, there are several techniques to assist you.

I believe that color associations, like blue being calming or red being vibrant, vary culturally. What truly matters is how you combine colors to evoke a mood. The RGB color wheel, divided into 12 segments (primary, secondary, and tertiary colors), can be a useful guide in your design software.

Monochromatic

Select a base color and then move towards the wheel's center to achieve beautiful shades. This method yields a subtle and refined appearance.

Analogous

This technique involves choosing colors adjacent to one another on the wheel. Ensure they fall within a 90-degree angle for optimal results. This approach adds dynamism while maintaining elegance.

Complementary

To achieve vibrancy, start with a base color and add its complementary color from the opposite side of the wheel. You can enhance this combination with monochromatic shades.

Split Complementary

For an even more vibrant palette, incorporate an analogous color alongside the complementary color, creating a Split Complementary scheme.

These foundational approaches will help you establish your color palette, and there are additional methods like triadic and tetradic that can be explored as you gain experience.

Experiment with Hue, Shade, Tint, and Tone

Once you've selected your colors, remember that you can still modify them to create depth. Understanding how to tweak colors is key—just avoid overdoing it.

• Hue: The pure color without modifications.
• Shade: A hue mixed with black.
• Tint: A hue mixed with white.
• Tone: A hue mixed with gray.

Utilizing Color Variants

To create more depth, experiment with color variants. You can adjust the hue manually or utilize tools like Material Design Color Palettes.

Note: The “P” on the palette indicates text legibility against a background color.

Input your HEX value to generate color variants. You can use as many or as few as necessary for your design—3 to 5 is typical, but up to 9 is also acceptable. Variants do not have to be adjacent; feel free to choose contrasts that suit your design aesthetic.

Color Shades Plugin for Figma

I recently found a useful Figma plugin called Color Shades, which generates all shades for your selected colors in your file.

Naming Colors Effectively

Once you’ve chosen your colors and variants, it’s essential to document them in a stylesheet or design system.

Avoid naming colors directly after their hue (e.g., red, blue). Instead, use descriptive names that can withstand future adjustments.

For example, label colors generically, such as “background” or “neutrals.” Then identify your primary and secondary colors, with the secondary typically serving as a highlight.

Naming Variants

Variants should derive from primary or secondary colors and typically are indicated by numbers. The Material Palette Tool creates these using increments of 100, though 10s can also work.

For the base color, I prefer using the value 500 and then create subsequent variants accordingly. Avoid naming them sequentially (1, 2, 3) to allow for future additions without confusion.

Don't forget to incorporate system colors for alerts, warnings, and confirmations—usually in red, orange, blue, and green. Adjust them to align with your brand, but keep the error color as red, always!

Adding an “On-Color” for Accessibility

Consider introducing an “on-color,” which refers to the color used atop another color, such as for typography or icons. This practice has two main benefits:

1. It encourages you to check for accessibility in color contrast. Utilize plugins or online contrast checkers, as you’re legally obligated to comply with WCAG accessibility standards.
2. If your secondary color is dark grey and you haven’t established an on-color, changing it to a bright blue could necessitate text color adjustments throughout your design. Keeping these elements distinct simplifies future updates.

Try it Yourself with Figma!

You can download a free color stylesheet in Figma [here](#) to get hands-on experience.

The 60-30-10 Rule for Color Distribution

The way colors are applied is just as important as the colors themselves. The 60-30-10 rule is a great guideline: use your base color for 60% of your design, your primary color for 30%, and your secondary color for 10%, typically for call-to-action elements.

This is more of a guideline than a strict measurement. Color can be interpreted as either a single hue or its variations. Experiment with this distribution, but ensure your call-to-action elements consistently stand out.

Thank You!

If you found this article helpful, visit me at moonlearning.io, where I provide video courses on UX/UI design. Don’t forget to subscribe to the newsletter and follow me here on Medium for more insights!