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)
$color__darkest
1 : 1
21 : 1
White #FFFFFF rgb(255,255,255)
$color__light
21 : 1
1 : 1
Brand Blue (W3C) #0073E7 rgb(0,115,231)
$color__primary
4.64 : 1
4.52 : 1

Grayscale

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

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.
95 #1C1D1E rgb(28,29,30)
$color__neutral-95
1.17 : 1
18.01 : 1
90 #323435 rgb(50,52,53)
$color__neutral-90
1.6 : 1
13.15 : 1
80 #4C4E50 rgb(76,78,80)
$color__neutral-80
2.47 : 1
8.52 : 1
75 #656668 rgb(101,102,104)
$color__neutral-75
3.66 : 1
5.74 : 1
70 #747577 rgb(116,117,119)
$color__neutral-70
4.6 : 1
4.57 : 1
60 #8A8D8F rgb(138,141,143)
$color__neutral-60
6.39 : 1
3.29 : 1
50 #A3A5A8 rgb(163,165,168)
$color__neutral-50
8.65 : 1
2.43 : 1
40 #BDBEC0 rgb(189,190,192)
$color__neutral-40
11.46 : 1
1.83 : 1
30 #CFD0D1 rgb(207,208,209)
$color__neutral-30
13.76 : 1
1.53 : 1
25 #DCDEDF rgb(220,222,223)
$color__neutral-25
15.69 : 1
1.34 : 1
20 #E8EAEB rgb(232,234,235)
$color__neutral-20
17.5 : 1
1.2 : 1
10 #F1F2F3 rgb(241,242,243)
$color__neutral-10
18.8 : 1
1.12 : 1
05 #FAFAFA rgb(250,250,250)
$color__neutral-05
20.15 : 1
1.04 : 1

Status

Used to represent statuses like validations or errors, and for notifications or alerts.

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.
Information #0064CA rgb(0,100,202)
$color__status-info
3.69 : 1
5.69 : 1
Error #E5004C rgb(229,0,76)
$color__status-error
4.46 : 1
4.71 : 1
Warning #FFC002 rgb(255,192,2)
$color__status-warning
12.91 : 1
1.63 : 1
Normal / Success #1AAC60 rgb(26,172,96)
$color__status-success
7.21 : 1
2.91 : 1

Severity

Supplementary colors that can be used to display severity levels, conditions, or requirements of different items throughout the interface.

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.
Severity none #35434D rgb(53,67,77)
$color__severity-none
1.99 : 1
10.53 : 1
Unknown severity #8C26D6 rgb(140,38,214)
$color__severity-unknown
3.34 : 1
6.3 : 1
Warning severity #008EFC rgb(0,142,252)
$color__severity-warning
6.35 : 1
3.31 : 1
Critical severity #E30901 rgb(227,9,1)
$color__severity-critical
4.3 : 1
4.88 : 1
Major severity #F48B34 rgb(244,139,52)
$color__severity-major
8.67 : 1
2.42 : 1
Minor severity #FCDB1F rgb(252,219,31)
$color__severity-minor
15.39 : 1
1.36 : 1
Normal severity #008535 rgb(0,133,53)
$color__severity-normal
4.46 : 1
4.71 : 1

Additional Colors

Set of additional colors that complement the primary colors. Use them to add variety, differentiation, and to avoid interfaces with too many blues and grays. They are typically found in data visualizations, tags, labels, illustrations, etc.

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.
Cool Gray #737582 rgb(115,117,130)
$color__cool-gray
4.64 : 1
4.52 : 1
Warm Gray #787573 rgb(120,117,115)
$color__warm-gray
4.64 : 1
4.53 : 1
Champagne #FCE7A6 rgb(252,231,166)
$color_champagne
17.21 : 1
1.22 : 1
Khaki #E9C699 rgb(233,198,153)
$color_khaki
13.15 : 1
1.6 : 1
Camel #B18953 rgb(177,137,83)
$color_camel
6.67 : 1
3.15 : 1
Golden Brown #8F6400 rgb(143,100,0)
$color_golden-brown
4.02 : 1
5.23 : 1
Ochre #C06F00 rgb(192,111,0)
$color_ochre
5.57 : 1
3.77 : 1
Copper #E57828 rgb(229,120,40)
$color_copper
7.11 : 1
2.96 : 1
Orange Juice #FF8000 rgb(255,128,0)
$color__orange-juice
8.39 : 1
2.5 : 1
Pale Amber #FFB24D rgb(255,178,77)
$color_pale-amber
11.84 : 1
1.77 : 1
Goldenrod #FFB000 rgb(255,176,0)
$color_goldenrod
11.58 : 1
1.81 : 1
Orange #FFCE00 rgb(255,206,0)
$color_orange
14.2 : 1
1.48 : 1
Yellow #FCDB1F rgb(252,219,31)
$color_yellow
15.39 : 1
1.36 : 1
Pale Lemon #FDE159 rgb(253,225,89)
$color_pale-lemon
16.18 : 1
1.3 : 1
Canary Yellow #FFF200 rgb(255,242,0)
$color__canary-yellow
18 : 1
1.17 : 1
Yellow Green #F0FE94 rgb(240,254,148)
$color_yellow-green
19.34 : 1
1.09 : 1
Citron #DBE599 rgb(219,229,153)
$color__citron
15.8 : 1
1.33 : 1
Acid Green #C9CC29 rgb(201,204,41)
$color_acid-green
12.3 : 1
1.71 : 1
Olive Oil #A79425 rgb(167,148,37)
$color__oilve-oil
7.02 : 1
2.99 : 1
Dark Olive #766A23 rgb(118,106,35)
$color_dark-olive
3.87 : 1
5.42 : 1
Avocado #809900 rgb(128,153,0)
$color__avocado
6.58 : 1
3.19 : 1
Dark Green #576B1A rgb(87,107,26)
$color__dark-green
3.53 : 1
5.96 : 1
Leaf Green #05854F rgb(5,133,79)
$color_leaf-green
4.53 : 1
4.64 : 1
Olive #5BBA36 rgb(91,186,54)
$color_olive
8.63 : 1
2.43 : 1
Lime #75DA4D rgb(117,218,77)
$color_lime
12 : 1
1.75 : 1
Mint #84E0B6 rgb(132,224,182)
$color__mint
13.44 : 1
1.56 : 1
Sea Green #078374 rgb(7,131,116)
$color__sea-green
4.56 : 1
4.6 : 1
Emerald #00A989 rgb(0,169,137)
$color_emerald
7.15 : 1
2.94 : 1
Pale Emerald #33C180 rgb(51,193,128)
$color_pale-emerald
9.19 : 1
2.29 : 1
Pale Green #1FFBBA rgb(31,251,186)
$color_pale-green
15.58 : 1
1.35 : 1
Aquamarine #2FD6C3 rgb(47,214,195)
$color_aquamarine
11.63 : 1
1.81 : 1
Light Cyan #B8F5F8 rgb(184,245,248)
$color__light-cyan
17.53 : 1
1.2 : 1
Pale Aqua #43E4FF rgb(67,228,255)
$color_pale-aqua
13.85 : 1
1.52 : 1
Aqua #29CEFF rgb(41,206,255)
$color_aqua
11.47 : 1
1.83 : 1
Pacific Blue #1FB8DB rgb(31,184,219)
$color__pacific-blue
9.05 : 1
2.32 : 1
Arctic Blue #0B8EAC rgb(11,142,172)
$color_arctic-blue
5.56 : 1
3.78 : 1
Sapphire #0974A9 rgb(9,116,169)
$color__sapphire
4.12 : 1
5.1 : 1
Steelblue #014272 rgb(1,66,114)
$color_steelblue
1.98 : 1
10.62 : 1
Light Blue #9EDBFA rgb(158,219,250)
$color__light-blue
14.1 : 1
1.49 : 1
Sky Blue #00ABF3 rgb(0,171,243)
$color_sky-blue
8.24 : 1
2.55 : 1
Cerulean #1668C1 rgb(22,104,193)
$color_cerulean
3.79 : 1
5.54 : 1
Dark Ultramarine #271782 rgb(39,23,130)
$color_dark-ultramarine
1.47 : 1
14.3 : 1
Dark Blue #231CA5 rgb(35,28,165)
$color_dark-blue
1.72 : 1
12.22 : 1
Ultramarine #3939C6 rgb(57,57,198)
$color_ultramarine
2.51 : 1
8.35 : 1
Iris #6055F1 rgb(96,85,241)
$color__iris
4.05 : 1
5.19 : 1
Violet #5540BF rgb(85,64,191)
$color__violet
2.83 : 1
7.43 : 1
Pale Eggplant #5216AC rgb(82,22,172)
$color_pale-eggplant
2.02 : 1
10.38 : 1
Hot Pink #FF62AD rgb(255,98,173)
$color_hot-pink
7.61 : 1
2.76 : 1
Barbie Pink #E56DA7 rgb(229,109,167)
$color__barbie-pink
7.13 : 1
2.95 : 1
Bubble Gum #FFA1CE rgb(255,161,206)
$color_bubble-gum
11.36 : 1
1.85 : 1
Carnation Pink #FCCAD0 rgb(252,202,208)
$color__carnation-pink
14.63 : 1
1.44 : 1
Salmon Pink #FFA0AD rgb(255,160,173)
$color_salmon-pink
11 : 1
1.91 : 1
Flamingo #F37787 rgb(243,119,135)
$color__flamingo
7.86 : 1
2.67 : 1
Salmon Red #FF4B63 rgb(255,75,99)
$color_salmon-red
6.4 : 1
3.28 : 1
Red #FF454F rgb(255,69,79)
$color_red
6.17 : 1
3.4 : 1
Cherry Red #D7235A rgb(215,35,90)
$color__cherry-red
4.25 : 1
4.94 : 1
Plum #B21646 rgb(178,22,70)
$color_plum
3.08 : 1
6.82 : 1

Drop us a line

helloux@microfocus.com

© Copyright 2021 Micro Focus or one of its affiliates

Contribute  |  Updates