Color Picker
FreeHSV gradient canvas picker with hue rail, alpha channel, hex input, preset swatches and 3 sizes.
</>sv-color-picker colorpickerinput
import { SvColorPickerComponent } from '@styloviz/forms';Demo & usage
Basic usage
Usage example — open the gallery for the full interactive demo.
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Alpha + preset swatches
example.htmlAngular
1 lines
<sv-color-picker [showAlpha]="true" [swatches]="brandColors" format="hex" [(ngModel)]="color" />
When to use
- Letting users pick an arbitrary color (theming, labels, calendars, design tools).
- You need HSV selection plus hex entry and brand preset swatches.
- For a fixed brand palette only, a swatch list or Select may suffice.
Async states
None — this component has nothing to load, so it has no loading, empty or error state to drive.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | string (two-way) | '#3b82f6' | Selected color (two-way). |
| format | ColorPickerFormat | 'hex' | Output format: hex, rgb or hsl. |
| size | ColorPickerSize | 'md' | Picker size: sm, md or lg. |
| swatches | readonly ColorSwatch[] | DEFAULT_SWATCHES | Preset swatch palette. |
| disabled | boolean | false | Disable the picker. |
| label | string | '' | Accessible label for the control. |
| showAlpha | boolean | false | Show the alpha (transparency) channel. |
| contrastBackground | string | '' | A background to check the chosen colour against. |
| colorNamer | (hex: string) => string | svColorName | Turn the hex into words for assistive tech. |
| errorMessage | string | '' | Client-side validation message. |
| serverError | SvServerError | null | A rejection reported by the server about this value. Self-expiring. |
Outputs
| Event | Payload type | Description |
|---|---|---|
| colorChange | string | Emitted with the new color whenever it changes. |
| valueChange | string | Emits the new `value` whenever it changes — the output half of `[(value)]`. |
Customization & theming
- HSV canvas with a hue rail and optional `showAlpha` opacity channel; `format` outputs hex, rgb or hsl.
- Hex input plus configurable preset `swatches` ({ label, value }); `label`, `disabled`, three `size`s.
- Two-way bind `[(value)]` or a reactive control (CVA); listen to `(colorChange)`.
Best practices
- Do: Provide brand `swatches` so users land on on-brand colors quickly.
- Do: Expose the hex input for precise, copy-pasteable values.
- Tip: Only enable `showAlpha` when transparency is actually meaningful for the value.
Accessibility
- The gradient, hue and opacity controls are `role="slider"` and fully keyboard-operable: Arrow keys adjust (Shift for larger steps), Home/End jump to the ends.
- Opening moves focus into the panel; Escape closes and returns focus to the trigger. Swatches expose `aria-label` + `aria-pressed`, and the hex input and sliders are labelled.
- Implements ControlValueAccessor — works with `[(ngModel)]`, `[formControl]` and `formControlName`; `formControl.disable()` disables the trigger.
Feedback on Color Picker
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.