Search
Clear search
Close search
Google apps
Main menu

Add color to an object

You can adjust the stroke and fill color of HTML, canvas, and SVG elements by using the color tools. You can adjust colors using either the color panel, the properties panel, or the Stroke  or the Fill   tools in the toolbar.

Choose a color in the color mixer

To select a color, click the color bar to select the hue, then click in the mixer to select the desired tint or shade. Use the alpha slider to change the transparency of the color you've chosen - a value of 0 is completely transparent, and a value of 100 is completely opaque.

You can also:

  • Type a color’s hexadecimal value directly into the hex field.
  • Return to the default color settings (white fill and black stroke) by clicking the Default Colors  button.
  • Swap colors between the fill and the stroke by clicking the Swap Colors  button.
  • Remove stroke or fill color by clicking the No Color  button.

  • Create a color gradient

Applying colors to elements

To apply colors using the color panel:

  1. Click on the element you want to re-color.
  2. Click either the fill swatch or the border swatch.
  3. Select a color in the color mixer.

To apply colors using the properties panel:

  1. Click on the element you want to re-color.
  2. In the Style pane of the Properties panel, click the color swatch next to either the fill icon or the border icon. This opens the color mixer.
  3. Select a color in the color mixer.

To use the fill tool from the toolbar:

  1. Choose the fill tool by clicking the color tool in the toolbar, holding it until the pop-up menu shows, and then selecting it.
  2. Select a color in the color mixer.
  3. Hover over the element you want to color. The boundary of the element will turn green.
  4. Click the element.

To use the stroke tool from the toolbar:

  1. Choose the stroke tool by clicking the color tool in the toolbar, holding it until the pop-up menu shows, and then selecting it.
  2. Select the styles you want to use by in the tool options bar
    • Click the color swatch to select the color of the stroke or border
    • Check the Border and Style options and select their values for to apply to HTML elements.
    • Check the Stroke option and set its value to apply to canvas elements.
  3. Hover over the element whose border you want to modify. The boundary of the element will turn green.
  4. Click the element.

Saving and using color swatches

The color swatch window lets you save colors or gradients into a palette of color swatches.

To save a color swatch:

  1. Click on the element you want to re-color.
  2. Click the swatch button at the top of the color mixer.
  3. Click the "Add swatch" button.

To use a color swatch:

  1. In the color panel, choose a color or create a gradient.
  2. Click either the fill swatch or the border swatch.
  3. Click the swatch button at the top of the color mixer.
  4. Click the color or gradient that you want to apply.

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 article helpful?
How can we improve it?