Add color to an object

You can change the fill and stroke colors of elements by various methods:

• the Color panel
• the Properties panel
• the Stroke and Fill tools in the toolbar
• the color chips in the toolbar

Active colors

The active fill and stroke colors are displayed in the color chips at the bottom of the left-hand toolbar. The stroke color (which is also the border color) is represented by a hollow chip.

In the example below, the color chips are set to the default colors: white fill and black stroke.

The active colors are applied when you use the following tools:

• the Element tool
• the Pen and Shape tools
• the Stroke and Fill tools

If a single element is selected, the active colors reflect the fill and stroke colors of that element.

The buttons above the color chips in the toolbar let you quickly change the active colors:

•  Default colors - Reset the active colors to the default (white fill and black stroke).
• Swap fill and stroke - Switch the fill and stroke colors. (You can also press X.)

The color mixer

The color mixer lets you select a color in a visual dialog, which is always available in the Color panel. The color mixer also pops up when you click a color chip in the toolbar, or in the field for a color-based property.

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.

You can enter the color and alpha values using the text fields in the color mixer dialog:

• # - Type a color's hexadecimal value (such as 26C6DA).
• % (or A in the Color panel) - Type the alpha (transparency) value. 0 is completely transparent, while 100 is completely opaque.
• RGB (in the Color panel only) - Type a color's RGB (red, green, and blue) values.

Additional options are available in the color mixer, with the active selection highlighted in yellow:

• No color - Remove the stroke or fill color.
• Solid color  - Select a solid color.
• Linear gradient ​​ - Create a linear gradient.
• Radial gradient - Create a radial gradient.
• Swatches - Switch to the color swatch palette.

The eyedropper tool

The eyedropper tool lets you select an existing color on the stage.

To use it, select the Eyedropper tool  from the toolbar, or press I. The eyedropper also automatically activates when you open the color mixer to select a color, such as for an element's fill or stroke color. (The eyedropper cannot be used to set a color for the Text tool.)

You can't use the eyedropper on Google Web Designer's toolbar, panels, timeline, or menus. Click any of these parts of the interface or press Esc to deactivate the automatic eyedropper.

The eyedropper tool doesn't take into account alpha (transparency) values. For example, if an element appears pink because the element is red and translucent on a white background, the eyedropper will select pink with 100% opacity when used on the element.

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 Fill or Border 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, from the color swatch palette, or on the stage with the eyedropper.

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 by clicking the color chip in the toolbar, or by using the Color panel.
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:
   • Click the color chip in the toolbar to select the color of the stroke or border.
   • Specify the Border (for most elements) or Stroke (for Line and Oval shapes) width in the tool options bar.
   • For borders, choose a border style from the Style dropdown in the tool options bar.
   
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.