How to Use the Color Picker for Funnels & Websites

Modified on: Tue, 10 Feb, 2026 at 9:34 AM

The Color Picker lets you define brand, default, and custom colors and apply them anywhere in your pages; even down to individual words or characters. This article explains what the Color Picker is, why it matters, and how to make the most of its features.

TABLE OF CONTENTS

What is the Color Picker?
Key Benefits of the Color Picker
Per-Character and Per-Word Level Styling
Custom Color Labels & Tooltip
Supported Color Formats
Validation and Duplicate-Color Prevention
How to Use the Color Picker
Frequently Asked Questions
Related Articles

What is the Color Picker?

The Color Picker is the design component inside HighLevel’s Funnels & Websites Builder that controls every color you use, from section backgrounds to hyper-specific text highlights. It displays brand, default, and custom colors together, supports HEX, RGB, and custom values, and offers precise, per-character styling directly from the inline text toolbar.

Default colors in the picker may change over time as the Page Builder’s out-of-the-box styling is refreshed. For example, new default palette options can appear (such as Cobalt and Smoke) to support modern starter designs. If you need strict brand consistency, set your Brand Board colors or Global Custom Colors and select those instead.

Key Benefits of the Color Picker

A unified interface and smart controls help you style pages faster and more consistently.

Unified Palette: View brand, default, and custom colors in a single panel, so there is no need to switch tabs
Per-Character Control: Color a single word or letter for precise emphasis
Custom Labels: Name colors (for example, “CTA Blue”) for quick reuse
Format Flexibility: Enter and display colors in HEX, RGB, or custom values
Duplicate Protection: Validation prevents accidental shade duplicates
Compact Layout: Modern, space-efficient design loads quickly and stays out of your way

Per-Character and Per-Word Level Styling

With the updated inline text editor, you can now apply color to individual words or even individual characters in your text. This means you can highlight specific words or change the color of just a part of the text, giving you full control over your design's look and feel.

Keep palettes organized, even when shades are similar, by giving your custom colors names!

Naming Colors

After picking a color, users can name and edit labels for custom colors (for example, “Warning Red”). Labels can be edited or removed at any time.

Custom Label Tooltips

Hovering over a custom color displays its label as a tooltip. This makes it easier to distinguish similar shades, so your team can pick the right tint without memorizing HEX codes.

Supported Color Formats

The Color Picker allows you to choose and save colors in multiple formats so you can work with the values that best suit your needs. Use the dropdown to switch between color formats.

HEX: A six-character code that defines color (for example, #1E90FF). This is the most common format for web design.
RGB: A set of three numbers that define color based on red, green, and blue values (for example, rgb(30,144,255)). This is useful for precise control over color blending and opacity.
Custom Values: Accepts dynamic tokens such as {{ custom_values.primary_color }}. These allow the color to be pulled from your custom values, making it easy to change in one place and have it update everywhere it is used.

Validation and Duplicate-Color Prevention

Custom Color Validation

Custom token values must exist in the current location’s configuration before they can be stored, which prevents broken references.

Duplicate Color Prevention

Stay consistent and error-free! If you try to save a shade already in the palette, the picker flags it instantly and prompts you to adjust the value.

How to Use the Color Picker

Follow the steps below to use the color picker:

Step 1: Open Color Picker

Open an an existing funnel or website page
Select a section, element, or text block
Click the Color square in the style panel, or click the A-icon in the inline toolbar for text

Step 2: Choose a Color

Pick a shade from the default colors, brand colors or already created custom colors
To create a new custom color, press + Add

Step 3: Create Custom Color

Once the custom color panel is open, select the desired color
Use the dropdown to select between RBG, HEX and Custom color formats
Type a descriptive name for the color
Click Save. The new color tile will appear in your palette

Button Icon Color (Page Builder)

Button icons can now be colored independently, giving you precise control over icon visibility and brand alignment without affecting button text or subtext.

How it works

Independent control: Icon Color is separate from Text and Subtext colors.

Color sources: Uses the new Color Picker, including Brand Board colors and Custom colors.

Design flexibility: Adjust the icon to match brand accents while keeping text highly readable.

_Add a screenshot of the Button element’s **Colors** panel with the **Icon Color** swatch highlighted. Alt text: “Button element Colors panel showing the new Icon Color control.”_

Frequently Asked Questions

Q: Will existing pages change if I edit a Brand Color?
No. Brand Color updates apply going forward. Colors already saved on existing elements or text stay the same.

Q: Why do I see a “duplicate color” message when I try to save?
The value you entered already exists in the palette, or a saved custom value resolves to the same value. Change the value or edit the existing swatch instead.

Q: Can I rename or delete a custom color without breaking pages?
A: Yes. Renaming or deleting a swatch does not change colors that are already applied on existing pages.

Q: Can I bulk-import brand colors?
A: Add them in the Brand Board; they automatically appear at the top of the palette.

Q: Why won’t my custom value color save?
The token must exist in your current location’s Custom Values and the final value cannot duplicate an existing swatch. Check that the custom value exists in your account.

Q: Why do new pages look different from older pages?
Page Builder defaults (fonts, placeholders, and default palette colors) can be updated for newer designs. Your Brand Board or saved templates ensure consistent styling across pages.