Salesforce Color Psychology & Meaning
Salesforce blue is enterprise trust at scale. The lighter sky blue signals cloud technology and possibility; the deep navy provides the gravitas enterprise buyers need.
#FFFFFF
#00A1E0
#032D60
#706E6B
Background
Primary Accent
Secondary
Body Text
Salesforce
coolcalmminimal springsummer brandingweb
AA
WCAG Grade
5.1:1
Contrast Ratio
2,800
Saves
7,000
AI Copies
Use #FFFFFF as the background. Use #00A1E0 as the primary accent. Use #032D60 as secondary. Use #706E6B as body text/supporting color. Palette mood: Salesforce — cool, calm, minimal.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Salesforce 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: 30.9% | 0, 161, 224 | 100%, 28%, 0%, 12% | 197°, 100%, 44% | ||
| Secondary Luminance: 2.7% | 3, 45, 96 | 97%, 53%, 0%, 62% | 213°, 94%, 19% | ||
| Body Text Luminance: 15.7% | 112, 110, 107 | 0%, 2%, 4%, 56% | 36°, 2%, 43% |
Color Harmony: Split-Complementary Scheme
The Salesforce 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
Salesforce launched 1999. The cloud-blue identity was ahead of its time — before cloud computing was ubiquitous, Salesforce was already visualizing it.
Best Design Use Cases
Sky blue for the friendly, accessible layer. Dark navy for premium and enterprise-tier communications. White for all working surfaces.
Industries This Palette Suits
CRM, enterprise software, cloud platforms, B2B.
How to Implement the Salesforce Color Scheme
To use this Salesforce 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 #00A1E0 for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #706E6B and #FFFFFF is 5.08:1 (AA). Ensure your body text remains legible.