@kit-ng-ui/color-picker

Color picker with trigger + popover, format toggle (HEX / RGB / HSB), preset swatches and ControlValueAccessor support.

Uses the native <input type="color"> for the chooser surface so it works cross-browser without bundling a full HSV gradient — the rest of the panel (HEX text input, format dropdown, preset rail) wraps it.

Install

pnpm add @kit-ng-ui/color-picker

@use '@kit-ng-ui/color-picker/styles';

Example

<kit-color-picker [(ngModel)]="brand" />

<kit-color-picker
  [value]="'#5b21b6'"
  [showText]="true"
  format="rgb"
  (valueChange)="onChange($event)"
/>

<kit-color-picker
  [presets]="[
    { label: 'Brand', colors: ['#5b21b6', '#a78bfa', '#e9d5ff'] },
  ]"
/>

API

| Input | Type | Default | Description | | ------------ | ----------------------------------- | ------------ | ---------------------------------------- | | value | string | '#1677ff' | Selected color (hex). | | format | 'hex' \| 'rgb' \| 'hsb' | 'hex' | Display format for the trigger text. | | size | 'sm' \| 'md' \| 'lg' | 'md' | Trigger height. | | disabled | boolean | false | Disable the trigger. | | showText | boolean | false | Show the formatted color next to swatch. | | presets | KitColorPreset[] \| null | built-in | Swatch groups in the panel. |

| Output | Type | Description | | -------------- | --------- | ---------------------------------------- | | valueChange | string | Hex string of the new color. | | openChange | boolean | Whether the panel is open. |