# ColorPicker

> ColorPicker is a color setting button with a swatch that opens an editor screen with RGB or ARGB sliders and a hex field, with Done and Cancel.

URL: https://xichil.dev/docs/xis-mvui/v1/widgets/color-picker/ · Updated: 2026-11-06 · Applies to: Fabric, Quilt, Legacy Fabric, Forge, NeoForge, MC 1.7.10 - 26.3

A color setting: a button "label: #RRGGBB" with a swatch of the color on it. Pressing it opens an editor screen
where the player sets the color with red, green and blue sliders (and alpha, if enabled) or types it as hex.

```java
ColorPicker.builder("highlight")
        .label(Text.translatable("mymod.highlight", "Highlight"))
        .value(() -> config.highlightColor)       // 0xRRGGBB
        .onChange(c -> config.highlightColor = c)
        .build();

ColorPicker.builder("overlay")
        .label(Text.translatable("mymod.overlay", "Overlay"))
        .alpha(true)                               // 0xAARRGGBB, with an alpha slider
        .value(() -> config.overlayColor)
        .onChange(c -> config.overlayColor = c)
        .build();
```

## Builder

| Method | Required | Default | Notes |
| --- | --- | --- | --- |
| `label(Supplier<Text>)` / `label(Text)` | yes | | the text before ": #RRGGBB", and the editor's title |
| `value(IntSupplier)` | yes | | your current color |
| `onChange(IntConsumer)` | yes | | stores the color when the player presses Done in the editor |
| `alpha(boolean)` | no | `false` | adds an alpha slider; the hex form becomes `#AARRGGBB` and the swatch is drawn translucent |
| `enabled`, `tooltip`, `visible` | no | | [options every widget has](https://xichil.dev/docs/xis-mvui/v1/widgets/index.md#options-every-widget-has) |

## Colors

Colors are `int`s: `0xRRGGBB`, or `0xAARRGGBB` with `alpha(true)`. Without alpha, the top byte is ignored when
reading and cleared before `onChange`.

`ColorPicker.parseHex(text, alpha)` parses hex the way the editor does, which is handy for config files. It
accepts a leading `#`, surrounding spaces and any case, and returns `null` for text that isn't a color:
`parseHex("#ff8800", false)` is `0xFF8800`, `parseHex("80FF8800", true)` is `0x80FF8800`.

## The editor screen

| Part | Id |
| --- | --- |
| the screen, titled with the label | `<id>.editor` |
| a preview: a disabled copy of the picker | `<id>.preview` |
| 0 – 255 sliders | `<id>.red`, `<id>.green`, `<id>.blue`, and `<id>.alpha` with alpha |
| a hex field | `<id>.hex` |
| Done and Cancel in the footer | `<id>.done`, `<id>.cancel` |

The sliders and the hex field edit a draft. **Done** passes it to `onChange`; **Cancel** (and Escape) drops it.
So `onChange` runs at most once per visit to the editor. Keep those ids free on your screen.

## Behaviour

- `hex()` gives the color as the button shows it, with upper-case digits.
- **Footer:** no.

## Test it

```java
host.click("highlight");                              // opens "highlight.editor"
host.slide("highlight.red", 255).click("highlight.done");
```

Rendered as `[color highlight] Highlight: #FF8800`.

## See also

- Javadoc: [ColorPicker](https://xichil.dev/javadoc/xis-mvui/v1/dev/xichil/mvui/ColorPicker.html)