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 value="#0063D1" placement="bottom"></ren-color-picker>
<ren-color-picker value="#12B886" alpha placement="bottom"></ren-color-picker>Two pickers sit side by side deliberately. The anchor name that pins a dropdown to its trigger is generated per instance at upgrade time — a single name declared in CSS would be document-wide and both panels would open over the last trigger on the page.
Reference
API
| Attribute | Type | Default | Notes |
|---|---|---|---|
value | string (hex) | "#3b82f6" | 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.