Color Picker Toolkit Pro

Overview

Color Picker Toolkit Pro is a plugin that allows you to design your own custom color pickers using a set of specially made ui elements. Plugin is gamepad compatible and works on all platforms that support UMG.

Prerequisites

  • Unreal Engine 5.6 – 5.7
  • Requires “Common UI”, and “Enhanced Input” plugins to be enabled.

Installation

  1. Make sure “Common UI” plugin and “Enhanced Input” plugin are installed

  2. Open or create a new project and enable the “Color Picker Toolkit Pro” plugin

  3. In project settings go to (Engine) -> (Enhanced Input) and check “Enable User Settings“

  4. In project settings go to (Engine) -> (General Settings) and set GameViewportClientClass to CommonGameViewportClient using the dropdown

  5. in project settings go to (Game) -> (Common Input Setttings) -> (Platform Input) -> (Windows) -> (Controller Data) and add the controller data asset for all controllers your game supports. Be sure to add the Controller Data for any other platforms you plan on supporting as well.

  6. Creating the actual controller data assets is outside the scope of this guide, but there are numerous tutorials that can be found on youtube
    https://www.youtube.com/watch?v=dy-VO88rwdk is a good example

  7. In project settings go to (Game) -> (Common Input Settings) -> (Platform Input) -> (Windows) -> set default gamepad name to “XSX”

  8. In project settings go to (Game) -> (Common Input Settings) and set “Input Data” to your CommonUIInputData asset which contains your enhanced input controls for “Enhanced Input Click Action” and “Enhanced Input Back Action“

  9. In project settings go to (Game) -> (Common Input Settings) and make sure to check “Enable Enhanced Input Support“

  10. In project settings go to (Game) -> (Common Input Settings) and make sure to check “Allow Out Of Focus Device Input“

  11. In the content browser, go to (Plugins) -> (ColorPickerToolkitPro Content) -> (Config) and modify CPTKGlobalSettings to add both the “Select Action” and “Gamepad Move Action” input actions. Here you can also set the highlight color for the color controls, and there is also a checkbox for whether to highlight the color controls when using mouse. (NOTE: If you don’t see the plugin content folder, go to the settings menu in your content browser and make sure the “Plugin Content” option is checked.

Miscellaneous

  • When controlling the color wheel, spinner box, or color square with mouse, you can hold down ctrl for extra precision

Relevant Third-Party Links

https://dev.epicgames.com/documentation/en-us/unreal-engine/using-commonui-with-enhnaced-input-in-unreal-engine?application_version=5.6

Last Updated: December 14, 2025