# 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](https://lovelyrender.com/documentation/get-around-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.

![The Colors panel of a card: the Light / dark mode switch and its help, the text, link and background swatches, with the trash can on the text and the circular arrow on the background, then the verdicts Light mode: Contrast 9.3:1. Very readable (AAA) and Dark mode: Contrast 3.7:1. Large text only (AA).](https://static.lovelyrender.com/uploads/2026/10/959-doc-pages-couleurs.png)

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.

![The background color picker: the Color, Gradient and Filters tabs, the current color Primary, the eleven System colors with Primary circled, the Theme line and its Edit color button, the Opacity slider at 100 and the Clear button.](https://static.lovelyrender.com/uploads/2026/10/963-doc-pages-selecteur.png)

| Element | Role |
| --- | --- |
| The current color | Its name or **Custom**, then its value. A click opens **Customize color**, a free swatch picker with transparency. **Close** closes it. |
| **System** | The eleven system colors of your site. |
| **Theme** | Your brand colors. |
| **Opacity** | From 0 to 100, for a **System** or **Theme** color. Default value: 100. |
| **Clear** | Removes the color from this slot. |

| Color | Role |
| --- | --- |
| **Dark reference**, **Light reference** | The two references of the contrast calculation. In light mode, the dark one colors the text and the light one the page background. In dark mode, they swap places. |
| **Neutral light**, **Neutral dark** | The background of cards and panels, in light mode then in dark mode. The dark neutral also colors borders and secondary text in light mode. |
| **Primary** | The main color of the brand: primary buttons, links and the selected tab. |
| **Secondary** | The supporting color: secondary buttons and hovered links. |
| **Accent** | A touch of color where the brand would weigh too much, for example a badge. |
| **Danger**, **Warning**, **Information**, **Success** | The site’s messages: error, warning, information and successful submission. |

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 form of a brand color: the swatch picker on a dark green, the value 22613D, the line Contrast 7.1:1. Very readable (AAA) and the Add a value for dark mode switch turned on, above Dark mode color.](https://static.lovelyrender.com/uploads/2026/10/148-design-contraste.png)

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.

**Note:** Creating or editing a color, a gradient or a filter is reserved for site administrators. Other roles see neither **Add color** nor **Edit color**, nor the gradient and filter buttons: they choose among the existing entries.

**Note:** A color cannot be deleted while a content item or a style uses it. [Set your colors, fonts and scales](https://lovelyrender.com/documentation/set-colors-fonts-scales/) describes the **Design System** screen.

## 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.**

| Setting | Effect | Default value |
| --- | --- | --- |
| **Apply a pattern** | Repeats the gradient as a tile instead of filling the whole background. The setting belongs to the block: the same gradient can be repeated here and stretched elsewhere. | Off |
| **Pattern size** | The size of a tile, in X and in Y, in `px`, `em`, `rem`, `%`, `vw` or `vh`. | 32px on each axis |

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

**Note:** A gradient text takes the place of the background. The panel then disables the background color and shows **A gradient text cannot have a background color.**

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

| Setting | Range | Neutral value |
| --- | --- | --- |
| **Blur** | 0 to 40 px | 0 |
| **Brightness** | 0 to 200% | 100 |
| **Contrast** | 0 to 200% | 100 |
| **Saturation** | 0 to 300% | 100 |
| **Grayscale** | 0 to 100% | 0 |
| **Sepia** | 0 to 100% | 0 |
| **Invert** | 0 to 100% | 0 |
| **Hue rotation** | -180 to 180° | 0 |

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

**Warning:** A filter shows only through a transparent background. On an opaque background, the tab shows **Filters need a background color that is not fully opaque.** First lower the background’s **Opacity**.

## 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](https://lovelyrender.com/documentation/appearance-motion-switchers/). 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.

| Verdict | Ratio | Purpose |
| --- | --- | --- |
| **Very readable (AAA).** | 7:1 and above | Comfortable for everyone, even in small text. |
| **Readable (AA).** | From 4.5:1 to 7:1 | The expected level for body text. |
| **Large text only (AA).** | From 3:1 to 4.5:1 | A large heading, not a paragraph. |
| **Too low. The text will be hard to read on this color.** | Less than 3:1 | To be avoided. |

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.

**Note:** The verdict weighs neither the link color nor a background image. No verdict prevents saving or publishing. [Check the accessibility of your pages](https://lovelyrender.com/documentation/check-accessibility/) describes the other checks.

## See also

- [Set a background](https://lovelyrender.com/documentation/set-background/)
- [Set your colors, fonts and scales](https://lovelyrender.com/documentation/set-colors-fonts-scales/)
- [Check the accessibility of your pages](https://lovelyrender.com/documentation/check-accessibility/)
- [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/)