What is the Figma dark mode background color hex code?

Figma dark UI chrome/toolbar is commonly #2C2C2C, with panels and canvas around #1E1E1E. Hover rows use #383838 and primary text is #FFFFFF.

What is the Figma blue hex code?

Figma selection and primary action blue is #0D99FF. Component purple is #9747FF. Use blue for selection/focus and purple for component semantics.

What are all the Figma dark mode colors?

Figma dark uses #2C2C2C toolbar, #1E1E1E panels, #383838 hover, #444444 borders, #FFFFFF text, #0D99FF blue, and #9747FF component purple.

Back to Blog

Figma Dark Mode Colors: #2C2C2C

What is the Figma dark mode hex code?

Figma dark mode uses toolbar #2C2C2C, panels #1E1E1E, hover #383838, text #FFFFFF, and selection blue #0D99FF. Copy each hex below for design-tool UI inspiration.

Toolbar: #2C2C2C
Blue: #0D99FF
Panel: #1E1E1E

Copy Figma dark mode hex codes—toolbar #2C2C2C, panels #1E1E1E, and Figma blue #0D99FF—for design-tool and creative UI tokens.

Updated July 23, 2026•7 min read

Figma Dark Mode — Quick Copy

Toolbar, panels, blue accent, and text tokens. Click Copy on any row.

Canvas / toolbar

#2C2C2C

Panel background

#1E1E1E

Hover / selected

#383838

Border

#444444

Text primary

#FFFFFF

Figma blue

#0D99FF

What is the Hex Code for Figma Dark Mode?

Figma's dark toolbar and chrome commonly use #2C2C2C. Layers and properties panels sit on #1E1E1E; hover and selected rows use #383838. Selection and primary actions use Figma blue #0D99FF, with component purple #9747FF for component semantics.

Compare with Notion, GitHub, and the full dark mode color palette guide. Preview any palette on a real UI with our color palette preview tool.

Full Figma Dark Mode Color Palette

Toolbar, panels, selection blue, and component purple.

Token	Hex	Usage
Toolbar / chrome	#2C2C2C	Top bar, tool rails
Panel background	#1E1E1E	Layers, properties, left/right panels
Canvas (artboard area)	#1E1E1E	Dark canvas behind frames
Hover / selected row	#383838	Layer hover, menu highlight
Border / divider	#444444	Panel separators
Text primary	#FFFFFF	Labels, layer names
Text secondary	#B3B3B3	Hints, secondary labels
Text muted	#8C8C8C	Disabled, captions
Figma blue	#0D99FF	Selection, primary actions, links
Component purple	#9747FF	Components, instances
Prototype purple	#A259FF	Prototype connectors (brand-adjacent)
Error red	#F24822	Errors, destructive

Why Figma Dark Mode Works

Figma keeps chrome mid-dark so frames and colors on the canvas stay the focus. Blue marks selection without flooding the UI, and purple is reserved for components—a semantic split designers learn quickly. Creative tools and design systems borrow this restraint so content, not chrome, leads.

FAQ

What is the Figma dark mode background color hex code?: Figma dark UI chrome/toolbar is commonly #2C2C2C, with panels and canvas around #1E1E1E. Hover rows use #383838 and primary text is #FFFFFF.
What is the Figma blue hex code?: Figma selection and primary action blue is #0D99FF. Component purple is #9747FF. Use blue for selection/focus and purple for component semantics.
What are all the Figma dark mode colors?: Figma dark uses #2C2C2C toolbar, #1E1E1E panels, #383838 hover, #444444 borders, #FFFFFF text, #0D99FF blue, and #9747FF component purple.