Figma Color Palette
TechFigma's multicolor brand palette reflects its collaborative design tool ethos, using a vibrant mix of orange-red, purple, green, and blue to represent creativity and teamwork.
figma.comFigma logo is a trademark of Figma. Used for informational purposes.
Brand Colors
Figma Orange
primary
Figma Purple
secondary
Figma Green
accent
Surfaces & Borders
Figma White
background
Figma Surface
surface
Figma Border
border
Typography
Figma Black
textPrimary
Figma Gray
textSecondary
Figma Muted
textMuted
Semantic Colors
Figma Success
success
Figma Yellow
warning
Figma Error
error
Figma Blue
info
Accessibility
textPrimary / background
textPrimary / surface
textSecondary / background
textSecondary / surface
textMuted / background
textMuted / surface
Color Theory
Figma's four-color logo (orange, purple, green, blue) represents different aspects of the design process. Unlike typical corporate palettes, each color carries equal weight, reflecting the collaborative, multi-stakeholder nature of design work.
- Four logo colors at equal saturation create visual democracy — no single color dominates
- Orange-red (#F24E1E) and purple (#A259FF) form a warm-cool complementary pair
- Green (#0ACF83) and blue (#1ABCFE) add freshness and trust respectively
Color Psychology
The multi-color palette communicates creativity, diversity, and energy. Each color represents a facet of design work — ideation (purple), iteration (orange), validation (green), and communication (blue). Together they feel inclusive and dynamic.
Evolution
Figma's colors have been consistent since the brand's early days, with the four-quadrant logo becoming iconic in the design community. The marketing site has evolved from using all four colors heavily to a more restrained approach with white space.
How Figma Uses Color
Primary
Figma Orange (#F24E1E) leads in marketing and brand contexts, appearing in the logo's top-right quadrant and primary CTAs.
Secondary
Figma Purple (#A259FF) represents FigJam and creative features, used in product-specific branding and playful UI elements.
Accent
Figma Green (#0ACF83) signals Dev Mode and implementation-ready states, bridging design and development.
Backgrounds
Clean white backgrounds let the colorful brand elements and UI screenshots take center stage on marketing pages.
Typography
Standard dark text (#1E1E1E) with neutral grays keeps the focus on the vibrant brand colors.
Semantic
Orange doubles as the error/destructive color, while green naturally maps to success states, creating an efficient system.
Agent integration
Use Figma's Colors in Your Agent
Terminal
Copies full install command. Saves skill to .claude/skills/figma/ — auto-detected on next run.
Included in the skill file
- 113 color roles — hex, HSL, and CSS variable names
- 2WCAG contrast rules for accessible pairings
- 3Auto-applies Figma's palette when generating UI
Frequently Asked Questions
Create Something Inspired by Figma
Generate a unique color palette inspired by Figma's aesthetic using AI.