Color a block

The Colors panel sets the color of the text, the links and the background of a block. This article explains how to choose a color, create a brand color, add a gradient and set dark mode. You will also learn to read the block’s contrast.

Before you start

• The panel offers your site’s colors: the eleven system colors and your brand colors. A block that uses one of these colors follows its changes.
• Colors are set by state and by screen: one background color on hover and another on phone. Find your way around the editor shows how to choose the state and the screen.

Open the Colors panel

1. Select the block and open the Styles tab of the inspector.
2. Expand the Colors panel if it is collapsed.

The panel shows one swatch per slot, under its icon: Text color, Link color and Background color. On a list, a fourth swatch sets the Marker color, the bullet or number in front of each line.

An icon next to a swatch shows where its color comes from. The trash can removes a color set on the block. The circular arrow restores the color of the block’s style and the crossed-out circle removes the color inherited from the style.

Choose a color

1. Click the swatch of the slot. The picker opens on the Color tab.
2. Click a color under System or under Theme. The page updates.
3. Optional: set the Opacity to make the color transparent.

Prefer a site color to a custom color. The day the brand guidelines change, the block follows without any rework.

Create a brand color

1. In the picker, click the current color and compose your shade in Customize color.
2. Next to Theme, click Add color (+). The button appears once the shade is composed, as long as no site color is chosen.
3. Optional: give it a Name, for example “Main blue”.
4. For a different shade in dark mode, turn on Add a dark-mode value and choose the Color in dark mode.
5. Click Save. The color applies to the block and joins Theme on every block of the site.

Under the swatch picker, the form gives the color’s contrast, for example Contrast 7.1:1. Very readable (AAA). It measures it against whichever of your two references reads best with it: this is the best possible result with this color.

The Edit color button (pencil) changes the chosen color for every block that uses it, system colors included. The name of a system color cannot be changed.

With no value for dark mode, a color you created keeps the same shade in both modes.

Add a gradient

A gradient is an entry of the design system: you create it once and reuse it everywhere. Editing it changes every block that carries it. The Gradient tab appears for the text color and the background color.

1. In the picker, open the Gradient tab.
2. Choose a gradient from the list, or click Add gradient (+) to create one.
3. In the form, give a Name, optional, then compose the gradient: its color stops, its linear or radial type and its angle.
4. For dark mode, turn on Add a dark-scheme variant. The variant keeps the shape and positions of the light version, only its colors change.
5. Click Save. A preview of the gradient appears under the list.

Edit gradient (pencil) changes the chosen gradient for the whole site. Clear removes it from the block and leaves it in the design system. A gradient with no stops cannot be saved: Choose a gradient before saving.

A slot takes a solid color or a gradient, never both. With a solid color set, the Gradient tab shows A solid color is set. Clear it to use a gradient. and offers to clear it. The reverse shows A gradient is set. Clear it to use solid colors.

Blur what passes behind a block

The Filters tab appears for the background color only. A filter acts on what is behind the block, for example the page scrolling under a banner. A filter is an entry of the design system, like a gradient. The Effects panel uses the same filters.

Your site starts with the Light blur filter, a 12 px blur. A filter whose sliders are all neutral cannot be saved: Move at least one slider before saving.

Set dark mode

In dark mode, a site color takes its dark value if it has one. To choose a block’s dark colors yourself, turn on the Light / Dark mode switch. It is off by default.

1. At the top of the Colors panel, turn on Light / Dark mode. Each swatch splits in two, the light one on the left and the dark one on the right.
2. Click a swatch. The picker shows two editors, Light and Dark.
3. Choose the color for each mode.

The page shows the dark colors when the visitor’s system is set to dark, or when they chose Dark in an appearance switcher. A slot with no dark color keeps its light color in both modes. To check the result, click Preview in dark mode in the top bar.

• The Swap light and dark colors button appears as soon as a variant has a value. It swaps the slot’s two colors across all its states.
• The two variants of a slot are of the same type, solid or gradient.
• The dark variant of a gradient belongs to the gradient: it is set in its form.
• Turning the switch off keeps your dark colors. They come back when you turn it on again.

Color a block’s links

A link written in a text follows the Link style: your Primary color, then Secondary on hover. On a section, a card or a paragraph, the Link color colors the links of its texts differently. It gives, for example, light links to a dark footer.

Several settings can target the same link. In this order, the last one wins:

1. the Link style, for all the links of the site;
2. another style chosen for the link itself;
3. the link color of a style placed on a block that contains the link;
4. the Link color set on a block that contains the link;
5. the color set on the link itself, in its Styles tab.

With no link color chosen, a block whose background is taken from the site colors gives its links the most readable color on that background. A custom, transparent or gradient background does not trigger this calculation.

The Link color is not offered on a block that is itself a link. This is the case of a Button, a menu link, an entry of a table of contents, of a page list or of a language selector, a breadcrumb step or a linked Heading. The color of such a block is its text color.

Read the block’s contrast

Under the swatches, the panel compares the block’s text color with its background color, those of its style included. It gives their contrast ratio and its verdict.

When one of the two colors changes in dark mode, the panel gives one verdict per mode, preceded by Light mode: and Dark mode:. On a site that shows only one mode, only that mode’s verdict appears.

The verdict does not appear when one of the two colors is a gradient or a transparent color. It does not appear either on a block with no background or no text color. The color the visitor will see is then not known. Set a solid, opaque color on both sides to get it.

See also

• Set a background
• Set your colors, fonts and scales
• Check the accessibility of your pages
• Save a block’s style