Related Videos

• Paints in Figma

  Who can use this feature

  Supported on any team or organization plan.

  Anyone with can edit access can apply or edit paints

  Paints can be colors, gradients, or images. In Figma, you can use the Color picker to apply paints to fills and strokes.

  Paints can be applied to the following objects and shapes using the fill or stroke properties:

  • Text layers
  • Basic shapes
  • Vector networks
  • Boolean operations
  • Frames

  

  Paint types

  There are three different types of paints you can apply:

  • Solid: a solid color or paint.
  • Gradients: choose from four different gradients:
    • Linear (gradient): a progressive transition between two colors on a straight line. You can choose the angle of the line.
    • Radial (gradient): a circular gradient that has a color at the center which transitions to another color on the edge. This could be another color, or a fade to transparent.
    • Diamond (gradient): a gradient with four points that starts in the center of the object or layer. You can adjust the width and height of the gradient individually.
    • Angular (gradient): creates a gradient clockwise from the starting position. You can adjust the location of both colors in the gradient to create a softer or harsher angle.
  • Image or GIF: a static image or animated GIF. Learn more about adding images to your designs.

  

  Figma Tutorial: Gradients
• Apply paints with the color picker

  Before you start

  Who can use this feature

  Supported on any team or plan

  You will need can edit access to the file to use the color picker.

  The color picker allows you to apply paints to text layers, strokes and other vector objects.

  Use the color picker to apply solid fills, gradients, or images. You can also control the hue, saturation, or opacity of a color, as well as apply blend modes.

  Open the color picker

  You'll need to apply a fill or stroke to a layer before you can access the color picker. Once applied, you can access the color picker in the right sidebar.

  If all layers in your selection have the same fill or stroke color, you can view and update the color in the Fill or Stroke section.

  If the layers in your selection have different colors applied, you can view and update colors from the Selection colors section.

  In the right sidebar, you can view a swatch of the current color, the hexcode value, and the opacity. To open the color picker, click on the color swatch.

  Tip! You can also type a CSS color directly in the field. See the list of CSS colors that are supported by all browsers on the w3 website: https://www.w3schools.com/cssref/css_colors.asp

  

  Use the color picker

  Once you've opened the color picker, you have access to any paint properties:

  

  1. Use the top-left menu to select a type of paint. Choose from a solid color, a gradient, an image or an animated GIF.
  2. Use the to preview and apply blend modes to layers →
  3. Use the color palette in the body of the modal to select a color:
     • View the current color is shown in the white circle.
     • Explore any related tints, tones, and shades.
     • Click and drag the white circle to adjust the color.
  4. Click the to select the eyedropper tool. This allows you to select any color from an image or layer in the canvas.
  5. Adjust the hue using the slider below the palette. Click and drag left or right to adjust.
  6. Adjust the opacity of the color using the second slider.
  7. View the color notation across different color models. Use the menu to choose between RGB, HEX, CSS and HSB. Learn more about color models in Figma →
  8. Use the next to the Document color to select a palette. This allows you to select colors from local colors and styles, as well as styles from enabled libraries.

  Access sliders when you select colors in the Color palette Use your mouse-wheel or trackpad to scroll along the hue slider. Hold down the modifier key while scrolling to set the opacity:

  1. MacOS: Option
  2. Windows: Alt

  Use the eyedropper tool

  The eyedropper tool allows you to select and sample colors from any object or image in a file. Use the eyedropper to identify colors and apply them to your layers.

  1. Select the object you'd like to edit.
  2. Use the i keyboard shortcut to open the eyedropper tool.
  3. Hover over the color in the canvas you'd like to sample. The magnifier window will show you both the color and hex code of the sampled pixel.
  4. Click to apply the sampled color to the selected object:

  Want to reuse colors across your designs? Save your colors, gradients, and images as Styles. Learn more about Learn how to create color styles →

• Color models in Figma

  Before you start

  Who can use this feature

  Colors are available on any team or plan

  Anyone with can edit access to the file can use the color picker and select a color model.

  There are lots of terms used to describe color. In this article, we use the term color model to describe the different ways your can represent a color.

  Figma allows you to see colors across five color models: HEX, HSB, HSL, CSS, and RGB.

  Switching between color models only affects how Figma describes colors, it doesn't affect how Figma renders them.

  

  Color profiles do affect how Figma renders colors. If you are using the Figma Desktop app, you can choose to apply a different color profile to your working space. 

  Regardless of your desired color profile, Figma exports all assets using the sRGB color profile. Learn about color management in the Desktop app.

  Color models in Figma

  By default, Figma represents color values using the HEX model. You can also view color notation for other models in the color picker.

  HEX

  Is the default color model in Figma and refers to the Hexadecimal color. This is an alphanumeric shorthand representative of the RGB values.

  Creators in web, or digital design refer to the notation for this color model as hexcodes.

  RGB

  RGB or Red Green Blue is the most commonly used color model.

  Every color that is rendered on a monitor or screen will be made up of varying amounts of Red Green and Blue.

  You may have also seen RGBa referenced in other resources. The a in RGBa stands for alpha, which represents the opacity of the color. This represents opacity as a value between 0 and 100%.

  HSB

  Hue Saturation Brightness is an alternative representation of the RGB model.

  This is based around how the human eye perceives color, versus how a display would (in RGB).

  All color models will have an additional Alpha channel (or value), which represents the Opacity of the color.This represents opacity as a value between 0 and 100%.

  HSL

  Hue Saturation Luminance is another color model based around how the human eye perceives color.

  Like HSB, it is an alternative representation of the RGB model. The main difference between HSB and HSL is how saturation and lightness are treated.

  CSS

  The CSS color model allows you to view or enter RGBa values using CSS syntax. This includes the format, followed by the values for each color: rgba(47, 128, 237, 1)

  Want to communicate colors to a developer or engineer? The CSS model lets you copy CSS-friendly notation for the selected color. This lets you paste this directly into a stylesheet, formatting included. Learn more about Developer Handoff.

  View Color models in the Color Picker

  While Figma exports everything in the sRGB color model, you may want to view colors in another color model.

  View and update colors across different color models in the Color picker.

  1. Click on the Fill or Stroke in the right sidebar to open the Color picker.
  2. Below the Hue and Opacity sliders you can see the current color model and the corresponding values.
  3. Use the drop down to switch color models. Choose between HEX, HSB, HSL, CSS and RGB:
  4. Figma will show the values in the notation you selected.
• Create unique effects with Blend modes

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Users with edit access to a file can add or adjust Blend modes

  Blend Modes allow you to define how you want two layers to blend together. This involves taking the pixels from each layer and applying calculations to them.

  This allows you to adjust aspects of an image, like the background color. Or, create interesting overlays and textures.

  You can adjust the Blend mode of an entire layer, or an individual fill. You can only apply one blend mode to each layer or Fill.

  Blend Modes

  There are 16 Blend modes available in Figma.

  • Normal
  • Darken
  • Multiply
  • Color burn
  • Light
  • Screen
  • Color dodge
  • Overlay
  • Soft light
  • Hard light
  • Difference
  • Exclusion
  • Hue
  • Saturation
  • Color
  • Luminosity

  Fill

  1. Click on the Fill thumbnail in the Properties Panel to open the Color picker.

  2. Click the droplet icon in the top-right corner of the Color picker to select a Blend mode:

     

  3. Select the desired Blend mode to apply. You can only apply one blend mode to each fill.

  4. Click the X to return to the Canvas.

  Tip: Preview blend modes on the canvas by hovering over each option in the menu before selecting it.

  

  Layer

  Apply a blend mode to an entire layer in the Layer section of the right sidebar.

  1. Select the layer you want to apply the blend mode to.

  2. In the Layer section of the Properties Panel, click on the blend mode field. This will be set to Pass Through by default.

     

  3. Select the desired Blend mode to apply. You can apply one blend mode to each layer.

• View and adjust colors in a mixed selection

  Before you Start

  Who can use this feature

  Users on Any plan can use paints in their designs

  Users with Edit access can view and update paint properties in a mixed selection

  The Selection Colors feature allows you to view and adjust any colors applied to objects in a selection.

  • Select objects or layers and view or adjust individual colors in the selection.
  • Select a parent object, like a Frame, Group, or Component. View and adjust the color properties of any child objects.

  Note: You can still adjust the properties of the parent object in the Properties Panel. This allows you to update Fill and Stroke properties of the Frame, without affecting child objects.

  Selection colors include:

  ✅ Fills
  ✅ Strokes
  ✅ Solid colors
  ✅ Gradients (linear, radial, angular, diamond)
  ✅ Boolean groups*

  Selection colors do not include:

  🚫 Images
  🚫 Hidden fills
  🚫 Masks

  *Note: Only colors applied to the combined Boolean group will be included in the Selection Colors. Colors applied to any child objects won't show up in the Selection Colors section.

  View Selection Colors

  View colors in your selection in the Selection Colors section of the Properties Panel.

  Figma groups colors into Color Styles and Paints - any Fills or Strokes that you haven't saved as Styles.

  Paints or Styles only appear once in the Selection colors section. By default, we show the three most frequently used Paints and Styles.

  1. Click on a Paint to open the Color picker. This allows you to adjust the paint type, color, hue, opacity, and blend mode. Or, pick another color from your Document colors.
  2. Click on a style to open the Style modal. This allows you to select from your list of local styles, or styles from enabled libraries.
  3. Click the detach icon
     to detach the style
  4. Click the target icon
     to select all layers that use that color
  5. Click the Style icon
     to open the Style picker. This allows you to apply a Style to the selected color, or create a new Style.
  6. Use the percentage field to adjust the opacity of a paint
  7. Click the See all colors or See all styles link to view the rest of the colors in the selection

  

  Want to swap two colors around? We won't update the Selection colors section until you close the Color Picker.

  1. Click on the first color you want to swap.
  2. Select the second color in the Document colors section of the Color picker.
  3. Without closing the Color picker, click on the second color in the Selection Colors section.
  4. Select the first color in the Document colors section.
  5. Close the Color picker.