Add color to an object

You can change the stroke and fill color of elements by using the color tools. You can adjust colors using the Color panel, the Properties panel, or the Stroke or the Fill tools in the toolbar.
To change the background color of a page, use the Fill field in the Properties panel when no elements are selected.

The color mixer

To select a color in the color mixer:

  1. Use the color slider to select the hue.
  2. Click inside the color field to select the desired shade.
  3. Use the alpha slider to change the transparency of the color. 0 is completely transparent, while 100 is completely opaque.

Other options available in the color mixer:

  • Type a color's hexadecimal value (such as 0700EA) in the # field at the upper right corner.
  • Reset the color settings to the default (white fill and black stroke) by clicking the Default colors button.
  • Switch the fill and stroke colors by clicking the Swap fill and stroke button.
  • Remove the stroke or fill color by clicking the No color button.
  • Create a color gradient.

Coloring elements

To apply a color using the Color panel:

  1. Select the element that you want to color.
  2. Click either the Fill swatch or the Border swatch at the top of the Color panel.
  3. Select a color in the color mixer.

To apply a color using the Properties panel:

  1. Select the element that you want to color.
  2. In the Style section of the Properties panel, click the color swatch in either the Fill color field or the Border color field. The color mixer opens.
  3. Select a color in the color mixer.

To use the Fill tool:

  1. Select the Fill tool from the toolbar or press F. (If you see the Stroke tool or the Gradient tool on the toolbar instead, click and hold the button to select the Fill tool from a pop-up menu.)
  2. Select a color in the color mixer.
  3. Hover over the element that you want to color. The boundary of the element turns green.
  4. Click the element.

To use the Stroke tool:

  1. Click and hold the Fill tool in the toolbar, then select the Stroke tool from the pop-up menu. (If you see the Gradient tool on the toolbar instead, click and hold the button to select the Stroke tool from a pop-up menu.) You can also press K.
  2. Customize the stroke using the tool options bar:
    • Click the color swatch to select the color of the stroke or border.
    • Check the Border or Style checkbox to specify a border width and border style. (Applies to HTML elements.)
    • Check the Stroke checkbox to specify a stroke width. (Applies to shapes.)
  3. Hover over the element whose border you want to modify. The boundary of the element turns green.
  4. Click the element.

Color swatches

The color swatch palette lets you save colors or gradients for easy reuse.

To save a color swatch:

  1. Select the element with the color or gradient that you want to save.
  2. On the Color panel, select either Fill or Border.
  3. Click the Swatches button at the top of the color mixer.
  4. Click the Add swatch button.

To use a color swatch:

  1. While selecting a color, click the Swatches button at the top of the color mixer.
  2. Select the color or gradient that you want to use.

Gradients

A gradient is a multicolor fill where each color gradually changes into the next. To create and modify gradients, see Using Gradients.

Was this helpful?
How can we improve it?