Color

When we create something that’s unmistakably Red Hat, we stick to our core colors—the colors that are in our logo and are most closely associated with our brand. Tints and shades of red and neutral grays provide flexibility for creating depth and shadows.

Our secondary palette adds energy and complements Red Hat red without competing with it. Stick to 1 or 2 secondary colors in addition to Red Hat red for more impact. 

To add depth and richness, we use subtle gradients for background fills and accents. They should never be the main focus of the composition—they should enhance, not overtake.

To make choosing colors that work together easier, we’ve built color collections that combine colors across the palettes in different ways. For every project, start with one of these collections.

Don't use colors outside of the Red Hat color palette.

Don't flood everything with Red Hat red (red-50). Red is a strong color. Use it to add pops of color.

Don't use more than 2 secondary colors in one visual. The fewer colors, the better.

Don't forget to use Red Hat red (red-50). Everything from Red Hat should include red-50.

Don't use colors that aren't accessible. Always check the contrast ratio of text and other elements against the background color.

Avoid overusing gradients. Use gradients to add subtle depth and richness.

In addition to our core and secondary colors, we have 2 auxiliary color palettes that can be used when necessary. These colors should only be used for their intended purposes, not as secondary colors.

The information palette is reserved for statuses and interactivity. It’s utilitarian, not decorative. Use these colors in interfaces, web pages, graphs and diagrams, reports, and other informative visuals.

Our goal is always to represent people as they are in real life. These colors should only be used as skin tones for illustrated people. For each illustrated person, choose 1 skin tone family. Learn more about illustrating people.

Color can quickly communicate a message or data point. We rely on commonly-understood color associations in user interfaces as well as slide decks, infographics, and diagrams to create consistency across the customer journey.

These are the colors we use to represent and build recognition for the Red Hat brand.

These colors are utilitarian. They should only be used for their intended purposes, not for decorative visuals.

Skin tone families are described differently from traditional color associations: cool tones lean towards pinks, while warm tones lean toward yellows and browns. Learn more about illustrating people.

People with color blindness don’t perceive differences in color the way that most people do, which can make it hard to understand information distinguished solely by color, especially in graphs or interfaces. The most common forms of color blindness are red-green color vision deficiency (deuteranopia or protanopia) and blue-yellow color vision deficiency (tritanopia).

When you rely on color alone to convey meaning, people with color blindness may not understand your visuals. Instead, use text or icons in addition to color and choose colors with various levels of saturation to differentiate things. Use a tool like Color Oracle to simulate how your visual might look to someone with color blindness.

Use labels in addition to colors to identify distinct sections of diagrams, charts, and interfaces.

Don't rely on color alone. A person with color blindness might not be able to tell the colors apart, making it impossible for them to discern the information.

Saturated hues that are similar in intensity can vibrate when used together, creating fuzziness around the edges like a glowing blur. These colors can be difficult for anyone to look at and distinguish, and even painful for those with vision differences.

Combine bright colors with less saturated and neutral colors.

Don’t use colors with similar intensity in the same area.