Zoom Color Psychology & Meaning
Zoom blue communicates reliability and warmth in video communication. It is slightly softer than corporate blues — a video call should feel human, not institutional.
#FFFFFF
#2D8CFF
#1A1A1A
#919191
Background
Primary Accent
Secondary
Body Text
Zoom
coolcalmminimal springsummer appbranding
Fail
WCAG Grade
3.2:1
Contrast Ratio
2,600
Saves
6,800
AI Copies
Use #FFFFFF as the background. Use #2D8CFF as the primary accent. Use #1A1A1A as secondary. Use #919191 as body text/supporting color. Palette mood: Zoom — cool, calm, minimal.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Zoom color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 100.0% | 255, 255, 255 | 0%, 0%, 0%, 0% | 0°, 0%, 100% | ||
| Primary Accent Luminance: 26.5% | 45, 140, 255 | 82%, 45%, 0%, 0% | 213°, 100%, 59% | ||
| Secondary Luminance: 1.0% | 26, 26, 26 | 0%, 0%, 0%, 90% | 0°, 0%, 10% | ||
| Body Text Luminance: 28.3% | 145, 145, 145 | 0%, 0%, 0%, 43% | 0°, 0%, 57% |
Color Harmony: Split-Complementary Scheme
The Zoom palette is built using a split-complementary relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A split-complementary palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Zoom launched 2013. The brand became culturally ubiquitous during the 2020 pandemic. The blue was specifically tuned for video background contrast.
Best Design Use Cases
Blue for join buttons and active meeting states. White for UI surfaces. Gray for inactive states. Avoid pure black — it reads as disconnected.
Industries This Palette Suits
Video conferencing, remote work, communication tools.
How to Implement the Zoom Color Scheme
To use this Zoom color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #FFFFFF for the main background and #2D8CFF for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #919191 and #FFFFFF is 3.15:1 (Fail). Ensure your body text remains legible.