Colors

The Micro Focus color palette is what identifies its products as being part of the Micro Focus product family. This robust color palette is broken into six main sections of usage as seen below.

In an effort to meet accessibility standards, the tables below display the contrast ratios for content placed on a black or white background. These Web Content Accessibility Guidelines (WCAG) 2 apply to both content and text and more specific details for contrast ratios related to text are as follows:

  • Text that is 14pt or below must meet a 4.5:1 contrast ratio.
  • Text that is 14pt and bold or larger than 18pt must meet a 3:1 contrast ratio.
  • Contrast ratios also apply to text, non-text content, and images of text.
  • Non-text content must meet a 3:1 contrast ratio.

Primary Colors

The foundation of Micro Focusโ€™s products are comprised of these primary colors, and you can see them within interfaces and in components like buttons, text, forms, cards, and more.

The dominant color representing our identity is Micro Focusโ€™s brand blue, and itโ€™s apparent throughout all of our applications. In order to meet the W3C accessibility standards for on-screen experiences, we performed comprehensive research on the brand blue and slightly changed the shade to meet these accessibility guidelines. This W3C compliant brand blue can be used both as a background and as text when using either white or black as the opposite color.

Sample

Description

Token

Accessibility โ„น Text that is 14pt or below must meet a 4.5:1 contrast ratio. Text that is 14pt and bold or larger than 18pt must meet a 3:1 contrast ratio.
Black #000000 rgb(0,0,0)
$qtm-color__darkest
1 : 1
21 : 1
Dark Gray #323435 rgb(50,52,53)
$qtm-color__dark
1.6 : 1
13.15 : 1
White #FFFFFF rgb(255,255,255)
$qtm-color__light
21 : 1
1 : 1
Brand Blue (W3C) #0073E7 rgb(0,115,231)
$qtm-color__primary
4.64 : 1
4.52 : 1

Neutral Colors

The neutral colors are a ubiquitous element of our design system. These neutral shades can be used anywhere and fill the space between the colors. They give the primary and secondary palettes more impact and can be seen throughout product interfaces and in components like tables, labels, buttons, and many more components.

Sample

Description

Token

Accessibility โ„น Text that is 14pt or below must meet a 4.5:1 contrast ratio. Text that is 14pt and bold or larger than 18pt must meet a 3:1 contrast ratio.
Slightly Gray #F5F7F8 rgb(245,247,248)
$qtm-color__neutral-5
19.59 : 1
1.07 : 1
Bright Gray #F1F2F3 rgb(241,242,243)
$qtm-color__neutral-4
18.8 : 1
1.12 : 1
Gray #DCDEDF rgb(220,222,223)
$qtm-color__neutral-3
15.69 : 1
1.34 : 1
Silver #BDBEC0 rgb(189,190,192)
$qtm-color__neutral-2
11.46 : 1
1.83 : 1
Accessible Gray (W3C) #747577 rgb(116,117,119)
$qtm-color__neutral-1.5
4.6 : 1
4.57 : 1
Dim Gray #656668 rgb(101,102,104)
$qtm-color__neutral-1
3.66 : 1
5.74 : 1

Alternative Colors

The alternative colors complement the primary colors. Use them to add variety, differentiation, and to avoid interfaces with too many blues and greys.

Sample

Description

Token

Accessibility โ„น Text that is 14pt or below must meet a 4.5:1 contrast ratio. Text that is 14pt and bold or larger than 18pt must meet a 3:1 contrast ratio.
Aquamarine #2FD6C3 rgb(47,214,195)
$qtm-color__alternative-6
11.63 : 1
1.81 : 1
Aqua #29CEFF rgb(41,206,255)
$qtm-color__alternative-5
11.47 : 1
1.83 : 1
Cerulean #1668C1 rgb(22,104,193)
$qtm-color__alternative-4
3.79 : 1
5.54 : 1
Dark Blue #231CA5 rgb(35,28,165)
$qtm-color__alternative-3
1.72 : 1
12.22 : 1
Indigo #7425AD rgb(116,37,173)
$qtm-color__alternative-2
2.57 : 1
8.17 : 1
Fuchsia #C6179D rgb(198,23,157)
$qtm-color__alternative-1
4.01 : 1
5.24 : 1

Accent Colors

The accent colors are used to represent statuses like validations, errors, and other notifications.

Sample

Description

Token

Accessibility โ„น Text that is 14pt or below must meet a 4.5:1 contrast ratio. Text that is 14pt and bold or larger than 18pt must meet a 3:1 contrast ratio.
Yellow #FCDB1F rgb(252,219,31)
$qtm-color__accent-5
15.39 : 1
1.36 : 1
Crimson Negative #E5004C rgb(229,0,76)
$qtm-color__accent-4
4.46 : 1
4.71 : 1
Apricot #F48B34 rgb(244,139,52)
$qtm-color__accent-2
8.67 : 1
2.42 : 1
Green Positive #1AAC60 rgb(26,172,96)
$qtm-color__accent-1
7.21 : 1
2.91 : 1

Secondary Colors

The secondary colors are typically found in data visualizations, tags, and labels.

Sample

Description

Token

Accessibility โ„น Text that is 14pt or below must meet a 4.5:1 contrast ratio. Text that is 14pt and bold or larger than 18pt must meet a 3:1 contrast ratio.
Pale Eggplant #5216AC rgb(82,22,172)
$qtm-color__secondary-16
2.02 : 1
10.38 : 1
Purple #9B1E83 rgb(155,30,131)
$qtm-color__secondary-15
2.88 : 1
7.28 : 1
Goldenrod #FFB000 rgb(255,176,0)
$qtm-color__secondary-14
11.58 : 1
1.81 : 1
Olive #5BBA36 rgb(91,186,54)
$qtm-color__secondary-13
8.63 : 1
2.43 : 1
Emerald #00A989 rgb(0,169,137)
$qtm-color__secondary-12
7.15 : 1
2.94 : 1
Artic Blue #0B8EAC rgb(11,142,172)
$qtm-color__secondary-11
5.56 : 1
3.78 : 1
Steelblue #014272 rgb(1,66,114)
$qtm-color__secondary-10
1.98 : 1
10.62 : 1
Dark Ultramarine #271782 rgb(39,23,130)
$qtm-color__secondary-9
1.47 : 1
14.3 : 1
Pale Purple #BA47E2 rgb(186,71,226)
$qtm-color__secondary-8
5.09 : 1
4.13 : 1
Magenta #EB23C2 rgb(235,35,194)
$qtm-color__secondary-7
5.53 : 1
3.8 : 1
Orange #FFCE00 rgb(255,206,0)
$qtm-color__secondary-6
14.2 : 1
1.48 : 1
Lime #75DA4D rgb(117,218,77)
$qtm-color__secondary-5
12 : 1
1.75 : 1
Pale Green #1FFBBA rgb(31,251,186)
$qtm-color__secondary-4
15.58 : 1
1.35 : 1
Pale Aqua #43E4FF rgb(67,228,255)
$qtm-color__secondary-3
13.85 : 1
1.52 : 1
Skyblue #00ABF3 rgb(0,171,243)
$qtm-color__secondary-2
8.24 : 1
2.55 : 1
Ultramarine #3939C6 rgb(57,57,198)
$qtm-color__secondary-1
2.51 : 1
8.35 : 1

Secondary Accent Colors

The alternate status colors are used as an alternate when the accent colors do not allow for a good user experience.

Sample

Description

Token

Accessibility โ„น Text that is 14pt or below must meet a 4.5:1 contrast ratio. Text that is 14pt and bold or larger than 18pt must meet a 3:1 contrast ratio.
Plum #B21646 rgb(178,22,70)
$qtm-color__secondary-21
3.08 : 1
6.82 : 1
Copper #E57828 rgb(229,120,40)
$qtm-color__secondary-22
7.11 : 1
2.96 : 1
Amber #FFC002 rgb(255,192,2)
$qtm-color__secondary-23
12.91 : 1
1.63 : 1
Leaf Green #118C4F rgb(17,140,79)
$qtm-color__secondary-24
4.94 : 1
4.25 : 1
Red #FF454F rgb(255,69,79)
$qtm-color__secondary-17
6.17 : 1
3.4 : 1
Pale Amber #FFB24D rgb(255,178,77)
$qtm-color__secondary-18
11.84 : 1
1.77 : 1
Pale Lemon #FDE159 rgb(253,225,89)
$qtm-color__secondary-19
16.18 : 1
1.3 : 1
Pale Emerald #33C180 rgb(51,193,128)
$qtm-color__secondary-20
9.19 : 1
2.29 : 1
Questions? Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates