How to Use the Color Picker for Funnels & Websites

Modified on: Thu, 7 Aug, 2025 at 4:20 PM

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?

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.

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

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.