Skip to main content
InVision Support Home Page

How do I adjust colors in Studio?

To adjust the color of a layer or object in Studio:

  1. Select the layer or object.
  2. In the inspector (or the Preview player settings module), click the color editing icon (studio-color-editor-box.png).
  3. In the color editing module, adjust the color as wanted.
    Use the color picker icon (studio-color-picker-icon.png), scrubbers, HEX field, or RGB / HSL dropdown, or click one of the colors saved to your Global ColorsDocument ColorsRecently Used dropdown lists.

As detailed in the table below, the location of the color editing icon depends on the type of layer or object you have selected. Note that the color of the color editing icon changes dynamically based on the current color of the layer or object you have selected.

Type of Layer or Object Location of color editing icon

Inspector > Background:


Text Inspector > Name of Font > next to Font Weight dropdown:

Fill (text or object layer) Inspector > under Fills:


You can apply a fill to any object or text layer.
Border Inspector > under Borders:


You can apply a boarder to any object or text layer.
Shadow Inspector > under Shadows:


You can apply a shadow to any object or text layer.
Inner Shadow Inspector > under Inner Shadows:


You can apply an inner shadow to any object or text layer.
Preview player (outer area) Preview player > settings icon (studio-preview-player-settings-icon.png) > next to Override artboard settings checkbox:

The coverage area differs depending on your Preset and Frame selections.

With a layer or object selected, you can also use the keyboard shortcut to open the color picker:
Mac shortcut: ⌃ C   Windows shortcut: ⇧⌥ I