CUI

Components / Pickers

Color picker

A swatch that opens a saturation and brightness square, a hue bar and preset swatches.

Functions: cui_color_picker

Usage

static cui_color brand = CUI_RGB(0x7747ff);
cui_color_picker(ui, "brand", &brand);

Returns true on a frame the color changes, which during a drag is every frame the pointer moves it. brand is your cui_color, four bytes of red, green, blue and alpha, and CUI_RGB(0x7747ff) builds an opaque one from a hex number. The field shows a swatch and the color as #RRGGBB. The panel that opens is 240 points wide and holds the square for saturation and brightness, the hue bar and eight preset swatches. There is no alpha control and no field to type a hex value into, and a color picked here is always opaque. A color you change from code shows in the swatch at once, and the panel picks it up the next time it opens.

Keyboard

  • Enter or Space on the swatch opens the picker and Esc closes it. Inside, the color is picked with the pointer: the square, the hue bar and the presets take no keyboard focus yet.

Related

  • Multi-select: Picks several items from a list and shows them as chips in the field.
  • Date picker and calendar: Picks a date from a month grid, as a field that opens a calendar or as a calendar shown inline.
  • Date range picker: Picks a start and an end date, with presets such as the last 7 days.
  • Select and combobox: Picks one item from a list that opens under the field. With search it becomes a combobox.