Components / Color Picker
Color Picker
Full color picker with spectrum area, hue slider, hex/RGB inputs, alpha, and preset swatches.
forms v0.5.0
Playground
Examples
Default
<cg-color-picker label="Brand Color"></cg-color-picker>With alpha
<cg-color-picker label="Background" showAlpha value="#22c55e"></cg-color-picker>Minimal
<cg-color-picker label="Accent" showRgb="false" showPresets="false" value="#8b5cf6"></cg-color-picker>Import
import { CgColorPicker } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-color-picker';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | "#3b82f6" | Hex color value |
label | string | — | Label text |
showAlpha | boolean | false | Show alpha/opacity slider |
showRgb | boolean | true | Show RGB number inputs |
showPresets | boolean | true | Show preset color swatches |
disabled | boolean | false | Disabled state |
Events
| Event | Detail | Description |
|---|---|---|
cg-color-change | {color: string, hex: string} | When color changes |