Color

Overview Usage Accessibility
  1. Using color
  2. Best practices
  3. Resources
  1. Using color
  2. Best practices
  3. Resources

Using color

Our color palette is designed to work across all digital properties, from websites to applications to ads and more. To view our colors as design tokens, go to the Tokens section. If you have questions about how to apply the color palette, contact us.

Brand red

Our primary brand color is red. It is important to use it consistently and thoughtfully to maximize accessibility and build brand recognition. Red is a strong color; use it as an accent instead of filling large areas. If you need a color for danger or error states, use red-orange. To learn more about our Red Hat red color, go to the Brand standards website.

Usage warning

Do not apply the Red Hat red color to text in dark environments unless it meets WCAG 2.1 AA requirements.

spectrum of brand red shades with examples of brand red being used

Canvas

A canvas is a background color and it determines what theme is used. The default canvas colors are white and black, but there might be situations where grays or even custom colors are needed. It is acceptable to use other colors as long as contrast is maintained throughout the entire design. If a custom canvas color is lighter or darker than the defaults, white or black may be used as surface colors.

swatches of the default canvas colors for dark and light theme and examples of custom canvas colors

Surface

A surface is a container background color that sits on top of a canvas. Surface colors are used as backgrounds for elements, patterns, and large sections. For example, a card (white surface) can be placed in a section (light gray surface) on a canvas (white).

swatches of the default surface colors for dark and light theme and examples of a card in a section with a card

Layering Beta

Layering is the relationship between the canvas color and surface colors as well as how they stack to create depth and separate content.

Update from the team

The design system team is working on creating best practices for layering in the near future. Contact us if you would like to contribute.

Light theme

In the light theme, white and gray values alternate when stacked.

A light gray card in a larger, white card, which sits in a light gray section

Dark theme

In the dark theme, gray values should get one step lighter when stacked.

A dark gray card in a larger, darker gray card, which sits in an even dark gray section

Text

Text may be different colors depending on content, hierarchy, and theme. Our accessible colors help promote text legibility and readability. These are general usage guidelines; there may be other situations not represented.

  1. Custom - use to represent a temporary campaign or custom design
  2. Brand - use to communicate our brand or add a brand accent
  3. Primary - use for large text including headlines and body text as well as small link text in dark environments (white)
  4. Secondary - use for small text including annotations, captions, and footnotes
  5. Links - use for small or large text that is linked
  6. Interactive - use for styled text within calls to action, buttons, or other interactive elements
  7. Status - use for text that needs to communicate a particular status

Usage Warning

Do not apply the Red Hat red color to text in dark environments unless it meets WCAG 2.1 AA requirements.

Dark and light theme examples of the seven types of semantic colors used by text

Icons

Icons may be different colors depending on usage and theme. There are three categories of icons: Brand, Technology, and UI.

  1. Brand - monochromatic and usually red, black, or white
  2. Technology - always black, gray, red, and white
  3. UI - may be different colors depending on how they are used within an element or pattern

To learn more about icons, go to the Brand standards website.

Examples of the three icon categories

Interactivity

Certain colors are used to indicate that something is interactive.

  1. Blue - use for inline links, Default calls to action, or Primary button surfaces
  2. Purple - use for visited inline links
  3. Gray - use for secondary or small links (using white is also acceptable in dark environments)
  4. Red-orange - use for destructive actions (and errors)
  5. Red - use sparingly for Primary calls to action only
Examples of elements using the five colors that denote interactivity

Status

Status colors have assigned meanings and communicate information, states, or actions. Status colors are commonly used in elements and patterns like alerts, badges, buttons, forms, and toasts.

Usage Warning

The red-orange color is reserved for danger or error states. Do not use it anywhere else.

Status Severity level Use case
Info N/A Use purple to communicate helpful or important information.
Note: "Info" was previously called "note/tip."
Success 0 Use green to communicate a success state.
Neutral 0 Use gray to communicate information that will have no impact on a user.
Warning 1 Use yellow to communicate that a destructive action might occur if an issue is not resolved.
Caution 2 Use orange to communicate that an issue can be avoided.
Danger 3 Use red-orange to communicate a destructive action or critical error.
Alerts, a form field, and tags that use status colors

Best practices

The design system's guidelines and best practices are more than just suggestions. By following them scrupulously, you will ensure that your project aligns with branding and accessibility guidelines. Diverge from the guidelines only after significant planning and consideration.

Custom themes

Most projects do not need elements and patterns in a custom theme. If you need a custom theme for a campaign or special project, contact the Brand team first. If you need one or more custom design tokens, contact the Design system team first.

Blue submit button, blue default call to action, black tooltip, and blue switch

Use the color variants already available for elements and patterns.

Magenta button, brand red default call to action, green tooltip, and dark orange switch

Do not create your own colors, design tokens, or change the colors of existing elements and patterns.

Sufficient contrast

Using colors with the same hue, saturation, and lightness is acceptable, but do not put them near or on top of each other as doing so will cause vibration resulting in a poor user experience. If you have a large section of color or an image background with low contrast, consider using elements and patterns from the desaturated theme instead.

Examples of a blue button against a light gray background and a red CTA against a black background

Use a surface color token for background to ensure accessibility, or use a tool to check proper contrast.

Examples of a blue button against a red background and a red CTA against a blue background

Do not use a background color that has a similar hue, saturation, or lightness to foreground elements.

Resources

Foundations

To learn how to use our other foundations in your designs, visit the foundations section.