ColorPicker

The built-in colorpicker tag — an inline saturation + hue (+ alpha) picker. Usage, formats, swatches, options, and live examples.

A built-in tag for an inline color picker — a saturation field plus a hue slider (and, for the alpha formats, an opacity slider), shown directly on the page rather than in a dropdown. It ships with aardvark, so it’s a single tag with no setup. Set a format, an optional defaultValue, and optional preset swatches.

Use it as {% colorpicker %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'colorpicker', …).

Demonstrations

Basic picker

Set a format and an optional defaultValue. Drag in the saturation field and on the hue slider.

Source: Markdown

Source: Python

Alpha format and swatches

The *a formats (rgba, hsla, hexa) add an opacity slider. Pass swatches as a comma-separated list and swatchesPerRow to control the grid width.

Source: Markdown

Source: Python

Sizes and full width

size scales the control (xs–xl), and fullWidth stretches it to the container’s width.

Source: Markdown

Source: Python

Swatches only

Turn the picker off with withPicker=false to offer a fixed palette and nothing else.

Source: Markdown

Source: Python

With other components

Generate one swatches-only picker per palette from data with a Python loop — the same component('aardvark', 'colorpicker', …) call, once per item, laid out in a card grid.

Warm

Cool

Royal

Source: Python

Attributes

Omit any attribute to take its default.

Attribute	Values	Description
`defaultValue`	string	Starting color (matching the `format`).
`format`	`hex`, `hexa`, `rgb`, `rgba`, `hsl`, `hsla`	Color format; the `*a` formats add the alpha (opacity) slider.
`swatches`	comma-separated colors	Preset swatches below the picker (e.g. `'#fa5252, #228be6'`).
`swatchesPerRow`	integer	How many swatches per row.
`size`	`xs`–`xl`	Size of the control.
`fullWidth`	boolean	Stretch the control to the container’s width.
`withPicker`	boolean	Show the saturation field and sliders (on by default; set `false` to show only swatches).
`attr`	raw-HTML map	Extra HTML attributes, passed as `attr={…}`.

CSS Selectors

Target a {% colorpicker %} from your own CSS with the island data attribute or the Mantine Styles API part classes:

/* Every ColorPicker instance on the page */
[data-aardvark-island="ColorPicker"] { }

/* Mantine Styles API parts */
.mantine-ColorPicker-wrapper { }
.mantine-ColorPicker-saturation { }
.mantine-ColorPicker-slider { }
.mantine-ColorPicker-swatch { }

Injecting Attributes

Pass attr={…} to forward raw HTML attributes — including inline event handlers — straight onto the rendered element. Here it is wired to onchange, so changing the picker reads the changed control value, logs it to the console, and alerts it:

Source: Markdown

Source: Python