ColorPicker
A color picker component for RGBA color settings.
ColorPicker is a full color picker component with a saturation/brightness canvas, hue slider, optional alpha slider, hex input, and recent color history. Colors are stored as ImGui IM_COL32 unsigned integers which map directly to unsigned int color fields in your C++ config structs.
import { ColorPicker } from "@/components/color-picker";
<Field name="Outline Color">
<ColorPicker
value={data.boxes_outline_color}
onChange={(boxes_outline_color) => set({ ...data, boxes_outline_color })}
label="Box Outline Color"
showAlpha={false}
size="lg"
/>
</Field>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | The current color as an IM_COL32 unsigned integer |
onChange | (value: number) => void | — | Called with the new color value when changed |
label | string | — | Title shown in the picker header |
disabled | boolean | false | Disables the picker |
showAlpha | boolean | true | Whether to show the alpha slider |
colorValueFormat | "rgb" | "rgba" | "hex" | — | Shows the color value as text next to the preview swatch when set |
size | "sm" | "md" | "lg" | "md" | Size of the color preview swatch and picker width |
enableHistory | boolean | true | Whether to show recent color history |
historySize | number | 20 | Max number of colors to keep in history |
Color Format
Colors are stored as IM_COL32 unsigned integers — the same format ImGui uses on the C++ side. The byte order is ABGR packed into a 32-bit integer:
// C++ — defining a default color
unsigned int boxes_outline_color = IM_COL32(255, 255, 255, 255); // white
unsigned int boxes_fill_color = IM_COL32(0, 0, 0, 100); // semi-transparent black// TypeScript interface
interface VisualsConfig {
boxes_outline_color: number;
boxes_fill_color: number;
}No conversion is needed between the UI and C++ — the number is passed through IPC as-is and both sides interpret it the same way.
showAlpha
Set showAlpha={false} for colors that should always be fully opaque, like outline colors. Set showAlpha={true} for fill colors or anything that benefits from transparency control:
{
/* No alpha — outline should always be fully visible */
}
<ColorPicker
value={data.boxes_outline_color}
onChange={(boxes_outline_color) => set({ ...data, boxes_outline_color })}
label="Outline Color"
showAlpha={false}
size="lg"
/>;
{
/* With alpha — fill color benefits from transparency */
}
<ColorPicker
value={data.boxes_fill_color}
onChange={(boxes_fill_color) => set({ ...data, boxes_fill_color })}
label="Fill Color"
showAlpha={true}
size="lg"
/>;Color History
The picker automatically tracks recently used colors and shows them at the bottom of the picker. History is saved to localStorage and persists across sessions. Set enableHistory={false} to disable it, or historySize to control how many colors are kept.