Color

Maintaining consistent and engaging digital interfaces throughout Zoom, whether applications or experiences, demands extended guidance around color usage.

Brand Colors
Evergreen (Primary)
Phantom Grey (Base)
Usage
Used for Primary Actions, Link and Inputs (Focus, Select Highlights, Checkbox, Radio button Toggle)
Color
Name
HEX
HSB
​
 
Evergreen 01
#E6FFEA
H130 S10 B100
​
 
Evergreen 02
#B9FAC2
H128 S26 B98
​
 
Evergreen 03
#8BF095
H126 S42 B94
​
 
Evergreen 04
#55E05F
H124 S62 B88
​
 
Evergreen 05
#28C72D
H122 S80 B78
​
 
Evergreen 06
#10A310
H120 S90 B64
​
 
Evergreen 07
#0B7A07
H118 S94 B48
​
 
Evergreen 08
#0C5906
H116 S93 B35
​
 
Evergreen 09
#0D4207
H114 S90 B26
​
 
Evergreen 10
#0D4207
H112 S84 B18
Usage
Used for Text & BGs
Color
Name
HEX
HSB
​
 
Ash Grey 01
#F5F5F5
H0 S0 B96
​
 
Ash Grey 02
#E0E0E0
H0 S0 B88
​
 
Ash Grey 03
#C7C7C7
H0 S0 B78
​
 
Ash Grey 04
#A8A8A8
H0 S0 B66
​
 
Ash Grey 05
#858585
H0 S0 B52
​
 
Ash Grey 06
#666666
H0 S0 B40
​
 
Ash Grey 07
#4D4D4D
H0 S0 B30
​
 
Ash Grey 08
#383838
H0 S0 B22
​
 
Ash Grey 09
#292929
H0 S0 B16
​
 
Ash Grey 10
#1F1F1F
H0 S0 B12
Secondary Colors
Midnight Blue (Info)
Fire Red (Error)
Sunrise Yellow (Warning)
Usage
Used as complementary  color with Phantom Grey
Color
Name
HEX
HSB
​
 
Midnight Blue 01
#F0F4FF
H224 S6 B100
​
 
Midnight Blue 02
#D7E0FA
H225 S14 B98
​
 
Midnight Blue 03
#B8C6F2
H226 S24 B95
​
 
Midnight Blue 04
#93A3E6
H228 S36 B90
​
 
Midnight Blue 05
#6F81D6
H230 S48 B84
​
 
Midnight Blue 06
#5160C2
H232 S58 B76
​
 
Midnight Blue 07
#3B46AD
H234 S66 B68
​
 
Midnight Blue 08
#282F8F
H236 S72 B56
​
 
Midnight Blue 09
#1F2166
H238 S70 B40
​
 
Midnight Blue 10
#1B1B47
H240 S62 B28
Usage
Used in Error Text & BGs
Color
Name
HEX
HSBA
​
 
Fire Red 01
#FFF3F0
H12 S6 B100
​
 
Fire Red 02
#FFD3CC
H8 S20 B100
​
 
Fire Red 03
#FCAFA7
H6 S34 B99
​
 
Fire Red 04
#F7847C
H4 S50 B97
​
 
Fire Red 05
#F05651
H2 S66 B94
​
 
Fire Red 06
#E02D2D
H360 S80 B88
​
 
Fire Red 07
#D11111
H360 S92 B82
​
 
Fire Red 08
#B30000
H360 S100 B70
​
 
Fire Red 09
#850303
H360 S98 B52
​
 
Fire Red 10
#520A0A
H360 S88 B32
Usage
Used for Warning BG & Text
Color
Name
HEX
HSB
​
 
Sunrise Yellow 01
#FFF5DB
H43 S14 B100
​
 
Sunrise Yellow 02
#FCE1A2
H42 S36 B99
​
 
Sunrise Yellow 03
#F5C567
H40 S58 B96
​
 
Sunrise Yellow 04
#E09F2D
H38 S80 B88
​
 
Sunrise Yellow 05
#C77C0C
H36 S94 B78
​
 
Sunrise Yellow 06
#A35C00
H34 S100 B64
​
 
Sunrise Yellow 07
#804400
H32 S100 B50
​
 
Sunrise Yellow 08
#592F05
H30 S94 B35
​
 
Sunrise Yellow 09
#42240A
H28 S85 B26
​
 
Sunrise Yellow 10
#2E1A0A
H27 S78 B18
Shades
  Black & White
Color
Name
HEX
HSB
​
 
White
#FFFFFF
H0 S0 B100
​
 
Black
#000000
H0 S0 B0
🧑🏻‍💻 Usage Guidelines
Color Palette
🍎iOS
🤖Android
open class ZColor {
    open class var phantomgrey01: UIColor {
        return UIColor(white: 245.0 / 255.0, alpha: 1.0)
    }
    
    open class var phantomgrey02: UIColor {
        return UIColor(white: 224.0 / 255.0, alpha: 1.0)
    }
    
    open class var phantomgrey03: UIColor {
        return UIColor(white: 199.0 / 255.0, alpha: 1.0)
    }
    
    open class var phantomgrey04: UIColor {
        return UIColor(white: 168.0 / 255.0, alpha: 1.0)
    }
    
    open class var phantomgrey05: UIColor {
        return UIColor(white: 133.0 / 255.0, alpha: 1.0)
    }
    
    open class var phantomgrey06: UIColor {
        return UIColor(white: 102.0 / 255.0, alpha: 1.0)
    }
    
    open class var phantomgrey07: UIColor {
        return UIColor(white: 77.0 / 255.0, alpha: 1.0)
    }
    
    open class var phantomgrey08: UIColor {
        return UIColor(white: 56.0 / 255.0, alpha: 1.0)
    }
    
    open class var phantomgrey09: UIColor {
        return UIColor(white: 41.0 / 255.0, alpha: 1.0)
    }
    
    open class var phantomgrey10: UIColor {
        return UIColor(white: 31.0 / 255.0, alpha: 1.0)
    }
    
    open class var evergreen01: UIColor {
        return UIColor(red: 230.0 / 255.0, green: 1.0, blue: 234.0 / 255.0, alpha: 1.0)
    }
    
    open class var evergreen02: UIColor {
        return UIColor(red: 185.0 / 255.0, green: 250.0 / 255.0, blue: 194.0 / 255.0, alpha: 1.0)
    }
    
    open class var evergreen03: UIColor {
        return UIColor(red: 139.0 / 255.0, green: 240.0 / 255.0, blue: 149.0 / 255.0, alpha: 1.0)
    }
    
    open class var evergreen04: UIColor {
        return UIColor(red: 85.0 / 255.0, green: 224.0 / 255.0, blue: 95.0 / 255.0, alpha: 1.0)
    }
    
    open class var evergreen05: UIColor {
        return UIColor(red: 40.0 / 255.0, green: 199.0 / 255.0, blue: 45.0 / 255.0, alpha: 1.0)
    }
    
    open class var evergreen06: UIColor {
        return UIColor(red: 16.0 / 255.0, green: 163.0 / 255.0, blue: 16.0 / 255.0, alpha: 1.0)
    }
    
    open class var evergreen07: UIColor {
        return UIColor(red: 11.0 / 255.0, green: 122.0 / 255.0, blue: 7.0 / 255.0, alpha: 1.0)
    }
    
    open class var evergreen08: UIColor {
        return UIColor(red: 12.0 / 255.0, green: 89.0 / 255.0, blue: 6.0 / 255.0, alpha: 1.0)
    }
    
    open class var evergreen09: UIColor {
        return UIColor(red: 13.0 / 255.0, green: 66.0 / 255.0, blue: 7.0 / 255.0, alpha: 1.0)
    }
    
    open class var evergreen10: UIColor {
        return UIColor(red: 13.0 / 255.0, green: 46.0 / 255.0, blue: 7.0 / 255.0, alpha: 1.0)
    }
    
    open class var midnightblue01: UIColor {
        return UIColor(red: 240.0 / 255.0, green: 244.0 / 255.0, blue: 1.0, alpha: 1.0)
    }
​
    open class var midnightblue02: UIColor {
        return UIColor(red: 215.0 / 255.0, green: 224.0 / 255.0, blue: 250.0 / 255.0, alpha: 1.0)
    }
​
    open class var midnightblue03: UIColor {
        return UIColor(red: 184.0 / 255.0, green: 198.0 / 255.0, blue: 242.0 / 255.0, alpha: 1.0)
    }
​
    open class var midnightblue04: UIColor {
        return UIColor(red: 147.0 / 255.0, green: 163.0 / 255.0, blue: 230.0 / 255.0, alpha: 1.0)
    }
​
    open class var midnightblue05: UIColor {
        return UIColor(red: 111.0 / 255.0, green: 129.0 / 255.0, blue: 214.0 / 255.0, alpha: 1.0)
    }
​
    open class var midnightblue06: UIColor {
        return UIColor(red: 81.0 / 255.0, green: 96.0 / 255.0, blue: 194.0 / 255.0, alpha: 1.0)
    }
​
    open class var midnightblue07: UIColor {
        return UIColor(red: 59.0 / 255.0, green: 70.0 / 255.0, blue: 173.0 / 255.0, alpha: 1.0)
    }
​
    open class var midnightblue08: UIColor {
        return UIColor(red: 40.0 / 255.0, green: 47.0 / 255.0, blue: 143.0 / 255.0, alpha: 1.0)
    }
​
    open class var midnightblue09: UIColor {
        return UIColor(red: 31.0 / 255.0, green: 33.0 / 255.0, blue: 102.0 / 255.0, alpha: 1.0)
    }
​
    open class var midnightblue10: UIColor {
        return UIColor(red: 27.0 / 255.0, green: 27.0 / 255.0, blue: 71.0 / 255.0, alpha: 1.0)
    }
    
    open class var firered01: UIColor {
        return UIColor(red: 1.0, green: 243.0 / 255.0, blue: 240.0 / 255.0, alpha: 1.0)
    }
    
    open class var firered02: UIColor {
        return UIColor(red: 1.0, green: 211.0 / 255.0, blue: 204.0 / 255.0, alpha: 1.0)
    }
    
    open class var firered03: UIColor {
        return UIColor(red: 252.0 / 255.0, green: 175.0 / 255.0, blue: 167.0 / 255.0, alpha: 1.0)
    }
    
    open class var firered04: UIColor {
        return UIColor(red: 247.0 / 255.0, green: 132.0 / 255.0, blue: 124.0 / 255.0, alpha: 1.0)
    }
    
    open class var firered05: UIColor {
        return UIColor(red: 240.0 / 255.0, green: 86.0 / 255.0, blue: 81.0 / 255.0, alpha: 1.0)
    }
    
    open class var firered06: UIColor {
        return UIColor(red: 224.0 / 255.0, green: 45.0 / 255.0, blue: 45.0 / 255.0, alpha: 1.0)
    }
    
    open class var firered07: UIColor {
        return UIColor(red: 209.0 / 255.0, green: 17.0 / 255.0, blue: 17.0 / 255.0, alpha: 1.0)
    }
    
    open class var firered08: UIColor {
        return UIColor(red: 179.0 / 255.0, green: 0.0, blue: 0.0, alpha: 1.0)
    }
    
    open class var firered09: UIColor {
        return UIColor(red: 133.0 / 255.0, green: 3.0 / 255.0, blue: 3.0 / 255.0, alpha: 1.0)
    }
    
    open class var firered10: UIColor {
        return UIColor(red: 82.0 / 255.0, green: 10.0 / 255.0, blue: 10.0 / 255.0, alpha: 1.0)
    }
    
    open class var sunriseyellow01: UIColor {
        return UIColor(red: 1.0, green: 245.0 / 255.0, blue: 219.0 / 255.0, alpha: 1.0)
    }
    
    open class var sunriseyellow02: UIColor {
        return UIColor(red: 252.0 / 255.0, green: 225.0 / 255.0, blue: 162.0 / 255.0, alpha: 1.0)
    }
    
    open class var sunriseyellow03: UIColor {
        return UIColor(red: 245.0 / 255.0, green: 197.0 / 255.0, blue: 103.0 / 255.0, alpha: 1.0)
    }
    
    open class var sunriseyellow04: UIColor {
        return UIColor(red: 224.0 / 255.0, green: 159.0 / 255.0, blue: 45.0 / 255.0, alpha: 1.0)
    }
    
    open class var sunriseyellow05: UIColor {
        return UIColor(red: 199.0 / 255.0, green: 124.0 / 255.0, blue: 12.0 / 255.0, alpha: 1.0)
    }
    
    open class var sunriseyellow06: UIColor {
        return UIColor(red: 163.0 / 255.0, green: 92.0 / 255.0, blue: 0.0, alpha: 1.0)
    }
    
    open class var sunriseyellow07: UIColor {
        return UIColor(red: 128.0 / 255.0, green: 68.0 / 255.0, blue: 0.0, alpha: 1.0)
    }
    
    open class var sunriseyellow08: UIColor {
        return UIColor(red: 89.0 / 255.0, green: 47.0 / 255.0, blue: 5.0 / 255.0, alpha: 1.0)
    }
    
    open class var sunriseyellow09: UIColor {
        return UIColor(red: 66.0 / 255.0, green: 36.0 / 255.0, blue: 10.0 / 255.0, alpha: 1.0)
    }
    
    open class var sunriseyellow10: UIColor {
        return UIColor(red: 46.0 / 255.0, green: 26.0 / 255.0, blue: 10.0 / 255.0, alpha: 1.0)
    }
    
    open class var white: UIColor {
        return UIColor(white: 1.0, alpha: 1.0)
    }
    
    open class var black: UIColor {
        return UIColor(white: 0.0, alpha: 1.0)
    }
    
    open class var clear: UIColor {
        return UIColor.clear
    }
    
    open class func custom(hexString: String, alpha: CGFloat) -> UIColor {
        return UIColor(hexString: hexString).withAlphaComponent(alpha)
    }
}
​
Color Label Token
🍎iOS
Second Tab
open class ZLabelColor {
    open class var primary: UIColor {
        return ZColor.phantomgrey10
    }
    
    open class var secondary: UIColor {
        return ZColor.phantomgrey06
    }
    
    open class var inactive: UIColor {
        return ZColor.phantomgrey04
    }
    
    open class var inverse: UIColor {
        return ZColor.white
    }
    
    open class var error: UIColor {
        return ZColor.firered06
    }
    
    open class var success: UIColor {
        return ZColor.evergreen06
    }
    
    open class var warning: UIColor {
        return ZColor.sunriseyellow06
    }
    
    open class var sunriseYellow: UIColor {
        return ZColor.sunriseyellow04
    }
    
    open class var accent: UIColor {
        return ZColor.evergreen06
    }
    
    open class var info: UIColor {
        return ZColor.midnightblue06
    }
}
​
Icon Color Token
🍎iOS
Second Tab
open class ZIconColor {
    open class var primary: UIColor {
        return ZColor.phantomgrey08
    }
    
    open class var secondary: UIColor {
        return ZColor.phantomgrey06
    }
    
    open class var inactive: UIColor {
        return ZColor.phantomgrey04
    }
    
    open class var inverse: UIColor {
        return ZColor.white
    }
    
    open class var accent: UIColor {
        return ZColor.evergreen06
    }
    
    open class var warning: UIColor {
        return ZColor.sunriseyellow06
    }
    
    open class var error: UIColor {
        return ZColor.firered06
    }
    
    open class var info: UIColor {
        return ZColor.midnightblue06
    }
}
​
Separator Color Tokens
🍎iOS
Second Tab
open class ZSeparatorColor {
    open class var primary: UIColor {
        return ZColor.phantomgrey02
    }
    
    open class var warning: UIColor {
        return ZColor.sunriseyellow06
    }
    
    open class var error: UIColor {
        return ZColor.firered06
    }
    
    open class var accent: UIColor {
        return ZColor.evergreen06
    }
    
    open class var map: UIColor {
        return ZColor.midnightblue06
    }
    
    open class var clear: UIColor {
        return ZColor.clear
    }
}
​
 Background Color Token
🍎iOS
Second Tab
open class ZBackgroundColor {
    open class var primary: UIColor {
        return ZColor.phantomgrey01
    }
    
    open class var white: UIColor {
        return ZColor.white
    }
    
    open class var clear: UIColor {
        return ZColor.clear
    }
    
    open class var accent: UIColor {
        return ZColor.evergreen01
    }
    
    open class var warning: UIColor {
        return ZColor.sunriseyellow01
    }
    
    open class var error: UIColor {
        return ZColor.firered01
    }
    
    open class var info: UIColor {
        return ZColor.midnightblue01
    }
    
    open class var map: UIColor {
        return ZColor.midnightblue06.withAlphaComponent(0.1)
    }
    
    open class var overlay: UIColor {
        return ZColor.phantomgrey10.withAlphaComponent(0.87)
    }
}
​

Color	Name	HEX	HSB
	Evergreen 01	`#E6FFEA`	`H130 S10 B100`
	Evergreen 02	`#B9FAC2`	`H128 S26 B98`
	Evergreen 03	`#8BF095`	`H126 S42 B94`
	Evergreen 04	`#55E05F`	`H124 S62 B88`
	Evergreen 05	`#28C72D`	`H122 S80 B78`
	Evergreen 06	`#10A310`	`H120 S90 B64`
	Evergreen 07	`#0B7A07`	`H118 S94 B48`
	Evergreen 08	`#0C5906`	`H116 S93 B35`
	Evergreen 09	`#0D4207`	`H114 S90 B26`
	Evergreen 10	`#0D4207`	`H112 S84 B18`

Color	Name	HEX	HSB
	Ash Grey 01	`#F5F5F5`	`H0 S0 B96`
	Ash Grey 02	`#E0E0E0`	`H0 S0 B88`
	Ash Grey 03	`#C7C7C7`	`H0 S0 B78`
	Ash Grey 04	`#A8A8A8`	`H0 S0 B66`
	Ash Grey 05	`#858585`	`H0 S0 B52`
	Ash Grey 06	`#666666`	`H0 S0 B40`
	Ash Grey 07	`#4D4D4D`	`H0 S0 B30`
	Ash Grey 08	`#383838`	`H0 S0 B22`
	Ash Grey 09	`#292929`	`H0 S0 B16`
	Ash Grey 10	`#1F1F1F`	`H0 S0 B12`

Color	Name	HEX	HSB
	Midnight Blue 01	`#F0F4FF`	`H224 S6 B100`
	Midnight Blue 02	`#D7E0FA`	`H225 S14 B98`
	Midnight Blue 03	`#B8C6F2`	`H226 S24 B95`
	Midnight Blue 04	`#93A3E6`	`H228 S36 B90`
	Midnight Blue 05	`#6F81D6`	`H230 S48 B84`
	Midnight Blue 06	`#5160C2`	`H232 S58 B76`
	Midnight Blue 07	`#3B46AD`	`H234 S66 B68`
	Midnight Blue 08	`#282F8F`	`H236 S72 B56`
	Midnight Blue 09	`#1F2166`	`H238 S70 B40`
	Midnight Blue 10	`#1B1B47`	`H240 S62 B28`

Color	Name	HEX	HSBA
	Fire Red 01	`#FFF3F0`	`H12 S6 B100`
	Fire Red 02	`#FFD3CC`	`H8 S20 B100`
	Fire Red 03	`#FCAFA7`	`H6 S34 B99`
	Fire Red 04	`#F7847C`	`H4 S50 B97`
	Fire Red 05	`#F05651`	`H2 S66 B94`
	Fire Red 06	`#E02D2D`	`H360 S80 B88`
	Fire Red 07	`#D11111`	`H360 S92 B82`
	Fire Red 08	`#B30000`	`H360 S100 B70`
	Fire Red 09	`#850303`	`H360 S98 B52`
	Fire Red 10	`#520A0A`	`H360 S88 B32`

Color	Name	HEX	HSB
	Sunrise Yellow 01	`#FFF5DB`	`H43 S14 B100`
	Sunrise Yellow 02	`#FCE1A2`	`H42 S36 B99`
	Sunrise Yellow 03	`#F5C567`	`H40 S58 B96`
	Sunrise Yellow 04	`#E09F2D`	`H38 S80 B88`
	Sunrise Yellow 05	`#C77C0C`	`H36 S94 B78`
	Sunrise Yellow 06	`#A35C00`	`H34 S100 B64`
	Sunrise Yellow 07	`#804400`	`H32 S100 B50`
	Sunrise Yellow 08	`#592F05`	`H30 S94 B35`
	Sunrise Yellow 09	`#42240A`	`H28 S85 B26`
	Sunrise Yellow 10	`#2E1A0A`	`H27 S78 B18`

Color	Name	HEX	HSB
	White	`#FFFFFF`	`H0 S0 B100`
	Black	`#000000`	`H0 S0 B0`