How to use the color picker

Every color swatch in the editor opens the same color picker: in the Design panel, the Theme panel, the text toolbar and widget settings. Click a swatch to open it, and click the × in its corner (or anywhere outside it) to close it. Changes show on the canvas as you pick.

How to pick a color

1. Click the color swatch next to the setting you want to change.
2. Do one of these:
   • Click a swatch under Theme colors to use one of the site's theme colors.
   • Click a swatch under Recent or Saved.
   • Drag in the color square and the hue bar below it.
   • Type a value in the HEX box (for example #1e3a8a), or switch to RGB and type red, green and blue from 0 to 255. Press Enter or click away to apply it.
   • Click the eyedropper (Pick color from screen) and click anywhere on your screen to copy that color. It only shows in browsers that support it.
   • Click Open system picker to use your computer's own color window.
3. Drag Opacity to make the color see-through. 100% is solid, 0% is invisible.

Theme colors

The top row shows the site's theme colors: Primary, Secondary and Color 3 to Color 8. Hover over one to see its name.

• Clicking a theme color links the setting to the theme. If you later change that color in Theme → Colors, every element linked to it changes too.
• Picking any other color (Recent, Saved, the square, HEX or RGB) breaks the link, and the element keeps that exact color.
• To add or edit theme colors, open Theme → Colors. See How to set the site theme.

Recent and Saved

• Recent lists the colors used most recently on this site, newest first, up to 16. It's kept on the site, not just your browser, so everyone on your team sees the same list on any computer. A new site starts with "No recent colors yet".
• Saved is your own palette for this site. Click Save current to add the color you're on (in a gradient, the selected stop's color). Hover over a saved color and click its small × to remove it. Reset removes every saved color at once, with no undo.
• Saved colors belong to the site, so the whole team sees them.

HEX, RGB and opacity

• HEX takes 3, 6 or 8 characters, with or without the #. An 8-character value includes transparency (#00000080 is half-see-through black).
• RGB takes three numbers from 0 to 255.
• Opacity goes from 0% to 100% and is kept when you change the color.
• These boxes and Opacity show only for a solid color. In a gradient, each stop keeps its own color and transparency.

Gradients

Some settings offer Solid and Gradient, for example a section or column background, a gradient layer and text colors. Switch to Gradient to build one.

• Pick a stop: click a stop (a dot on the bar). The color square below it changes that stop straight away. Its color code and position show beside a small swatch.
• Theme, Recent and Saved swatches change only the selected stop, never the whole gradient. A theme color stays linked, so the stop changes when you change that theme color. On text gradients the stop takes the color but isn't linked.
• Add a stop: click the bar between stops. The new stop starts with the color already at that spot.
• Move a stop: drag it along the bar.
• Remove a stop: select it and click the bin. A gradient needs at least two stops, so with two left the bin is grayed out and says Minimum 2 stops.
• Swap: with exactly two stops, Swap (Swap stop colors) flips their colors.
• Direction: pick one of eight compass directions, or the center dot for a radial gradient.
• Angle: for a straight gradient, turn it to any angle from 0° to 359°. 0° runs upwards, 90° to the right.
• Circle / Ellipse, Center X, Center Y: for a radial gradient, choose the shape and move its center (0% to 100% across and down).

Switching back to Solid keeps the first stop's color. For background gradient layers (up to 6 per box), see Gradients, background layers and text effects.

Contrast check

When you pick a text color in a Text widget, some text styles or a button's text, the picker shows the contrast against the background behind the text, for example "Contrast 4.52:1", with AA and AAA badges for the accessibility levels it passes. Over an image, video or gradient the check can't measure, so it says "Contrast check is off — the background is an image, video or gradient."

Examples

• A brand color from the client's logo: open the logo file in another window, click the eyedropper and click the logo. Then click Save current so the team can reuse it.
• A see-through dark overlay box: pick black and drag Opacity to 60%.
• A sunset button background: switch to Gradient, click the first stop and pick Primary, click the second and pick Secondary, then set Angle to 135°.
• A soft spotlight: choose the center dot for a radial gradient, pick Ellipse, and move Center Y to 20%.

Limits and what it can't do

• Recent keeps 16 colors. Saved has no set limit.
• A gradient needs at least 2 stops. Gradients are only offered on settings that support them.
• The eyedropper only appears in browsers that support it (most desktop Chrome and Edge browsers do; Safari and Firefox don't).
• The + and pencil next to Theme colors aren't active yet. Edit theme colors in Theme → Colors.
• Saved colors and Reset aren't part of undo.

Who can use it

Anyone who can change design in the editor: agency people with the Mount Olympus tool, and client people with the Editor permission. Client people without Editor can't open the Design panel or the Theme panel, so they don't get these color settings.

Troubleshooting

• "My element didn't change when I changed the theme color": it was given a color from Recent, Saved, the square or a typed value, which isn't linked. Open its picker and click the theme swatch again.
• "I can't delete a gradient stop": the bin is grayed out with Minimum 2 stops. Add another stop first, or switch to Solid.
• "There's no eyedropper": your browser doesn't support it. Use another browser, or copy the HEX code from your design file.
• "My HEX code didn't apply": it must be 3, 6 or 8 hex characters (0–9, a–f). Check for spaces or a missing character.
• "Clicking a theme color changed only part of my gradient": that's how it works in Gradient mode: swatches set the selected stop. Switch to Solid first to use one color.
• "The color shows faded": check Opacity, or an 8-character HEX code ending in less than ff.