Color Picker

A compact color picker with a custom spectrum input and preset swatches. Integrates with Angular Forms via [(ngModel)] or formControlName. Emits a hex string on every change.

freenew

Basic Color Picker

Click the swatch button to open the picker. Select a preset or type a hex value directly.

Selected

#3b82f6

HTML

Multiple Pickers

Each instance maintains its own state independently.

Brand Color

#3b82f6

Accent Color

#8b5cf6

Custom Swatches

Override the preset swatch palette via the [swatches] input.

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add color-picker

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add color-picker
// Paths are relative to aliases.components (default: src/app/components)
import { ColorPickerComponent } from './color-picker/color-picker.component';

@Component({
  selector: 'app-your-component',
  imports: [
    ColorPickerComponent
  ],
  template: `...`
})
export class YourComponent {}

API for color-picker — generated from JSDoc in the library source.

API reference for color-picker
API	Member	Type	Default	Description
`base-color-picker`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-color-picker`	`pickerLabel`	`unknown`	`'Color picker'`	—
`base-color-picker`	`swatches`	`string[]`	`[ '#ef4444','#f97316','#eab308','#22c55e','#14b8a6', '#3b82f6','#8b5cf6','#ec4899','#64748b','#0f172a', '#ffffff','#f1f5f9']`	—
`base-color-picker`	`disabled`	`boolean`	`false`	Whether the control is disabled (consumer-facing input).