Add color to an object

You can change the stroke and fill colors of elements by using the Color panel, the Properties panel, or the Stroke or the Fill tools in the toolbar.

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.

Other options available in the color mixer:

  • # - Type a color's hexadecimal value (such as 26C6DA).
  • RGB - Type a color's RGB (red, green, and blue) values.
  • A - Type the alpha (transparency) value. 0 is completely transparent, while 100 is completely opaque.
  • Default colors - Reset the color settings to the default (white fill and black stroke).
  • Swap fill and stroke - Switch the fill and stroke colors.
  • No color - Remove the stroke or fill color.
  • Linear gradient ​​ - Create a linear gradient.
  • Radial gradient - Create a radial gradient.
  • Swatches - Switch to the color swatch palette.

Coloring elements

To change the background color of a page, use the Fill field in the Properties panel when no elements are selected.

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 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 or from the color swatch palette.

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 or from the color swatch palette.

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 or from the color swatch palette.
  3. Hover over the element that you want to color. A green outline appears around the element.
  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 change. A green outline appears around the element.
  4. Click the element.

The color swatch palette

The color swatch palette contains a number of colors by default, and also lets you save colors or gradients for easy reuse within the document. You can also generate swatches based on the colors in an image. Learn more about using color swatches.

Gradients

A gradient is a multicolor fill where each color gradually changes into the next. Learn how to use gradients.

Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue