Figma Colors and Fills
Color gives your design personality and meaning. In Figma, you apply color through fills, strokes, and effects. Understanding how fills work lets you go beyond flat colors and create gradients, patterns, and image backgrounds.
What Is a Fill?
A fill is the color or image that covers the inside of a shape or frame. Every shape you draw can have one or more fills stacked on top of each other.
Fill Types Diagram
FILL TYPE VISUAL RESULT +--------------+ +----------------------------+ | Solid | | One flat color | | Linear Grad | | Color fades left to right | | Radial Grad | | Color fades from center out| | Angular Grad | | Color sweeps around center | | Image | | A photo fills the shape | +--------------+ +----------------------------+
Applying a Solid Fill
- Select any shape on the canvas.
- In the Design Panel on the right, find the Fill section.
- Click the colored square to open the color picker.
- Choose a color by clicking in the gradient area, dragging the hue slider, or typing a hex code directly.
The Figma Color Picker
Color Picker Diagram
+---------------------------+ | [Gradient Box] | <-- Click to pick saturation/brightness | | +---------------------------+ | [Hue Slider] | <-- Drag to change the color family | [Opacity Slider] | <-- Drag to make color transparent +---------------------------+ | HEX: [#3A86FF] | <-- Type a specific hex color | R:[58] G:[134] B:[255] | <-- Or enter RGB values | Opacity: [100%] | +---------------------------+
Hex Codes, RGB, and HSL
Every color in digital design has a code. Figma supports three color formats:
- Hex – A six-character code like
#FF5733. Most designers use this. Copy hex codes from brand guidelines or websites. - RGB – Three numbers from 0 to 255 (Red, Green, Blue). Example:
255, 87, 51. - HSL – Hue, Saturation, Lightness. Easier for adjusting colors logically (make it lighter, make it less vibrant).
Opacity vs. Color Transparency
Figma offers two ways to make something transparent:
- Layer Opacity – In the Design Panel top-right, the opacity field controls the entire layer. Setting it to 50% makes the whole object (including text or child elements) semi-transparent.
- Fill Opacity – Inside the color picker, the opacity slider only affects that specific fill color. Other properties of the object stay fully visible.
Opacity Difference Diagram
Layer Opacity 50% Fill Opacity 50% +-----------------+ +-----------------+ | [Faded text] | | [Full text] | | [Faded fill] | | [Faded fill] | +-----------------+ +-----------------+ Everything fades Only fill fades
Creating a Gradient Fill
- Select a shape and open the Fill color picker.
- Click the fill type dropdown (the square icon in the top-left of the picker) and choose Linear.
- Two color stops appear. Click each stop to change its color.
- Drag the handles on the canvas to change the gradient direction and length.
Linear Gradient Example — App Banner
[Dark Blue #1a1a2e] --------> [Purple #7b2d8b]
| |
+------- Banner Background -----+
The gradient flows left to right
Adding Multiple Fills
Figma lets you stack multiple fills on one shape. Click the + icon in the Fill section to add another fill. The fills stack like layers — the top fill is the most visible.
A common use: add a semi-transparent dark fill on top of an image fill to darken the image and make white text readable over it.
Double Fill Diagram — Image with Overlay
Fill 2 (top): Black, Opacity 40% (darkens image) Fill 1 (bottom): Image (product photo) Result: Darkened image with readable white text on top
Image Fill
You can fill any shape with an image instead of a color.
- Select a shape.
- In the Fill section, click the fill type dropdown and choose Image.
- Click Choose Image and upload a file from your computer.
Image fill mode options:
- Fill – Scales the image to cover the whole shape. May crop edges.
- Fit – Shows the entire image inside the shape. May leave empty space.
- Crop – Lets you manually reposition and scale the image inside the shape.
- Tile – Repeats the image like a pattern.
Strokes (Borders)
A stroke is a border drawn around the edge of a shape. In the Design Panel, find the Stroke section below Fill and click + to add one.
Stroke Position Options
INSIDE CENTER OUTSIDE +--------+ +--------+ +--------+ || || | | || || || || | | || || +--------+ +--------+ +--------+ Border inside Border on edge Border outside
Stroke settings include color, thickness (weight in px), and style (solid, dashed, or dotted).
Color Styles
A color style saves a specific color so you can reuse it across your design. Change the style once, and every element using it updates automatically.
Creating a Color Style
- Select a shape with the fill color you want to save.
- In the Fill section, click the four-dot grid icon.
- Click + to create a new color style.
- Name it clearly, for example: Primary/Blue or Neutral/Gray-200.
Color Style Library Example
COLOR STYLES +-------------------------------+ | Primary | | Blue #3A86FF | | Indigo #5E60CE | | Neutral | | Gray-900 #1A1A2E (text) | | Gray-100 #F4F4F5 (bg) | | Semantic | | Success #06D6A0 | | Warning #FFB703 | | Error #EF233C | +-------------------------------+
Using the Eyedropper Tool
The eyedropper lets you pick any color visible on your screen — even from outside Figma. Open the color picker, click the eyedropper icon, then click any color on your screen to use it as the fill.
Accessible Color Contrast
Text must be readable against its background. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal text. Figma's color picker shows the contrast ratio when you select a text element on a colored background. Aim for a green or AA pass rating.
Contrast Example
Good: White text (#FFFFFF) on Dark Blue (#1A1A2E) → Ratio 16:1 ✓ Bad: Light Grey text (#CCCCCC) on White (#FFFFFF) → Ratio 1.6:1 ✗