Color Picker

• Color Picker
  • Close
  • Type
  • Reverse
  • Gradient Preview
  • Easing
  • Angle
  • Gradient Bar
  • Color Field
  • Hue
  • Opacity Slider
  • Value
  • Opacity
  • Format
  • Preview
  • Eyedropper
  • Clear
  • Presets
  • Palette
  • Add Palette

Color Picker

The Color Picker opens from any color swatch in the Module Editor, for example BG Color in the Design mode Style panel, or Slide Background Color in the Slides sidebar. Click the swatch and the picker opens beside it. Click Close or anywhere outside the picker to close it.

In the Color Picker you set a single color or a gradient, by clicking in the color field, by typing a value or by choosing from a palette, and set its opacity.

The same picker opens from every color swatch in the plugin, so it looks the same wherever it is opened. A gradient is only applied where the setting accepts one.

Close (Button)

Close the Color Picker. The color or gradient chosen is already applied, so closing does not change it.

Type (Dropdown)

Set whether the swatch is a single color or a gradient. Choosing a gradient adds the gradient controls to the top of the picker.

Options:

• _Solid: One color, set with the controls below the dropdown.
• _{Linear Gradient}: A blend between two or more colors along a straight line, at an angle you set.
• _{Radial Gradient}: A blend between two or more colors spreading out from a center point.

Reverse (Button)

Reverse the order of the gradient's color stops, so the color at the start moves to the end.

Gradient Preview (Readout)

Shows the whole gradient as it is currently set, with every stop, the angle and the easing applied.

Easing (Dropdown)

Set the easing curve applied between one color stop and the next. None blends the two colors evenly, and every other option shifts more of the change toward one stop.

Options:

• _None: An even blend between stops.
• _{Bounce.easeIn}
• _{Bounce.easeOut}
• _{Bounce.easeInOut}
• _Circ.easeIn
• _Circ.easeOut
• _{Circ.easeInOut}
• _Cubic.easeIn
• _{Cubic.easeOut}
• _{Cubic.easeInOut}
• _Expo.easeIn
• _Expo.easeOut
• _{Expo.easeInOut}
• _Quad.easeIn
• _Quad.easeOut
• _{Quad.easeInOut}
• _Quart.easeIn
• _{Quart.easeOut}
• _{Quart.easeInOut}
• _Quint.easeIn
• _{Quint.easeOut}
• _{Quint.easeInOut}
• _Sine.easeIn
• _Sine.easeOut
• _{Sine.easeInOut}
• _Late
• _Late2
• _Late3

Angle (Number, degrees)

Set the direction of the gradient in degrees. 90 runs left to right and 0 runs bottom to top. The dial beside the field sets the same value by dragging its arrow.

Gradient Bar (Gradient Bar)

Shows the gradient's color stops as handles along a bar. Click a handle to select it and set its color with the controls below, drag a handle to move it along the bar, click an empty part of the bar to add a stop, and drag a handle off the bar to remove it.

Color Field (Color Field)

Set the color's saturation and brightness by clicking or dragging in the square. Saturation increases from left to right, and brightness decreases from top to bottom. In a gradient it sets the selected stop.

Hue (Number, range, slider)

Set the hue by dragging the handle along the hue strip. The Color Field is redrawn in the chosen hue.

Opacity Slider (Number, range, slider)

Set the color's opacity by dragging the handle along the strip beside Hue. It shows the same value as the Opacity field, so either can be used.

Value (Text)

Shows the current color as text, and accepts a typed color. The notation is set by Format, a hex code such as #5C24FF or three fields for red, green and blue.

Opacity (Number, percentage)

Set the color's opacity as a percentage. 100 is fully opaque and 0 is fully transparent. The value can also be set by dragging left and right on the field.

Options:

• ₀: Minimum. The color is fully transparent.
• ₁₀₀: Maximum. The color is fully opaque.

Format (Dropdown)

Set the notation Value shows the color in.

Options:

• _Hex: One six digit hex code.
• _RGB: Three fields for the red, green and blue components, 0 to 255 each.

Preview (Readout)

Shows the color currently set, over a checkerboard so its opacity is visible.

Eyedropper (Button)

Pick a color from anywhere on the screen. Click the button, then click the point whose color you want.

Clear (Button)

Set the color to fully transparent. In a gradient it clears the selected stop.

Presets (Image Select)

A row of swatches from the chosen Palette. Click a swatch to apply its color. Which swatches appear depends on the Palette, and a gradient palette applies a whole gradient at once.

A swatch from Brand Colors links the field to that brand color, shown by a purple ring on the swatch while the picker is open. Changing the brand color later, in Global Settings, changes every linked field in every module. Changing the field's opacity keeps the link. Any other color, a gradient, a preset or an undo removes it.

Palette (Dropdown)

Set which set of swatches Presets shows. The gradient palettes are listed when Type is a gradient, and the color palettes when it is Solid.

Options:

• _{Brand Colors}: The colors saved under Brand Kit in Global Settings. Picking one links the field to it.
• _{Default Palette}: A fixed set of nine colors.
• _{Module Colors}: Every color currently used somewhere in the module.
• _{Slide Dynamic Colors}: Colors taken from the images on the current slide.
• _{Default Gradients}: A fixed set of gradients.
• _{Slide Dynamic Gradients}: Gradients built from the colors of the images on the current slide.
• _Custom: Any palette added with Add Palette, listed under its own name.

Add Palette (Text)

Create a custom palette. Type a name into the field at the top of the Palette list and click the plus button beside it, and an empty palette of that name is added to the list and selected.

The new palette shows a single plus tile in Presets. Click the tile to add the color currently set in the picker as a swatch. Hold the pointer over the palette's row in the list to show its Rename and Delete buttons.