Skip to main content
The ColorPicker component provides an intuitive interface for selecting colors with a saturation/brightness gradient, hue slider, preset color swatches, and hex input field.

​
Import

import { ColorPicker } from '@luminescent/ui-qwik';

​
Usage

import { useSignal } from '@builder.io/qwik';

export default component$(() => {
  const color = useSignal('#4498DB');
  
  return (
    <ColorPicker
      value={color.value}
      onInput$={(newColor) => {
        color.value = newColor;
      }}
    />
  );
});

​
Props

​
value
string
default:"#000000"
The current color value as a hex string (e.g., #FF5733).
​
onInput$
QRL<(color: string) => void>
Callback fired when the color changes. Receives the new color as a hex string.
​
colors
string[]
Array of preset color swatches to display. Defaults to a curated set of 14 colors including pastels, vibrant colors, and grayscale.
​
preview
'left' | 'right' | 'top' | 'bottom' | 'full'
default:"left"
Position of the color preview relative to the hex input field.
  • left/right: Small square preview beside input
  • top/bottom: Thin bar above/below input
  • full: Input background is the color with adaptive text color
​
horizontal
boolean
Layout direction for the color picker. When true, elements are arranged horizontally.
​
showInput
boolean
default:"true"
Whether to show the hex input field and color preview.
​
id
string
HTML id attribute for the color picker container.
​
class
{ [key: string]: boolean }
Object-based class names for conditional styling.

​
Examples

<ColorPicker
  value={color.value}
  onInput$={(newColor) => color.value = newColor}
/>

​
Behavior

The color picker validates hex input and only accepts valid 6-digit hex colors. Invalid input is ignored. The component uses HSV color space internally for smooth gradient transitions.

​
Features

  • Saturation/Brightness Gradient: Drag to select color saturation and brightness
  • Hue Slider: Vertical slider to select the base hue
  • Preset Swatches: Click any preset color for instant selection
  • Random Color Button: Shuffle icon generates random colors
  • Hex Input: Direct hex code entry with validation
  • Touch Support: Full touch and mouse event support
  • Smart Text Color: In full preview mode, text color adapts based on background brightness

Build docs developers (and LLMs) love

Get started for freeTalk to us