Composite
Color Picker Requires JS
Color selection with hue-saturation gradient, alpha slider, hex / RGB / HSL inputs and a swatch palette of recent colors.
About
Overview
Use Color Picker in design tools, theme builders and visual editors. For form-style "pick from a palette" use a Toggle Group of swatches instead — full pickers are heavy.
Live
Demo
<ren-color-picker name="brand" value="#0063D1"></ren-color-picker>Reference
API
| Attribute | Type | Default | Notes |
|---|---|---|---|
value | string (hex) | "#000000" | Initial color. |
format | "hex" | "rgb" | "hsl" | "hex" | Output format on the ren-change event. |
alpha | boolean | false | Show alpha (transparency) slider. |
placement | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side for the popover. Reflected to data-side. |
Inclusive by default
Accessibility
- Always provide a hex / RGB text input alongside the visual picker — it's the only path for users who can't see colors.
- The 2D HSV gradient is keyboard-accessible: arrow keys move the cursor, Page Up / Down jumps in larger steps.