Setup

Add the stack to the stacks page editor.

Switch to preview mode to begin editing the page colors.

The color eyedropper tool is only available in the Chrome browser. To get access to it you must right click (CTRL + click) the page in the RapidWeaver window and select Preview Page With… > Google Chrome.

The color panel can be found in the bottom right corner of the previewed page. It contains color swatches for each of the colors used on the page. There are also text color swatches that separately control the color of the text. Hovering any of the color swatches will highlight the corresponding elements on the page.

To change one the colors, click on a color swatch to open a color setting panel. The slider at the top of the settings panel adjusts the hue. The next two sliders adjust the saturation and lightness of the color. You can also add your own color value into the color input field found below the sliders. The color input field accepts hex color values.

As you edit the saturation and lightness, a reset button will appear next to the color input field. Clicking this button will reset the saturation and lightness back to their original values.

If you are previewing the page in Chrome, there will also be a color eyedropper tool that you can use to quickly select a color from anything on your screen.

At the bottom of the color panel are two buttons. The first “Light/Dark” button will instantly invert all of the color lightness values, essentially allowing you to convert the entire page into a light or dark mode. After using this button, colors can then be fined tuned by using the color setting panels.

Use the second “Copy CSS” button to automatically copy the generated CSS to your clipboard. This CSS can then be pasted into the Page Inspector > HTML Code > CSS section of the stacks page to apply all of the color edits to the page. You can alternatively copy the hex color values from the color input fields if you would like to apply the colors manually through the stacks editor.

The Recolor stack does not appear on live published pages and will not save any edits you have made. If you do not copy the CSS to the Page Inspector, the color edits you have made will be undone when the preview page is closed or refreshed.

General Settings

CSS Output

By default, using the “Copy CSS” button will generate CSS code that will apply under any condition. You can optionally select a condition for the CSS code. “Dark mode browsers only” will output CSS that only applies to page visitors who have dark mode enabled through their device or browser. “Light mode browsers only” will output CSS that only applies to page visitors who do not have a dark mode enabled through their device or browser. “Specific browser widths only” will output CSS that only applies to a defined responsive width range.

Group text & background colors

By default, color swatches and text color swatches are added to the color panel separately. If you do not need to edit text colors separate from other colors, enable this setting to group them together.

Group grays

By default, gray colors will appear as separate color swatches. You can enable this setting to group all of the gray colors into one color swatch with one hue slider. This is useful if you intend to add saturation and change the hue collectively.

Group hues

By default, each color found on the page will be added as a color swatch to the color panel. If there are slight inconsistencies in the colors used on the page it can result in a color panel with too many color swatches which can make it hard to edit. Enable this setting to allow the Recolor stack to automatically determine which colors are related. It will group similar colors under a single color swatch.

Hue Sensitivity

With the Group hues setting enabled, you can change how sensitive the color grouping is by degrees. Higher values will result in fewer color swatches. Color swatches can contain multiple shades of the same hue each with their own saturation and lightness sliders. The hue slider at the top of the color setting panel will apply to all the shades in a group.

Shade Sensitivity

If there are slight inconsistencies among shades it can result in color swatch groups containing too many shades. Use this setting to allow the Recolor stack to automatically determine with shades are actually supposed to be the same color. Change how sensitive the shade merging is by percent with higher values resulting in few shades per hue group.

Advanced Settings

Define custom target element

If you are only trying to edit a specific stack on the page and not the colors of the entire page, you can enable this setting to define a custom class name that can be applied to that specific stack you wish to edit.

Alternatively, you can add the predefined class “recolor-ignore” to any stack for that stack (and its children) to be ignored by the Recolor stack.

Target Class

Define a custom class that can be added to a stack. Any stack or element with this class will be detected by the Recolor stack for color editing.