Skip to content

Getting Started

Installation

Make sure the following packages are present before you open the demo scene or drop the prefab into your own UI:

  • Unity 2021.3 LTS or newer
  • TextMeshPro (import TMP Essentials when prompted)
  • Unity UI (com.unity.ugui)

Basic Setup

Add the prefab to a Canvas

  1. Create or select a Canvas in your scene (GameObject → UI → Canvas).
  2. Drag ColorPicker.prefab into the Canvas hierarchy. Use the themed variant if you want the pre-styled look.
  3. Position and scale the ColorPickerManager GameObject as needed with the RectTransform tools.

Connect the picker to your UI

You can wire listeners directly in the Inspector (UnityEvents on OnColorChanging / OnColorChanged) or subscribe from code. The layout below keeps a preview image in sync while the user drags and when they release.

ColorPickerManager event bindings 
using UnityEngine;
using UnityEngine.UI;
using XDPaint.ChromaPalette;

public class ColorPreview : MonoBehaviour
{
    [SerializeField] private ColorPickerManager paletteManager;
    [SerializeField] private Image previewImage;

    void Awake()
    {
        // Start with a known color
        paletteManager.SetColor(Color.white, notify: false);

        // Live preview while the user drags
        paletteManager.OnColorChanging.AddListener(color => previewImage.color = color);

        // Apply or persist when the user releases
        paletteManager.OnColorChanged.AddListener(color => previewImage.color = color);
    }
}

Switching Modes

ColorPickerManager ships with seven layouts. Pick the one you want in the Inspector or swap it at runtime.

Inspector: Select the ColorPickerManager component and choose a value from Mode.

ColorPickerManager mode dropdown

Script or Visual Scripting:

// Example: move between the rectangle picker and the texture sampler
paletteManager.SetMode(ChromaPaletteMode.Rectangle);

// Provide a texture before switching to Texture mode
paletteManager.SetPaletteTexture(myScreenshotTexture);
paletteManager.SetMode(ChromaPaletteMode.Texture);

Using Your Own Palettes

If you already have a ColorPalette asset, assign it to Palette Settings → Color Palette on the component, then switch to Palette mode. See the Color Palettes guide for authoring, generating, or scripting palette assets.

Next Steps