Color Picker
A color field with a saturation area, hue and opacity, hex, rgb or oklch, an eyedropper, presets and a contrast check.
Rendering Color Picker…
Installation
Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.
npx mlola-ui add color-pickerUsage
import { ColorPicker } from "@/components/ui/color-picker";
export default function Example() {
return <ColorPicker label="Brand color" defaultValue="oklch(0.62 0.19 255)" format="oklch" />;
}Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:
<html data-theme="graphite" data-mode="light">HTML
The markup the example above renders, at rest. The interaction lives in the React component; from another framework, set the attributes below as the state changes.
<div class="ml-input-field ml-color-picker">
<label class="ml-input-label" id="color-picker-1-label" for="color-picker-1">Brand color</label>
<button class="ml-input ml-color-picker-trigger" id="color-picker-1" type="button" aria-label="Brand color: oklch(61.9% 0.191 255.2)" aria-haspopup="dialog" aria-expanded="false"><span class="ml-color-picker-swatch" style="--ml-color:rgb(29 132 245)" aria-hidden="true"></span><span class="ml-color-picker-value">oklch(61.9% 0.191 255.2)</span></button>
</div>Options
| Prop | Values | Default | Description |
|---|---|---|---|
format | hexrgboklch | hex | The format the value comes back in. |
Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.
Classes and attributes
A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.
| Class | Attributes |
|---|---|
ml-color-picker | — |
ml-color-picker-trigger | — |
ml-color-picker-swatch | — |
ml-color-picker-preset | aria-pressed="true" |
ml-color-picker-sample | — |
ml-color-picker-value | — |
ml-popover | data-side="bottom | left | right | top" |
ml-color-picker-popover | — |
ml-color-picker-panel | — |
ml-color-picker-area | — |
ml-color-picker-thumb | — |
ml-color-picker-sliders | — |
ml-color-picker-track | — |
ml-color-picker-hue | — |
ml-color-picker-alpha | — |
ml-color-picker-row | — |
ml-color-picker-format | — |
ml-color-picker-eyedropper | — |
ml-color-picker-text | — |
ml-color-picker-swatches | — |
ml-color-picker-contrast | — |
Accessibility and theming
- Semantic elements, accessible names and state relationships are part of the contract.
- Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
- Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
- Reduced motion and forced colors keep meaning and operation.
Dependencies
Installed alongside this component. No third-party UI runtime is ever added.