asana.com · Captured October 9, 2026
Asana color palette:#F06A6A and 16 more
Every colour asana.com paints on its homepage — ranked by how much of the page it covers, with the brand, background and surface roles picked out.
Free with an account · Chrome, Edge & Brave · reads a page only when you click
Every colour, ranked.
Where each colour is used — text, backgrounds, borders, gradients, shadows — and whether it passes WCAG AA as text on the page background.
| colour | role | used for | share | contrast on #FFFFFF |
|---|---|---|---|---|
| #FFFFFF | Surface | background, text, svg, border | 34% | — |
| #3D3D3D | — | text, background | 25.2% | 10.86:1 · AA |
| #0D0D0D | — | text, svg, shadow, background | 18.1% | 19.44:1 · AA |
| #F3F3F3 | — | background, border, text, svg | 11.4% | 1.11:1 |
| #FAFAFA | — | background, border | 4.4% | 1.04:1 |
| #E7E7E7 | — | background, border, text | 2% | 1.24:1 |
| #151B26 | — | background, text | 1.2% | 17.26:1 · AA |
| #6E6E6E | — | border, text, svg | 1.2% | 5.1:1 · AA |
| #FF453E | — | gradient | 0.6% | 3.4:1 |
| #F481F4 | — | gradient | 0.3% | 2.26:1 |
| #CFCFCF | — | border | 0.2% | 1.56:1 |
| #00000026 | — | shadow | 0.2% | 21:1 · AA |
| #D5DCE0 | — | border | 0.2% | 1.39:1 |
| #FFC9FF | — | background | 0.2% | 1.4:1 |
| #000000 | — | svg, border | 0.1% | 21:1 · AA |
| #FF584A | — | svg | 0.1% | 3.11:1 |
Use the palette in your project.
Copy or download it as CSS variables, Tailwind (v3 or v4), a shadcn/ui theme, W3C design tokens, Figma variables or a DESIGN.md for coding agents.
/* Asana palette — Tailwind v4: paste below @import "tailwindcss"; */
@theme {
--color-brand: #F06A6A;
--color-1: #F3F3F3;
--color-2: #0D0D0D;
--color-surface: #FFFFFF;
--color-3: #FAFAFA;
--color-4: #E7E7E7;
--color-5: #3D3D3D;
--color-6: #6E6E6E;
--color-7: #CFCFCF;
--color-8: #00000026;
--color-9: #D5DCE0;
--color-10: #151B26;
--color-11: #FF453E;
--text-heading-1: 102px;
--text-heading-2: 54px;
--text-heading: 36px;
--text-heading-4: 30px;
--text-heading-5: 24px;
--text-body: 20px;
--text-heading-3: 20px;
--text-button: 16px;
--radius-sm: 7px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 50px;
--font-sans: "TWK Lausanne", ui-sans-serif, system-ui, sans-serif;
}
Captured from asana.com on October 9, 2026 by Xtractly's Design System scanner, at 1440px wide in light mode. Sites change — run the extension on the live page for today's values. Xtractly isn't affiliated with Asana; names and marks belong to their owners.
Questions
What is Asana's brand color?
Asana's brand colour is #F06A6A (Coral), checked against its brand guidelines in October 2026. The palette on this page is what its homepage paints, ranked by how much of the page each colour covers.
What colors does Asana use?
Asana's homepage palette, by how much of the page each one covers: #FFFFFF, #3D3D3D, #0D0D0D, #F3F3F3, #FAFAFA, #E7E7E7.
How do I use Asana's palette in my project?
Copy it from the Export menu on this page as CSS variables, a Tailwind v4 @theme block, a shadcn/ui theme, W3C design tokens or Figma variables. To pull a palette from any other site, use the Xtractly extension's Design System panel.