logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Dev Mode
Collaboration
Import and export
File settings
Account
File management
Team management
Sharing and permissions
Billing
Organization
Apps
Work with support
Help Center/Layer properties/Color properties/Color picker

Color picker

The color picker allows you to apply colors to shape layers, text layers, and other vector networks. In Motiff, you can switch between solid colors, gradients, or images with the color picker. You can also adjust the hue, saturation, or opacity of a color, as well as set blend modes.

Open color picker

You need to add a fill or stroke property to the layer before you can find the color picker in the corresponding property in the design panel.

If the fill or stroke colors of multiple selected layers are the same, you can directly view and adjust the colors in the fill or stroke area. If the selected layers have different colors, you need to view and adjust them in the Fill section.

In the design panel, you can view the current color that shows the default HEX color value and opacity. Click the color well next to the property value to open color picker.

'color picker 1.png'

Use color picker

After opening the color picker, you can view and adjust any paint properties:

'Use color picker.png'

  1. 1.Click '16_Common_ArrowDown.svg' in the upper left corner to select any color type from solid color, gradient, or image.
  2. 2.Use '16_Panel_BlendEmpty.svg' to toggle the layer's blend mode.
  3. 3.The white circle in the color palette represents the current color. Click and drag the circle to adjust any color.
  4. 4.Click '16_Panel_Eyedropper.svg' and select the eyedropper tool to pick and select colors from any layer or image on the canvas.
  5. 5.Use the slider below the color palette to adjust the hue. Click and drag the circle left or right to adjust.
  6. 6.Use the second slider to adjust the color's opacity.
  7. 7.Click '16_Common_ArrowDown.svg' to switch between the five color models: RGB, HEX, CSS, HSB, and HSL. Learn more about color models in Motiff.

Tip: When selecting colors through the slider in the color palette, you can adjust by scrolling the mouse wheel or touchpad. Press the modifier key ⌥ Option / Alt during scrolling allows for quick opacity setting.

Use eyedropper tool

The eyedropper tool can identify the colors of layers or images in the file and apply them to the target layer:

  1. 1.Select the layer you want to edit.
  2. 2.Use the keyboard shortcut i to open the eyedropper tool.
  3. 3.Hover the cursor over the color you want to sample on the canvas. At this time, the magnifying glass window will display the color of the sampled pixel and the hexadecimal color code.
  4. 4.Click to apply the picked color to the selected layer.

Tip: If you want to reuse colors in your design file, you can save colors, gradients, and images as styles.

Learn more about creating color styles.