Color

Overview

Color helps create consistent experiences across web properties. Colors are available in two themes, light and dark.

Theme

The choice of which theme to apply is based on content and user experience needs.

Light theme

The light theme is the default theme. It is designed for simplicity and accessibility while allowing UI elements to be distinguished from each other.

Light color theme

Dark theme

The dark theme applies dark surface colors to UI elements. It can be used in tandem with the light theme or on its own.

Dark color theme

Brand

The primary brand color is red, it brings boldness and helps guide the eye or highlight important information.

Red

#E00

Crimson

#D40000

Examples

Light color theme heading
Light color theme calls to action
Dark color theme tabs
Dark color theme search

Learn more

To learn more about how the red color is used, visit the Brand standards page.

Neutrals

In addition to white and black, each theme features various shades of gray. Be mindful of accessibility when using text or components on top of shades of gray.

Light theme

White (primary BG)

#FFF

Secondary BGs

#F0F0F0

Tertiary BGs

#F5F5F5

Secondary gray

#D2D2D2

Tertiary gray

#B8BBBE

Dark theme

Black (primary BG)

#151515

Secondary BGs

#212427

Tertiary BGs

#3C3F42

Secondary gray

#6A6E73

Tertiary gray

#8A8D90

Text

Each theme features two shades of gray for text, Primary and Secondary.

Light theme

Primary text

#151515

Secondary text

#6A6E73

Examples

Light theme text
Light theme text

Dark theme

Primary text

#FFF

Secondary text

#D2D2D2

Examples

Dark theme text
Dark text

Learn more

To learn more about how to use text, visit the typography page.

Each theme features two shades of blue, one for Link and Focus states and one for Hover and Active states.

Light theme

Link/Focus

#06C

Focus background

#06C (10% opacity)

Hover/Active

#004080

Active background

#004080 (10% opacity)

Examples

Light theme links
Light theme links

Dark theme

Link/Focus

#73BCF7

Focus background

#73BCF7 (25% opacity)

Hover/Active

#BEE1F4

Active background

#BEE1F4 (25% opacity)

Examples

Dark theme links
Dark theme links CTAs

Alerts

Alert colors have assigned meanings and are used to set expectations. Use alert colors as a clear and predictable way to communicate a situation or the result of an interaction. Do not use alert colors for any other applications outside of the component.

Default

Background

#F2F9F9

Icon and top border

#009596

Text

#003737

Example

Default alert colors

Info

Background

#E7F1F4

Icon and top border

#2B9AF3

Text

#002952

Example

Info alert colors

Success

Background

#F3FAF2

Icon and top border

#3E8635

Text

#1E4F18

Example

Success alert colors

Warning

Background

#FDF7E7

Icon and top border

#F0AB00

Text

#795600

Example

Warning alert colors

Danger

Background

#FAEAE8

Icon and top border

#C9190B

Title

#470000

Example

Danger alert colors

Learn more

To learn more about how to use alerts, visit the Alert component page.

Accessibility

Contrast is important when choosing colors for UI elements for visitors. Awareness of standards and best practices is the key to an accessible color palette. We are committed to complying with the Web Content Accessibility Guidelines AA standard contrast ratios. We choose colors that support usability by ensuring sufficient color contrast between elements so that visitors with low vision can browse our web properties.

Text on backgrounds

Black text should be used on light backgrounds and vice versa. If a page features both light and dark themes, UI elements and text should be placed on contrasting background colors. Layouts with colored backgrounds or a photo changes the rules regarding the placement of text, so use white or black text for body copy applications.

Icons and symbols

Icons and other elements should be as visible as possible to indicate a function or communicate information. They require a contrast ratio of at least 4.5:1 per WCAG 2.2.

Feedback

To give feedback about anything on this page, contact us.

Foundations

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

© 2021-2023 Red Hat, Inc. Deploys by Netlify