Figma Colors

Preview

Figma UI Color Palette

Figma UI Colors

Color is at the foundation of every visual system. Colors allow us to differentiate design elements, understand what's important, and how content can be interpreted and consumed.

When choosing and combining colors, one should consider different screens, lighting conditions, color perception, and color contrast. Frames X includes 26 professionally crafted palettes you can combine for your design system or branding foundation.

Color Palette Core Features

Build custom light/dark themes that adapt to any project - no more guesswork;
Preview color changes and check accessibility before implementation;
Standardize color naming and usage across your team.

Frames X color palette provides a full spectrum of UI colors to your design system advantage. However, only a few palettes are often required to build your project. These include:

Neutral colors (Base) that reflect the hierarchy of elements and convey the content's importance based on the amount of 'fill' applied to an element.
State colors translate crucial brand-interface information, such as Active, Danger, or Success states.
Text colors. The text color group is minimal and includes three levels of importance: Primary, Secondary, and Tertiary.

More Resources on Frames X Color Palette

Figma UI Colors Palettes - In-depth guide on working with colors in Figma,
Intro Guide to Figma Variables - Learn how to use variables in Figma.

The Frames X color palette is a set of Figma colour variables — brand, grey, state (success, warning, danger, info) and three-level text groups — organised as fill levels with light and dark modes for theme switching.

Colors AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Build a colour system in Figma as variables with light and dark modes. Primitives: a neutral grey ramp from 0 to 1000 in steps of 50, a brand ramp in the same steps, and state ramps for green, amber, red and blue. Semantic layer: Background primary, secondary and tertiary; Surface default, raised and overlay; Border subtle, default and strong; Text primary, secondary and tertiary; Brand fill levels from fill-1 to fill-4 that step the brand tint for hierarchy; and State tokens for success, warning, danger and info each with a fill, a soft tint and a text colour. Alias every semantic token to a primitive per mode so Dark swaps the whole page by changing the frame's mode. Lay out a palette sheet: one row per ramp with labelled swatches showing name, hex and the contrast ratio against white and black, then a second sheet of UI samples — button, input, card, alert — rendered in both modes. Name tokens group/role/variant so they read cleanly in the variable picker.

Source