How to Use the Color Picker for Funnels and Websites
About the Color Picker
The Color Picker is a design tool within the CRM's Funnels and Websites Builder that gives you complete control over the colors used on your pages. You can define brand, default, and custom colors, and apply them to anything from large section backgrounds to individual words or characters. This centralized tool helps you maintain a consistent and professional look across all your designs.
Key Benefits
Using the Color Picker offers several advantages for efficient and consistent design work.
- Unified Palette: View and select from brand, default, and custom colors in one convenient panel.
- Precise Styling: Apply colors to individual words or even single characters directly from the text toolbar.
- Custom Labels: Name your custom colors for easy identification and reuse.
- Flexible Formats: Work with colors using HEX codes, RGB values, or custom tokens.
- Duplicate Prevention: The system prevents you from accidentally saving the same color twice.
- Efficient Design: The compact and modern interface helps you work quickly without clutter.
Styling Text at the Character Level
For precise emphasis, you can use the inline text editor to change the color of a specific word or even a single character within a block of text. This allows for detailed design control to make certain elements stand out.
Organizing with Custom Color Labels
To keep your color palette organized, you can assign descriptive names to your custom colors, such as "Primary Blue" or "Accent Orange." After creating a color, you can add or edit its label at any time. When you hover your cursor over a custom color in the palette, its label will appear as a tooltip, making it easy to distinguish between similar shades without needing to remember specific codes.
Supported Color Formats
The Color Picker supports several color formats to suit different workflows.
- HEX: A six-character code (e.g., #FF0000) commonly used in web design.
- RGB: A value based on red, green, and blue components (e.g., rgb(255, 0, 0)) that allows for precise control.
- Custom Values: Dynamic tokens (e.g., {{ custom_values.brand_color }}) that pull colors from your site's configuration, enabling site-wide updates from a single location.
Validation and Error Prevention
The Color Picker includes features to help maintain a clean and functional palette. If you try to save a custom token, the system first validates that the token exists in your location's configuration to prevent errors. Additionally, if you attempt to save a color value that is already in your palette, you will be notified and prompted to adjust the value to avoid duplicates.
Using the Color Picker
Follow these steps to apply and manage colors on your pages.
Step 1: Open the Color Picker
Open an existing funnel or website page in the builder. Select the section, element, or text block you wish to style. To change a color, click on the color square in the style panel. For text, click the "A" icon in the inline text toolbar.
Step 2: Select a Color
In the Color Picker panel that opens, choose a color from the default, brand, or your existing custom colors. To create a new custom color, click the "+ Add" button.
Step 3: Create a Custom Color
After clicking "+ Add," a new panel will open for defining your color. Use the color selector to choose your desired shade. Use the dropdown menu to select your preferred format: HEX, RGB, or Custom. Type a descriptive name for the color in the provided field and click "Save." Your new color will now appear as a tile in your custom color palette.
Styling Button Icons
You can now set a color for a button's icon independently from its text. This gives you greater design flexibility to ensure the icon is visible and aligns with your brand. The icon color is controlled using the same Color Picker, allowing you to select from brand and custom colors.
Frequently Asked Questions
If I edit a brand color, will it change on my existing pages?
No. Changes to brand colors will only apply to new uses of that color. Colors that are already applied to elements on existing pages will remain as they were when they were set.
Why do I get a "duplicate color" error when saving?
This message appears if the color value you are trying to save already exists in your palette, or if a custom token you are using resolves to an existing color. You will need to adjust the value or modify the existing color swatch.
Can I rename or delete a custom color without affecting my pages?
Yes. Renaming or deleting a color swatch from your palette does not change the color on any pages where it has already been applied.
How do I add my brand colors to the palette?
Add your colors in the Brand Board section of the CRM. Once saved, they will automatically appear at the top of the Color Picker palette.
Why can't I save a color using a custom value?
This can happen for two reasons. First, the custom token you entered must exist in your current location's configuration. Second, the final color value that the token represents cannot be a duplicate of a color already in your palette. Check your custom values settings and ensure the resulting color is unique.