Add colour to an object

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

• The colour panel
• the properties panel
• the stroke and fill tools in the toolbar
• the colour chips in the toolbar

Active colours

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

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

The active colours 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 colours reflect the fill and stroke colours of that element.

The buttons above the colour chips in the toolbar let you quickly change the active colours:

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

The colour mixer

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

To select a colour in the colour mixer:

1. Use the colour slider to select the hue.
2. Click inside the colour field to select the desired shade.
3. Use the alpha slider to change the transparency of the colour.

You can enter the colour and alpha values using the text fields in the colour mixer dialogue:

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

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

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

The eyedropper tool

The eyedropper tool lets you select an existing colour 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 colour mixer to select a colour, such as for an element's fill or stroke colour. (The eyedropper cannot be used to set a colour 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.

Colouring elements

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

You can change the stroke and fill colour of elements by using the colour tools. You can adjust colours using the colour panel, the properties panel, or the stroke or the fill tools in the toolbar.

To apply a colour using the colour panel:

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

To apply a colour using the Properties panel:

1. Select the element that you want to colour.
2. In the Style section of the Properties panel, click the colour swatch in either the Fill colour field or the Border colour field. The colour mixer opens.
3. Select a colour in the colour mixer, from the colour 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 colour by clicking the colour chip in the toolbar, or by using the colour panel.
3. Hover over the element that you want to colour. 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. Customise the stroke:
   • Click the colour chip in the toolbar to select the colour 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 colour swatch palette

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

Gradients

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