Asana

Asana's brand palette, anchored on the three-dot coral mark — a warm Asana Coral (#F06A6A) carrying the institutional voice on a clean white canvas with near-black body text. Asana's product also uses a documented purple supporting accent, but its exact published brand hex is not catalogued here to avoid fabrication; consumers needing the supporting purple should pull it from Asana's in-product brand documentation at consumption time.

9 swatches 14 light roles 14 dark roles saasproductivityasanawork-managementcoral

Swatches

asana-coral
#F06A6A
Signature warm coral — the three-dot mark color. Primary brand accent used on the wordmark, the mark, and key brand surfaces.
asana-white
#FFFFFF
Canvas on light surfaces; reversed wordmark fill.
asana-black
#1E1F21
Near-black body text on light backgrounds — Asana's marketing-page text tone.
asana-canvas-dark
#1E1F21
Authored dark-mode canvas — neutral near-black aligned with body-text tone.
asana-surface-light
#F6F4F2
Authored warm panel surface for light mode.
asana-surface-dark
#2D2E30
Authored elevated surface on dark mode.
asana-text-secondary
#6D6E6F
Authored secondary text — neutral mid-gray on light canvas.
asana-text-tertiary
#9CA6AF
Authored tertiary / muted text.
asana-coral-hover
#F58A8A
Authored softer coral for hover / active states.

Mode role mappings

Light mode (14 roles)

accent → asana-coral
accent-hover → asana-coral-hover
background → asana-white
error → asana-coral
primary → asana-coral
primary-hover → asana-coral-hover
success → asana-coral
surface → asana-surface-light
surface-elevated → asana-white
text-primary → asana-black
text-secondary → asana-text-secondary
text-tertiary → asana-text-tertiary
warning → asana-coral
warning-hover → asana-coral-hover

Dark mode (14 roles)

accent → asana-coral
accent-hover → asana-coral-hover
background → asana-canvas-dark
error → asana-coral
primary → asana-coral
primary-hover → asana-coral-hover
success → asana-coral
surface → asana-surface-dark
surface-elevated → asana-surface-dark
text-primary → asana-white
text-secondary → asana-text-tertiary
text-tertiary → asana-text-secondary
warning → asana-coral
warning-hover → asana-coral-hover

Provenance

Source
https://asana.com/press
License
Proprietary — All Rights Reserved
Attribution
Asana and the Asana logo are trademarks of Asana, Inc. The primary brand color Asana Coral (#F06A6A) is documented on Asana's press and brand resources and is independently cross-referenced by the simple-icons brand database, which cites asana.com as the source.
Imported
2026-05-18
Notes
Only the Asana Coral mark color is read directly from Asana's public brand surfaces. Secondary neutrals (mid-grays, dark canvas) are authored neutral inversions calibrated to support both modes consistently without fabricating hex values that Asana does not publish.