Using the ColorPickerFrame

Main Menu
WoW API Lua API FrameXML API Widget API Widget scripts XML schema Events CVars Macro commands Combat Log Escape sequences Hyperlinks API changes HOWTOs wowuidev

ColorPickerFrame is a global ColorSelect frame used by the UI to allow the user to pick and choose custom colors for the default UI or for addons.

Overview

There is only one instance of the ColorPickerFrame. As such, only color selection request can be processed at a time. In order to setup and show the color picker we use ColorPickerFrame:SetupColorPickerAndShow, passing in a table containing some options we want the color picker to apply.

Note: While the below instructions apply to both Retail and Classic, the alpha slider and value on Classic and Classic Era may be reversed.

local options = {
  swatchFunc = myColorChangedCallback,
  opacityFunc = myOpacityChangedCallback,
  cancelFunc = myCancelCallback,
  hasOpacity = true,
  opacity = 1,
  r = 1,
  g = 1,
  b = 1
};

• swatchFunc: Called whenever the user changes the selected color.
• opacityFunc: Called whenever the opacity, or alpha slider is moved or changed.
• cancelFunc: Called when the user closes the color picker without saving. Use this to reset to the initial color value.
• hasOpacity: If true, shows the opacity/alpha slider.
• opacity: Initial opacity/alpha value used for the color picker.
• r/g/b: Represents the initial color used when the color picker is first shown.

Example

In this example, we'll take in the initial R, G, B, and A values and setup the color picker. Whenever the color is changed, the new RGBA values will be printed to the chat frame.

local function ShowColorPicker(r, g, b, a)
  local function OnColorChanged()
    local newR, newG, newB = ColorPickerFrame:GetColorRGB();
    local newA = ColorPickerFrame:GetColorAlpha();
    print(newR, newG, newB, newA);
  end

  local function OnCancel()
    local newR, newG, newB, newA = ColorPickerFrame:GetPreviousValues();
	print(newR, newG, newB, newA);
  end

  local options = {
    swatchFunc = OnColorChanged,
    opacityFunc = OnColorChanged,
    cancelFunc = OnCancel,
    hasOpacity = true,
    opacity = a,
    r = r,
    g = g,
    b = b,
  };

  ColorPickerFrame:SetupColorPickerAndShow(options);
end