Asana color palette
SaaSAsana's color system is vibrant and approachable, anchored by a distinctive coral pink primary. The palette balances energetic accent colors with calm neutrals for clarity and usability across its SaaS platform.
asana.comAsana colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Asana CoralPrimary240, 106, 106
- Asana IndigoSecondary106, 103, 254
- Asana YellowAccent255, 211, 97
Surfaces
Page, cards and dividers.- Asana WhiteBackground255, 255, 255
- Asana Light GraySurface248, 248, 248
- Asana Border GrayBorder225, 228, 232
Text
Three tiers of copy.- Asana CharcoalText35, 39, 47
- Asana Medium GraySecondary text107, 110, 118
- Asana Muted GrayMuted text161, 164, 170
Semantic
Feedback and state colors.- Asana MintSuccess79, 210, 181
- Asana OrangeWarning255, 182, 97
- Asana CoralError240, 106, 106
- Asana IndigoInfo106, 103, 254
Use Asana's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
asana-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #6A67FE;
--error: #F06A6A;
--accent: #FFD361;
--border: #E1E4E8;
--primary: #F06A6A;
--success: #4FD2B5;
--surface: #F8F8F8;
--warning: #FFB661;
--secondary: #6A67FE;
--text-muted: #A1A4AA;
--background: #FFFFFF;
--text-primary: #23272F;
--text-secondary: #6B6E76;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.0:1
Pass
Text on surface
Needs 4.5:1 for body text
14.1:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.1:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.8:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Asana gray and neutral colors
The quiet part of the Asana palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Asana WhiteBackground
- HEX
- RGB
- HSL
- Asana Light GraySurface
- HEX
- RGB
- HSL
- Asana Border GrayBorder
- HEX
- RGB
- HSL
- Asana CharcoalText
- HEX
- RGB
- HSL
- Asana Medium GraySecondary text
- HEX
- RGB
- HSL
- Asana Muted GrayMuted text
- HEX
- RGB
- HSL
About Asana's colors
Asana's palette uses a warm coral as its anchor, complemented by energetic accent colors and calming neutrals. This approach supports both brand recognition and clear UI hierarchy.
Primary coral and indigo are used together for contrast and emphasis.
Yellow accent highlights important actions or statuses.
Neutral grays support readability and reduce visual noise.
Psychology
The coral primary conveys approachability and energy, while indigo and mint add trust and balance. The palette aims to foster positivity and productivity in collaborative work.
Evolution
Asana's palette has remained largely consistent since its major 2019 rebrand, with minor adjustments to accent and neutral tones for accessibility. The core coral and indigo pairing has been a stable brand signature.
Where Asana uses each color
- Primary
Used for main action buttons, highlights, and key brand elements across the app and marketing site.
- Secondary
Appears in navigation, secondary buttons, and illustrations.
- Accent
Used for notifications, highlights, and to draw attention to important actions or statuses.
- Backgrounds
White and light gray backgrounds are used throughout the UI for clarity and minimalism.
- Text
Charcoal and gray text colors provide hierarchy and legibility on light backgrounds.
- Semantic
Mint, orange, and coral are used for success, warning, and error states respectively in UI feedback.
Asana color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Asana primary color is #F06A6A, known as Asana Coral. This color is used for main actions and brand highlights.
The RGB value for #F06A6A is (240, 106, 106). In CMYK, it is approximately (0, 56, 56, 6).
Asana uses #F8F8F8 (Light Gray), #E1E4E8 (Border Gray), #6B6E76 (Medium Gray), and #A1A4AA (Muted Gray) for backgrounds, borders, and secondary text. These neutrals support clarity and reduce visual distraction.
Use #F06A6A for primary actions and highlights, with #6A67FE and #FFD361 for secondary and accent elements. Neutrals and semantic colors should be applied according to UI context for clarity and accessibility.
The secondary color is Asana Indigo, #6A67FE, and the accent is Asana Yellow, #FFD361. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Asana's colors consistently when it generates UI.
Make something in the spirit of Asana
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.