Search
Clear search
Close search
Google apps
Main menu

Add color to an object

You can change the stroke and fill color of HTML, canvas, and SVG 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.

The color mixer

To select a color in the color mixer, 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.

Other options available in the color mixer:

  • 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.

Coloring elements

To apply colors using the Color panel:

  1. Click the element that you want to 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 the element that you want to 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:

  1. Select the Fill tool  from the toolbar. (If you see the Stroke tool or the Gradient tool on the toolbar instead, click and hold the icon for that tool 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 will turn green.
  4. Click the element.

To use the Stroke tool:

  1. Click and hold the Fill tool, then select the Stroke tool  from the pop-up menu. (If you see the Gradient tool on the toolbar instead, click and hold the icon for that tool to select the Fill tool from a pop-up menu.)
  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 style to apply to HTML elements.
    • Check the Stroke checkbox to specify a stroke width to apply to shapes.
  3. Hover over the element whose border you want to modify. The boundary of the element will turn green.
  4. Click the element.

Color swatches

The color swatch window lets you save colors or gradients into a palette of color swatches for easy re-use.

To save a color swatch:

  1. Click the element with the color or gradient that you want to save.
  2. Select either Fill or Border.
  3. Select 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 swatch button at the top of the color mixer.
  2. 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?