Asana Coral Color Psychology & Meaning
Asana's coral-red and deep purple pairing is unusual for productivity software. It's warm but focused, suggesting that deadlines don't have to feel cold.
#FFFFFF
#F06A6A
#4A154B
#151B26
Background
Primary Accent
Secondary
Body Text
Asana Coral
warmorganizedprofessional all appproductivitybranding
AAA
WCAG Grade
17.3:1
Contrast Ratio
2,500
Saves
6,500
AI Copies
Use #FFFFFF as the background. Use #F06A6A as the primary accent. Use #4A154B as secondary. Use #151B26 as body text/supporting color. Palette mood: Asana Coral — warm, organized, professional.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Asana Coral 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: 29.9% | 240, 106, 106 | 0%, 56%, 56%, 6% | 0°, 82%, 68% | ||
| Secondary Luminance: 2.5% | 74, 21, 75 | 1%, 72%, 0%, 71% | 299°, 56%, 19% | ||
| Body Text Luminance: 1.1% | 21, 27, 38 | 45%, 29%, 0%, 85% | 219°, 29%, 12% |
Color Harmony: Triadic Scheme
The Asana Coral palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Asana rebranded in 2019 from a white-and-pink system to the current coral-dominant identity. The unicorn logo and coral palette became recognizable signals of the product.
Best Design Use Cases
White for task surfaces and content. Coral for brand marks and milestone celebrations. Deep purple for premium features and serious headers.
Industries This Palette Suits
Project management, team productivity, enterprise software, creative teams.
How to Implement the Asana Coral Color Scheme
To use this Asana Coral 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 #F06A6A for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #151B26 and #FFFFFF is 17.26:1 (AAA). Ensure your body text remains legible.