How to Use the Color Picker for Funnels & Websites
Learn how to use GHL Customer Care’s Color Picker to apply brand, default, and custom colors, set per-character styling, and keep palettes consistent with validation.
Assistants need to reach this page over the internet. While it is only running on your machine, these two buttons will not be able to load it.
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
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.
The Color Picker is the design component inside GHL Customer Care’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
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.
Custom Color Labels & Tooltip
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.
Naming Colors (image 1 of 7)What this shows After picking a color, users can name and edit labels for custom colors (for example, “Warning Red”).What this showsIllustrates the "Naming Colors" section of "How to Use the Color Picker for Funnels & Websites".This screenshot appears in the "Naming Colors" section of "How to Use the Color Picker for Funnels & Websites". The text alongside this image reads: 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. Immediately after, the guide continues: 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.Image 1 of 7What this coversAfter 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.Next stepHovering 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.
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.
Custom Label Tooltips (image 2 of 7)What this shows Hovering over a custom color displays its label as a tooltip.What this showsIllustrates the "Custom Label Tooltips" section of "How to Use the Color Picker for Funnels & Websites".This screenshot appears in the "Custom Label Tooltips" section of "How to Use the Color Picker for Funnels & Websites". The text alongside this image reads: 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. Immediately after, the guide continues: 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.Image 2 of 7What to chooseHovering 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.Next stepThe 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.
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.
Supported Color Formats (image 3 of 7)What this shows HEX: A six-character code that defines color (for example, #1E90FF).What this showsIllustrates the "Supported Color Formats" section of "How to Use the Color Picker for Funnels & Websites".This screenshot appears in the "Supported Color Formats" section of "How to Use the Color Picker for Funnels & Websites". The text alongside this image reads: 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…. Immediately after, the guide continues: Custom token values must exist in the current location’s configuration before they can be stored, which prevents broken references.Image 3 of 7What this coversHEX: 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.
Buttons and menus referencedHEXRGBCustom Values
Next stepCustom token values must exist in the current location’s configuration before they can be stored, which prevents broken references.All 3 steps in this procedure
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.
Duplicate Color Prevention (image 4 of 7)What this shows Stay consistent and error-free!What this showsIllustrates the "Duplicate Color Prevention" section of "How to Use the Color Picker for Funnels & Websites".This screenshot appears in the "Duplicate Color Prevention" section of "How to Use the Color Picker for Funnels & Websites". The text alongside this image reads: 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. Immediately after, the guide continues: Follow the steps below to use the color picker.Image 4 of 7How to confirmStay 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.Next stepFollow the steps below to use the color picker:
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 1: Open Color Picker (image 5 of 7)What this shows 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…What this showsIllustrates the "Step 1: Open Color Picker" section of "How to Use the Color Picker for Funnels & Websites".This screenshot appears in the "Step 1: Open Color Picker" section of "How to Use the Color Picker for Funnels & Websites". The text alongside this image reads: 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. Immediately after, the guide continues: Pick a shade from the default colors, brand colors or already created custom colors To create a new custom color, press + Add.Image 5 of 7Where to goOpen 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
Buttons and menus referencedColorA-icon
Next stepPick a shade from the default colors, brand colors or already created custom colors To create a new custom color, press + AddAll 3 steps in this procedure
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 2: Choose a Color (image 6 of 7)What this shows Pick a shade from the default colors, brand colors or already created custom colors To create a new custom color, press + AddWhat this showsIllustrates the "Step 2: Choose a Color" section of "How to Use the Color Picker for Funnels & Websites".This screenshot appears in the "Step 2: Choose a Color" section of "How to Use the Color Picker for Funnels & Websites". The text alongside this image reads: Pick a shade from the default colors, brand colors or already created custom colors To create a new custom color, press + Add. This part of the guide covers 1 field, listed below. Immediately after, the guide continues: 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.Image 6 of 7What to choosePick a shade from the default colors, brand colors or already created custom colors To create a new custom color, press + Add
Fields in this part of the guideTo create a new custom color, press + Add
Buttons and menus referenced+ Add
Next stepOnce 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 paletteAll 2 steps in this procedure
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
Step 3: Create Custom Color (image 7 of 7)What this shows 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…What this showsIllustrates the "Step 3: Create Custom Color" section of "How to Use the Color Picker for Funnels & Websites".This screenshot appears in the "Step 3: Create Custom Color" section of "How to Use the Color Picker for Funnels & Websites". The text alongside this image reads: 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. Immediately after, the guide continues: Button icons can now be colored independently, giving you precise control over icon visibility and brand alignment without affecting button text or subtext.Image 7 of 7What to fill inOnce 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
Buttons and menus referencedSave
Next stepButton icons can now be colored independently, giving you precise control over icon visibility and brand alignment without affecting button text or subtext.All 4 steps in this procedure
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.
