This article covers how to use the Color Picker in the Thryv® Website Builder, including how to apply single colors and gradients, use recent colors, enter HEX and RGB color codes, and adjust opacity. This article does not cover managing brand colors or global design settings. For help with global design settings, see how to manage global design settings in the Thryv Website Builder.

Why the Color Picker Helps You Keep Your Website on Brand

Visual consistency is one of the most important factors in building a professional website that visitors trust. When colors are inconsistent across pages or elements, the site feels unpolished and undermines brand credibility. The Color Picker in the Thryv Website Builder gives you precise control over every color applied to your website — from text and buttons to backgrounds and overlays. Enter exact HEX or RGB color codes to match your official brand colors precisely, use the Recent Colors feature to reapply colors already in use across the site for consistency, or apply a gradient background to create depth and visual interest. Every color decision made through the Color Picker contributes to a more cohesive and professional online presence.

How to Use the Color Picker in the Thryv Website Builder

The Color Picker opens whenever a color setting is selected in the Thryv Website Builder — for example when editing a widget background, text color, or row color. The Color Picker provides the following options for selecting and applying colors.

The screenshot above shows the Color Picker panel in the Thryv Website Builder. The panel displays the Color Style selector at the top for choosing between a single color and a gradient. Below that, the Recent Colors section shows recently used colors. The color palette and vertical gradient bar appear in the center for selecting a color visually. HEX and RGB input fields appear below the palette for entering exact color values. The Opacity slider appears at the bottom of the panel.

How to Choose Between a Single Color and a Gradient

At the top of the Color Picker, the Color Style selector lets you choose between applying a Single Color or a Gradient to the selected element. Select the option that matches the color effect needed before choosing a specific color.

The screenshot above shows the Color Style selector at the top of the Color Picker in the Thryv Website Builder. Two options are displayed — Single Color and Gradient. Selecting Single Color displays the standard color selection options. Selecting Gradient displays the gradient configuration options. The Gradient option is available for row backgrounds, column backgrounds, widget backgrounds, and image overlays. The Gradient option is not available for text elements.

How to Apply a Gradient Background

When Gradient is selected in the Color Style selector, the following gradient configuration options appear:

• Gradient stops — Select two colors to define the start and end colors of the gradient. Use the reverse option to swap the positions of the two colors.

• Gradient direction — Select a direction for the gradient. Selecting Center generates a radial gradient that radiates outward from the center of the element. Selecting a side direction generates a linear gradient that transitions from one side of the element to the other.

How to Use Recent Colors

The Recent Colors section of the Color Picker displays a sample of colors that have been recently applied to elements on the website. Select any color in the Recent Colors section to apply that color to the currently selected element. Recent Colors makes it faster to reuse colors that are already applied elsewhere on the site, helping maintain visual consistency across pages without needing to re-enter HEX or RGB values.

How to Select a Custom Color or Enter a HEX or RGB Value

To select a color manually, use the color palette in the Color Picker to choose a hue visually, or use the vertical color gradient bar to fine-tune the shade. To apply an exact brand color, enter the HEX code or RGB values for the color in the input fields below the vertical color gradient bar. Entering exact HEX or RGB values ensures the color matches the official brand color precisely rather than relying on a visual approximation from the palette.

How to Adjust Opacity

The Opacity slider at the bottom of the Color Picker controls the transparency of the selected element's color. Reducing the opacity below 100% causes the element to become partially transparent, allowing whatever is behind the element — such as a background image or background color — to show through and blend with the element's color. An opacity of 100% displays the color at full intensity with no transparency.

Frequently Asked Questions

What does this article cover?

This article covers how to use the Color Picker in the Thryv Website Builder, including how to apply single colors and gradients, use recent colors, enter HEX and RGB color codes, and adjust opacity. This article does not cover managing brand colors or global design settings. For help with global design settings, see how to manage global design settings in the Thryv Website Builder.

Can I apply a gradient to text elements?

No. The Gradient option is not available for text elements in the Thryv Website Builder. The Gradient option is available for row backgrounds, column backgrounds, widget backgrounds, and image overlays only. When the Color Picker is opened for a text element, only the Single Color option is displayed.

What happens if I switch from a color background to an image background?

Switching between Color and Image background settings resets the previous option to a blank state. For example, if a color or gradient was applied to a background and the setting is then switched to Image, the color and gradient settings are removed. To restore the previous color settings, the color or gradient must be reconfigured from the Color Picker after switching back to the Color background option.

Where do I enter a HEX or RGB code in the Color Picker?

The HEX and RGB input fields appear below the vertical color gradient bar in the Color Picker panel. Enter the HEX code or RGB values directly in the input fields to apply an exact color. The Color Picker updates the color selection in the palette automatically when a valid HEX or RGB value is entered.