Colorpicker

Hotkey

By default, the hotkey to open the colorpicker is not set.

Setting a hotkey

• Click on the gear icon next to the colorpicker option while on the edit page.
• Within the "Press a hotkey" popup input, press on the desired key (e.g. F2 as shown in the screenshot) or a combination of keys (e.g. Ctrl or ⌘ + B) to set the hotkey.
• If a key or key combination is not allowed, the "Press a hotkey" popup input background color will turn red.
• To clear the hotkey, click on the "x" inside the input; then close the popup or press Esc.

Using the hotkey

• Using the hotkey will open the colorpicker popup at the current cursor position.
• The popup will search for any color matches to the under and to the left of the cursor. If not found, the newly selected color will be added at the cursor position.

Colorpicker popup

Controls

Opening the popup

Either set the hotkey (as described above), or click on the color swatch next to the color.

If you're not using the hotkey and want to add a new color, place the cursor in the desired area and type in the color; then click on the swatch that is added.

Choosing colors

A circle cursor within the color palette, and a larger color circle next to the sliders, indicates the current color.

• Use the mouse to click on the color hue or alpha channel slider.
• Select the brightness of the color by clicking inside the color palette.
• Or, manually enter the desired color in the color input.

Switch Formats

The colorpicker popup supports three formats: HEX, RGB and HSL. All three may have the alpha channel (transparency).

To switch between formats, use the following keys while the popup is open and focused:

• Click on the left/arrow arrow icon (↔).
• Use PgUp or PgDn to cycle between formats.

Switch Channels

While viewing the RGB and HSL formats, cycle between the channels while the popup is open and focused:

• Click within the channel input.
• Use Tab to cycle between channels.

Hex

While in hex mode, the controls are similar to chrome-devtools:

• Ctrl+↑ (up arrow) or Ctrl+↓ (down arrow) to modify the R channel.
• Shift+↑ (up) or Shift+↓ (down) to modify the G channel.
• Alt+↑ (up) or Alt+↓ (down) to modify the B channel.
• ↑ (up) or ↓ (down) arrows treats the entire color as a hex integer (e.g. #00f -> #010)

RGB/HSL

The RGB/HSL modes are also similar to chrome-devtools:

• Ctrl+↑ (up arrow) or Ctrl+↓ (down arrow) steps by 100 in RGB and H, 50 in S and L, 1 in alpha
• Shift+↑ (up) or Shift+↓ (down) steps by 10 (alpha: by .1)
• ↑ (up) or ↓ (down) arrows steps by 1 (alpha: by .01)

Changing hex case

To output the Hex format (only) as either all upper case or lower case, click on the "Hex" or "hex" link at the bottom of the popup.

Closing the popup

Press Esc at any time to close the colorpicker popup. This will not revert any changes made.

If a color selection was accidentally added or the changes need to be removed, use Ctrl or ⌘ + Z to undo the change.