Colors

Last updated Sep 03, 2019

Our color system is designed for rapid consumption—legible content, predictable indicators, and clear hierarchy. Our palettes are a subset of the VMware Clarity system.

Clarity Colors

Base palettes

Our base palettes contain named definitions for each hex code in the library, grouped by color family.

Amarillo

#FFDC0B

Amarillo1

#C47D00

Amarillo2

#D28F00

Amarillo3

#DFA100

Amarillo4

#EDB200

Amarillo5

#FAC400

Amarillo6

#FDD006

Amarillo7

#FFE860

Amarillo8

#FEF3BF

Amarillo9

#FFFCE8

Bubblegum

#F1428A

Bubblegum1

#9B0D54

Bubblegum2

#B0105B

Bubblegum3

#C41261

Bubblegum4

#D91468

Bubblegum5

#ED186F

Bubblegum6

#F46CA5

Bubblegum7

#F897BF

Bubblegum8

#FBC1DA

Bubblegum9

#FFEBF5

Charcoal1

#1B1B1B

Charcoal2

#1C1C1E

Charcoal3

#282829

Charcoal4

#3A3A3C

Coal1

#121212

Coal2

#222222

Coal3

#272727

Coal4

#2C2C2C

Coal5

#333333

Coal6

#383838

Cyan

#00B7D6

Cyan1

#004A70

Cyan2

#005680

Cyan3

#006690

Cyan4

#0081A7

Cyan5

#009CBF

Cyan6

#36C9E1

Cyan7

#6DDBEB

Cyan8

#A3EDF6

Cyan9

#CCFBFF

Denim

#0065AB

Denim1

#003D79

Denim2

#004D8A

Denim3

#0079B8

Denim4

#0095D3

Denim5

#49AFD9

Denim6

#89CBDF

Denim7

#A6D8E7

Denim8

#C5E5EF

Denim9

#E1F1F6

Habanero

#F52F22

Habanero1

#A32100

Habanero2

#C92100

Habanero3

#E12200

Habanero4

#F54F47

Habanero5

#F76F6C

Habanero6

#F89997

Habanero7

#F8B7B6

Habanero8

#F5DBD9

Habanero9

#FFF0EE

Lava

#EE4A08

Lava1

#CD3517

Lava2

#DE400F

Lava3

#FF5500

Lava4

#FF681C

Lava5

#FF8142

Lava6

#FF9A69

Lava7

#FFB38F

Lava8

#FFCCB5

Lava9

#FFE5DC

Obsidian

#61717D

Obsidian1

#25333D

Obsidian2

#314351

Obsidian3

#495A67

Obsidian4

#798893

Obsidian5

#919FA8

Obsidian6

#A9B6BE

Obsidian7

#C1CDD4

Obsidian8

#D9E4EA

Obsidian9

#F3F6FA

Pine

#48960C

Pine1

#1D5100

Pine2

#266900

Pine3

#2F8400

Pine4

#62A420

Pine5

#60B515

Pine6

#85C81A

Pine7

#AADB1E

Pine8

#C7E59C

Pine9

#DFF0D0

Slate

#737373

Slate1

#313131

Slate2

#444444

Slate3

#565656

Slate4

#9A9A9A

Slate5

#CCCCCC

Slate6

#DDDDDD

Slate7

#EEEEEE

Slate8

#F2F2F2

Slate9

#FAFAFA

Tangerine

#F57600

Tangerine1

#AA4500

Tangerine2

#C25400

Tangerine3

#D36000

Tangerine4

#E46C00

Tangerine5

#FF8400

Tangerine6

#FF9C32

Tangerine7

#FFB565

Tangerine8

#FFCD97

Tangerine9

#FFE5C9

Teal

#00968B

Teal1

#006668

Teal2

#007E7A

Teal3

#00AB9A

Teal4

#00BFA9

Teal5

#00D4B8

Teal6

#38DFC8

Teal7

#6FEAD9

Teal8

#A7F4E9

Teal9

#DEFFF9

Ultramarine

#343DAC

Ultramarine1

#0F1E82

Ultramarine2

#1A23A0

Ultramarine3

#4E56B8

Ultramarine4

#6870C4

Ultramarine5

#838ACF

Ultramarine6

#9DA3DB

Ultramarine7

#B7BDE7

Ultramarine8

#D1D6F3

Ultramarine9

#EBF0FF

Violet

#781DA0

Violet1

#4D007A

Violet2

#660092

Violet3

#8939AD

Violet4

#9B56BB

Violet5

#AD73C8

Violet6

#BE90D6

Violet7

#D0ACE4

Violet8

#E1C9F1

Violet9

#F3E6FF

Wolf

#80746D

Wolf1

#5B4D47

Wolf2

#6C5F59

Wolf3

#948981

Wolf4

#A89E95

Wolf5

#BBB3A9

Wolf6

#CFC8BD

Wolf7

#E3DDD1

Wolf8

#F4F1E6

Wolf9

#FAF9F5

Black

#000000

White

#ffffff

Semantic colors

These colors are named according to the type of element or use case they represent, regardless of whether they are on iOS or Android, and have base values for both light and dark mode. Please note our recommendations for using Semantic colors:

All Vision components should eventually use colors from this list.
This system is a good starting point for apps to implement light and dark mode, but they are free to override if there is a valid use case. For interactive elements that are brandable we have provided defaults which should be overridden.

Backgrounds

Background / Bar Top

Use branding if available

Background for top navigation bar

iOS

Android

White

Coal3

White

Charcoal1

Background / Bar Bottom

Use branding if available

Background for bottom navigation and toolbars

iOS

Android

White

Coal3

White

Charcoal1

Background / SideNav

Use branding if available

Background for side drawer

iOS

Android

White

Coal3

White

Charcoal3

Background / Window

Use branding if available

Default background on top of which other content goes

iOS

Android

Slate8

Coal1

Slate8

Black

Background / Collection

Use branding if available

Background behind any collection views

iOS

Android

Slate8

Coal2

Slate8

Black

Background / Dialog

Use branding if available

Background for modals/popups

iOS

Android

White

Coal4

White

Charcoal3

Background / Collection Item

Use branding if available

Background for cells that are in a list or collection

iOS

Android

White

Coal2

White

Charcoal2

Background / Empty Content

Use branding if available

Background for screens that have empty states

iOS

Android

Slate8

Coal1

Slate8

Black

Background / Surface

Use branding if available

Any screens where content doesn't need to pop out

iOS

Android

White

Coal1

White

Black

Text

Text / Primary

Use app branding if available

Text that is used as a heading

iOS

Android

Black

White

Black

White

Text / Secondary

Use app branding if available

Text that is used as a subhead or in the body

iOS

Android

Obsidian2

Slate5

Obsidian2

Obsidian6

Text / Tertiary

Use app branding if available

Text that is used as a caption or metadata

iOS

Android

Obsidian4

Slate4

Obsidian4

Text / Negative

Use app branding if available

Text used to communicate errors

iOS

Android

Habanero3

Habanero4

Habanero3

Habanero4

Text / Disabled

Use app branding if available

Text that is inactive

iOS

Android

Obsidian4

Slate4

Obsidian4

Obsidian2

Text / Action

Use app branding if available

Text that is interactive

iOS

Android

Denim3

Denim4

Denim3

Denim4

Actions

Action / Neutral

Use app branding if available

Standard actionable element

iOS

Android

Obsidian2

Obsidian8

Obsidian2

Obsidian8

Action / Positive

Use app branding if available

Action associate with something positive

iOS

Android

Denim3

Denim4

Denim3

Denim4

Action / Negative

Use app branding if available

Action associated with something negative

iOS

Android

Habanero3

Habanero4

Habanero3

Habanero4

Action / Disabled

Use app branding if available

Action that is presently inactive

iOS

Android

Obsidian4

Slate4

Obsidian4

Icons

Icon / Primary

Use app branding if available

If there are multiple icons on the page this needs more attention

iOS

Android

Obsidian2

Slate6

Obsidian2

Obsidian6

Icon / Secondary

Use app branding if available

If there are multiple icons on the page this is of lower importance

iOS

Android

Obsidian4

Slate4

Obsidian4

Icon / Disabled

Use app branding if available

Icons that have inactive actions

iOS

Android

Obsidian6

Slate3

Obsidian6

Slate1

Status

Status / Positive

Use branding if available

Any element that indicates a positive status

iOS

Android

Pine3

Pine4

Pine3

Pine4

Status / Negative

Use branding if available

Any element that indicates a negative status

iOS

Android

Habanero3

Habanero4

Habanero3

Habanero4

Status / Neutral

Use branding if available

Any element that indicates a neutral status (relative to other elements)

iOS

Android

Amarillo1

Amarillo4

Amarillo1

Amarillo4

Dividers

Divider / Primary

Use branding if available

Lines that separate sections or items

iOS

Android

Obsidian8

Coal5

Obsidian8

Charcoal4

Styles

Components

Base palettes

Semantic colors

Backgrounds

Text

Actions

Icons

Status

Dividers

Accessibility