Software & SaaS
Figma Color Codes
Figma's colors are five, one per shape in the mark: red #F24E1E, salmon #FF7262, purple #A259FF, blue #1ABCFE and green #0ACF83. The Figma color codes in Hex, RGB and CMYK can be found below. Dylan Field and Evan Wallace started the company in 2012 while they were computer science students at Brown. Adobe agreed to buy it for about $20 billion in 2022 and walked away in December 2023, paying a $1 billion break fee.
Primary colors
What are Figma Primary Colors?
Figma's primary colors are red #F24E1E, salmon #FF7262, purple #A259FF, blue #1ABCFE and green #0ACF83.
Figma publishes no public CMYK or Pantone sheet, so both are shown below as conversions and nearest matches.
Figma Red
| Hex | #F24E1E |
|---|---|
| RGB | 242, 78, 30 |
| HSL | hsl(14, 89%, 53%) |
| CMYK | 0%, 68%, 88%, 5%converted · approximate |
| Pantone | PMS 172 Cnearest match · not published by the brand |
Figma Salmon
| Hex | #FF7262 |
|---|---|
| RGB | 255, 114, 98 |
| HSL | hsl(6, 100%, 69%) |
| CMYK | 0%, 55%, 62%, 0%converted · approximate |
| Pantone | PMS 178 Cnearest match · not published by the brand |
Figma Purple
| Hex | #A259FF |
|---|---|
| RGB | 162, 89, 255 |
| HSL | hsl(266, 100%, 67%) |
| CMYK | 36%, 65%, 0%, 0%converted · approximate |
| Pantone | PMS 266 Cnearest match · not published by the brand |
Figma Blue
| Hex | #1ABCFE |
|---|---|
| RGB | 26, 188, 254 |
| HSL | hsl(197, 99%, 55%) |
| CMYK | 90%, 26%, 0%, 0%converted · approximate |
| Pantone | PMS 299 Cnearest match · not published by the brand |
Figma Green
| Hex | #0ACF83 |
|---|---|
| RGB | 10, 207, 131 |
| HSL | hsl(157, 91%, 43%) |
| CMYK | 95%, 0%, 37%, 19%converted · approximate |
| Pantone | PMS 354 Cnearest match · not published by the brand |
Figma Hex Color Codes
Figma hex color codes are #F24E1E for red, #FF7262 for salmon, #A259FF for purple, #1ABCFE for blue and #0ACF83 for green.
| Color | Hex |
|---|---|
| Red | #F24E1E |
| Salmon | #FF7262 |
| Purple | #A259FF |
| Blue | #1ABCFE |
| Green | #0ACF83 |
Figma RGB Color Codes
Figma RGB color codes are 242, 78, 30 for red, 255, 114, 98 for salmon, 162, 89, 255 for purple, 26, 188, 254 for blue and 10, 207, 131 for green. Reach for RGB when a tool wants channel numbers or a CSS alpha value.
| Color | RGB |
|---|---|
| Red | rgb(242, 78, 30) |
| Salmon | rgb(255, 114, 98) |
| Purple | rgb(162, 89, 255) |
| Blue | rgb(26, 188, 254) |
| Green | rgb(10, 207, 131) |
Figma HSL Color Codes
Figma HSL color codes are 14, 89%, 53% for red, 6, 100%, 69% for salmon, 266, 100%, 67% for purple, 197, 99%, 55% for blue and 157, 91%, 43% for green. Change the third value for a lighter or darker version without moving the hue.
| Color | HSL |
|---|---|
| Red | hsl(14, 89%, 53%) |
| Salmon | hsl(6, 100%, 69%) |
| Purple | hsl(266, 100%, 67%) |
| Blue | hsl(197, 99%, 55%) |
| Green | hsl(157, 91%, 43%) |
Figma CMYK Color Code
Figma CMYK color codes are conversions from the hex, because the brand publishes none. Check a printed proof before a full run.
| Color | CMYK |
|---|---|
| Red | 0%, 68%, 88%, 5% |
| Salmon | 0%, 55%, 62%, 0% |
| Purple | 36%, 65%, 0%, 0% |
| Blue | 90%, 26%, 0%, 0% |
| Green | 95%, 0%, 37%, 19% |
Figma Pantone Color Codes
Figma Pantone color codes are nearest matches by color distance, not brand specs. The table shows the closest swatch for every color.
| Color | Nearest Pantone |
|---|---|
| Red | PMS 172 C |
| Salmon | PMS 178 C |
| Purple | PMS 266 C |
| Blue | PMS 299 C |
| Green | PMS 354 C |
Logo
Figma Logo Colors
Figma logo colors are five, one for each of the five shapes stacked into the mark.
Figma Logo Colors Palette
What the Figma Logo Colors Mean?
The Figma logo colors map one to one onto geometry, which is rare. The mark is built from five shapes, four rectangles with rounded corners and one circle, arranged the way a designer would nest them on a canvas, and each shape carries its own color. Nothing is layered or blended. That is the point: the logo is a small demonstration of the tool, and it can be rebuilt inside Figma itself in about a minute.
Figma Logo JPG
Figma logo in JPG. No transparency, so it is flattened onto white. Safe for documents and slide decks.
Figma Logo PNG
Figma logo in PNG, with a transparent background. Use it over a colored surface.
Figma Logo WebP
Figma logo in WebP. Same transparency as the PNG at about a third of the file size.
Figma Color Code Shades
Figma color code shades step evenly from the primary toward black, for hover states, borders and shadows.
These are interface steps, not Figma paint or trim names.
In code
Using the Figma palette
CSS custom properties
:root {
--figma-red: #F24E1E;
--figma-salmon: #FF7262;
--figma-purple: #A259FF;
--figma-blue: #1ABCFE;
--figma-green: #0ACF83;
}Contrast against white
| Red | 3.57:1AA × |
|---|---|
| Salmon | 2.68:1AA × |
| Purple | 3.88:1AA × |
| Blue | 2.17:1AA × |
| Green | 2.05:1AA × |
Brand colors are chosen for recognition, not for legibility. A failing value here is normal. It means use it as a fill, not as text.