Color Picker for Funnels and Websites in Sparkforge

The Color Picker is the single panel that controls every color in the Funnels and Websites builder — from full-section backgrounds down to a single highlighted word.

What it does

• Unified palette — brand, default, and custom colors in one panel.
• Per-character control — color individual letters or words inside text blocks.
• Custom labels — name colors like "CTA Blue" for fast reuse.
• Format flexibility — HEX, RGB, or custom value tokens.
• Duplicate protection — the picker blocks accidental duplicate shades.

Default palette colors can change over time as the page builder ships refreshed starter designs. For strict brand consistency, set Brand Board colors or Global Custom Colors and use those instead of defaults.

Use the Color Picker

Step 1: Open it

1. Open a funnel or website page in the builder.
2. Select a section, element, or text block.
3. Click the color swatch in the style panel, or click the A icon in the inline text toolbar to color text.

Step 2: Pick a color

1. Choose from default, brand, or existing custom colors.
2. To create a new one, click + Add.

Step 3: Create a custom color

1. Pick the desired shade.
2. Use the dropdown to switch between HEX, RGB, or Custom value formats.
3. Type a descriptive name.
4. Click Save. The new tile appears in your palette.

Per-character styling

The inline text toolbar applies color to a selected range, including a single character. Highlight one word to draw attention without breaking the rest of the paragraph.

Custom color labels

After picking a color, name it (for example, "Warning Red"). Hover any custom swatch to see its label as a tooltip. Labels are editable any time without changing colors already applied to existing pages.

Supported formats

• HEX — six-character codes like #1E90FF.
• RGB — three values like rgb(30,144,255).
• Custom Values — dynamic tokens like {{ custom_values.primary_color }} that pull from your custom values, so changing one place updates everywhere.

Validation rules

• Custom value validation: a token must already exist in the location's Custom Values before it can be saved as a swatch.
• Duplicate prevention: if a value matches an existing swatch, the picker flags it and prompts you to adjust.

Independent button icon color

Button icons can be colored independently of button text and subtext. The Icon Color control uses the same Color Picker and supports Brand Board and Custom colors, so icons can carry brand accents while text stays readable.