Figma Colors and Fills
Color communicates meaning, creates hierarchy, and builds brand identity. Figma gives you several fill types — solid color, gradient, and image — plus a way to save and reuse colors across your entire project.
Applying a Fill
Select any shape or text layer. In the right panel, click the + button next to Fill to add a fill. A color swatch appears. Click the swatch to open the color picker.
The Color Picker
Color Picker Layout ------------------------------------ [Large gradient square – pick hue + saturation] [Hue slider – drag left/right to change base color] [Opacity slider – drag to set transparency] ------------------------------------ HEX field: #3B82F6 RGB fields: R 59 G 130 B 246 HSL fields: H 217 S 91% L 60% Opacity: 100% ------------------------------------
Click the color mode label (HEX, RGB, or HSL) to switch between them. Paste a hex code directly into the hex field to match a specific brand color.
Fill Types
Click the fill type dropdown (default: Solid) to switch between fill modes.
Solid Fill
A single flat color fills the entire shape. This is the most common fill type for backgrounds, buttons, and icons.
Linear Gradient
Color transitions in a straight line from one point to another. The gradient has at least two color stops. Click a stop to change its color. Drag stops to adjust where the color change happens.
Linear Gradient Example (left to right): [Blue #1A73E8] ------→ [Purple #7C3AED] Stop 1 at 0% Stop 2 at 100%
Radial Gradient
Color radiates outward from a center point. The center shows the first color stop, and the edges show the last. Useful for glowing effects or spotlight-style backgrounds.
Angular Gradient
Color rotates in a circle around a center point, like a color wheel slice. Used for niche visual effects.
Diamond Gradient
Color radiates outward in a diamond (square rotated 45°) shape from the center.
Image Fill
Places any image inside a shape. Use this to crop a photo into a circle (avatar), a rounded rectangle (card thumbnail), or any custom shape. Four fit modes control how the image fills the shape:
- Fill – Image scales to cover the entire shape (may crop edges).
- Fit – Image scales to fit fully inside the shape (may show empty space at edges).
- Crop – You manually position and scale the image inside the shape.
- Tile – Image repeats to fill the shape like a pattern.
Opacity vs Fill Opacity
Two separate opacity controls exist in Figma:
- Layer opacity – Found in the top right of the right panel (next to the blend mode). Affects the entire layer including fills, strokes, and effects.
- Fill opacity – Found inside the color picker. Affects only that fill, not the stroke or effects.
Use fill opacity when you want a semi-transparent background but a fully opaque stroke.
Multiple Fills
Figma lets you stack multiple fills on one layer. The fill at the top of the list renders in front. Use this to layer a semi-transparent color over an image, creating an overlay effect.
Fill Stack Example (overlay effect): Fill 1: Image (a photo) Fill 2: Solid blue #1A73E8 at 40% opacity (on top of the photo) Result: Photo with a blue tint overlay
Color Styles
Save any color as a named Color Style so you can reuse it anywhere in your file. Click the four-dot icon next to any fill and choose + to create a style.
Recommended Color Style Naming
Brand/Primary → #1A73E8 (main brand blue) Brand/Secondary → #7C3AED (accent purple) Neutral/Background → #F9FAFB Neutral/Surface → #FFFFFF Neutral/Border → #E5E7EB Text/Primary → #111827 Text/Secondary → #6B7280 Status/Success → #10B981 Status/Warning → #F59E0B Status/Error → #EF4444
Blend Modes
Blend modes control how a layer interacts visually with the layers beneath it. The dropdown sits at the top of the right panel next to the opacity value. Common useful modes:
- Normal – No blending. Layer shows on top as-is.
- Multiply – Darkens by multiplying colors. Good for shadows on photos.
- Screen – Lightens by inverting and multiplying. Good for light effects.
- Overlay – Combines Multiply and Screen for a contrast-boosting effect.
Picking Colors from Your Canvas
Inside any color picker, click the eyedropper icon and then click any pixel on your screen — even outside Figma — to sample that color. Use this to match a color from a reference image or a brand logo.