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 colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Figma OrangePrimary242, 78, 30
- Figma PurpleSecondary162, 89, 255
- Figma GreenAccent10, 207, 131
Surfaces
Page, cards and dividers.- Figma WhiteBackground255, 255, 255
- Figma SurfaceSurface245, 245, 245
- Figma BorderBorder229, 229, 229
Text
Three tiers of copy.- Figma BlackText30, 30, 30
- Figma GraySecondary text107, 107, 107
- Figma MutedMuted text153, 153, 153
Semantic
Feedback and state colors.- Figma SuccessSuccess10, 207, 131
- Figma YellowWarning255, 205, 41
- Figma ErrorError242, 78, 30
- Figma BlueInfo26, 188, 254
Use Figma's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
figma-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #1ABCFE;
--error: #F24E1E;
--accent: #0ACF83;
--border: #E5E5E5;
--primary: #F24E1E;
--success: #0ACF83;
--surface: #F5F5F5;
--warning: #FFCD29;
--secondary: #A259FF;
--text-muted: #999999;
--background: #FFFFFF;
--text-primary: #1E1E1E;
--text-secondary: #6B6B6B;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
16.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.9:1
Pass
Muted text on background
Needs 3:1 for large text
2.8:1
Fail
Muted text on surface
Needs 3:1 for large text
2.6:1
Fail
Figma gray and neutral colors
The quiet part of the Figma palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Figma WhiteBackground
- HEX
- RGB
- HSL
- Figma SurfaceSurface
- HEX
- RGB
- HSL
- Figma BorderBorder
- HEX
- RGB
- HSL
- Figma BlackText
- HEX
- RGB
- HSL
- Figma GraySecondary text
- HEX
- RGB
- HSL
- Figma MutedMuted text
- HEX
- RGB
- HSL
About Figma's colors
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
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.
Where Figma uses each 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.
- Text
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.
Figma color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Figma logo uses four colors: Orange-Red (#F24E1E), Purple (#A259FF), Green (#0ACF83), and Blue (#1ABCFE), plus a darker red (#FF7262) in the logo's bottom-left quadrant. Each quadrant represents different aspects of the design process.
While Figma uses four logo colors equally, Orange-Red (#F24E1E) is most commonly used as the primary accent in marketing and CTAs. Purple is used prominently for FigJam branding.
Figma uses color to distinguish products: Orange-Red for Figma Design, Purple for FigJam (collaborative whiteboarding), and Green for Dev Mode (developer handoff). This color coding helps users navigate the product ecosystem.
Figma's primary color is Figma Orange, hex #F24E1E (RGB 242, 78, 30). It is the color used for the logo and the most prominent brand moments.
The secondary color is Figma Purple, #A259FF, and the accent is Figma Green, #0ACF83. Together with the primary they make up the three brand colors at the top of this page.
Figma uses #FFFFFF for backgrounds, #F5F5F5 for surfaces and #E5E5E5 for borders. Text runs #1E1E1E, #6B6B6B and #999999 from strongest to most muted.
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 Figma's colors consistently when it generates UI.
Make something in the spirit of Figma
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.