Color

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

Brand Colors

Evergreen (Primary)

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

Phantom Grey (Base)

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)

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

Fire Red (Error)

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

Sunrise Yellow (Warning)

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

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)
    }
}

🤖Android

Color Label Token

🍎iOS

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
    }
}

Second Tab

Icon Color Token

🍎iOS

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
    }
}

Second Tab

Separator Color Tokens

🍎iOS

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
    }
}

Second Tab

Background Color Token

🍎iOS

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)
    }
}

Second Tab

Button BG Color Token

🍎iOS

open class ZButtonBackgroundColor {
    open class var primary: UIColor {
        return ZColor.phantomgrey10
    }
    
    open class var inactive: UIColor {
        return ZColor.phantomgrey02
    }
    
    open class var inverse: UIColor {
        return ZColor.white
    }
    
    open class var clear: UIColor {
        return ZColor.clear
    }
    
    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
    }
}

Second Tab