The <luna-color-picker> component provides an advanced color picker with support for multiple formats, swatches, and inline/popup modes.
Paths
/lunadom/components/color-picker/color-picker.js REQUIRED
Example
Inline Mode
Format Support
Customization
Attributes
label - Label text for the picker
value - Initial color value
format - Color format (hex, rgb, hsl, hsv)
swatches - Comma-separated list of preset colors
inline - Display inline instead of popup
CSS Variables
--luna-picker-border-radius - Picker border radius
--luna-picker-trigger-bg - Trigger button background
--luna-picker-panel-bg - Panel background color
Example Code
<!-- Popup Mode with Swatches -->
<luna-color-picker
label="Pick a Color"
value="#e63946"
format="hex"
swatches="#e63946,#457b9d,#2a9d8f,#fff,#000"
>
</luna-color-picker>
<!-- Inline Mode -->
<luna-color-picker
value="#9b5de5"
format="hex"
swatches="#9b5de5,#f15bb5,#fee440"
inline
>
</luna-color-picker>
<!-- Different Formats -->
<luna-color-picker
label="RGB"
value="#457b9d"
format="rgb"
>
</luna-color-picker>
<luna-color-picker
label="HSL"
value="#e76f51"
format="hsl"
>
</luna-color-picker>
<luna-color-picker
label="HSV"
value="#2a9d8f"
format="hsv"
>
</luna-color-picker>
<!-- Custom Themed -->
<luna-color-picker
value="#2a9d8f"
style="
--luna-picker-border-radius: 4px;
--luna-picker-trigger-bg: #264653
--luna-picker-swatch-size: 28px;"
>
</luna-color-picker>