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

Additional 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.
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
Indigo #7425AD rgb(116,37,173)
$color__indigo
2.57 : 1
8.17 : 1
Mauve #D5ADFD rgb(213,173,253)
$color__mauve
11.37 : 1
1.85 : 1
Pale Purple #BA47E2 rgb(186,71,226)
$color__pale-purple
5.09 : 1
4.13 : 1
Purple #9B1E83 rgb(155,30,131)
$color_purple
2.88 : 1
7.28 : 1
Fuchsia #C6179D rgb(198,23,157)
$color_fuchsia
4.01 : 1
5.24 : 1
Taffy #E967CB rgb(233,103,203)
$color__taffy
7.31 : 1
2.87 : 1
Magenta #EB23C2 rgb(235,35,194)
$color_magenta
5.53 : 1
3.8 : 1
Neon Pink #EF187F rgb(239,24,127)
$color_neon-pink
5.08 : 1
4.14 : 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

Status Colors

The status 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.
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 Colors

These colors are used in systems with items that need severity differentiation or can also be used as an alternate when the status 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.
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
Questions? Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates