Figma Color Palette

Select any value to copy it.

• Figma Purple

  Primary

  #A259FFrgb(162, 89, 255)hsl(266, 100%, 67%)

  Closest in ArchiveOrchid Silk Pure
  Closest in Archive: Orchid Silk Pure

• Figma Red

  Primary

  #F24E1Ergb(242, 78, 30)hsl(14, 89%, 53%)

  Closest in ArchiveVermillion Radiant Pure
  Closest in Archive: Vermillion Radiant Pure

• Figma Orange

  Primary

  #FF7262rgb(255, 114, 98)hsl(6, 100%, 69%)

  Closest in ArchiveScarlet Silk Pure
  Closest in Archive: Scarlet Silk Pure

• Figma Blue

  Primary

  #1ABCFErgb(26, 188, 254)hsl(197, 99%, 55%)

  Closest in ArchiveAzure Tone Pure
  Closest in Archive: Azure Tone Pure

• Figma Green

  Primary

  #0ACF83rgb(10, 207, 131)hsl(157, 91%, 43%)

  Closest in ArchiveTeal Velvet Pure
  Closest in Archive: Teal Velvet Pure

Can it carry text? (WCAG contrast)

Each color as text on white and on black. AA means body text passes. Select a ratio to open the pair in the contrast checker.

• Figma PurpleAaon white3.88:1Large text onlyFigma Purple: Open in contrast checkerAaon black5.41:1AAFigma Purple: Open in contrast checker
• Figma RedAaon white3.57:1Large text onlyFigma Red: Open in contrast checkerAaon black5.88:1AAFigma Red: Open in contrast checker
• Figma OrangeAaon white2.68:1Not for textFigma Orange: Open in contrast checkerAaon black7.84:1AAFigma Orange: Open in contrast checker
• Figma BlueAaon white2.17:1Not for textFigma Blue: Open in contrast checkerAaon black9.67:1AAFigma Blue: Open in contrast checker
• Figma GreenAaon white2.05:1Not for textFigma Green: Open in contrast checkerAaon black10.27:1AAFigma Green: Open in contrast checker

About this palette

Figma's identity literally is the five colored shapes that compose its F mark — purple, red, orange, blue, green. Each color carries equal weight, and Figma uses them as a vocabulary in marketing illustrations: never tinted, never shaded, always pure. The system rejects hierarchy in favor of plurality.

Copy as code

Every token name carries the brand, so two brands can share one stylesheet.

:root {
  --figma-purple: #a259ff;
  --figma-red: #f24e1e;
  --figma-orange: #ff7262;
  --figma-blue: #1abcfe;
  --figma-green: #0acf83;
}

@theme {
  --color-figma-purple: #a259ff;
  --color-figma-red: #f24e1e;
  --color-figma-orange: #ff7262;
  --color-figma-blue: #1abcfe;
  --color-figma-green: #0acf83;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        "figma-purple": "#a259ff",
        "figma-red": "#f24e1e",
        "figma-orange": "#ff7262",
        "figma-blue": "#1abcfe",
        "figma-green": "#0acf83",
      },
    },
  },
};

Source: https://www.figma.com/community/file/1158407205937813895 · As of 2026-05-02 · This page is an unofficial reference. Color values are factual sRGB hex codes and not subject to copyright; the Figma name and any associated marks belong to their owner. Request removal via support.

More from Design Tools