Color Picker

Installation

pnpm dlx @mielui/svelte add color-picker

npx @mielui/svelte add color-picker

yarn dlx @mielui/svelte add color-picker

bunx @mielui/svelte add color-picker

Usage

Compose Root, Trigger and Content. Bind value to a six-digit hex string with its leading hash, such as #5e6ad2. Shorthand hex, named colors and other color formats are not parsed.

<script lang="ts">
    import * as ColorPicker from '@mielui/svelte/components/color-picker';

    let value = $state('#5e6ad2');
</script>

<ColorPicker.Root bind:value label="Accent color">
    <ColorPicker.Trigger />
    <ColorPicker.Content />
</ColorPicker.Root>

label prints a visible label above the trigger and names the trigger and panel. Give each picker a distinct label when several appear together. The hex field and every channel have accessible names, and the channel sliders are a keyboard alternative to the plane. Hue changes keep zero saturation, so raise saturation to see the hue.

Glass surface

Set surface="glass" on Content for a translucent panel with blur, or surface="solid" for an opaque one. Without surface, the panel follows the theme. Glass falls back to an opaque panel when backdrop filtering is unavailable or reduced transparency is on.

Panel behavior

In browsers with the EyeDropper API, currently Chrome and Edge on desktop, the hex field shows a pipette button that picks a color from anywhere on screen. Other browsers do not show the button. Content shares its panel with Popover. A press outside closes the picker unless you set allowClickOutside={false}. dismissLayer={false} removes the invisible layer that catches the first outside press. focusTrap and lockScroll decide whether Tab and page scrolling are held while it is open.

portal={false} renders the panel in place, which you need when the picker sits inside a dialog that traps focus. refElement anchors it to another element. role and tabindex set the panel's ARIA role and tab index, and surfaceClass styles the inner surface while class styles the frame.

Labels

Built-in text is English. Pass a ColorPickerLabels object to labels on Root to translate the trigger text shown before a color is chosen, and the names of the panel, the hex input, the screen color button, and each slider and channel. trigger is a function of Root's label and the color, so a translation can reorder them. Every key is optional, and an omitted key keeps its English default.

<script lang="ts">
    import * as ColorPicker from '@mielui/svelte/components/color-picker';
    import type { ColorPickerLabels } from '@mielui/svelte/components/color-picker';

    const labels: ColorPickerLabels = {
        choose: 'Choisir une couleur',
        picker: 'Sélecteur de couleur',
        hex: 'Couleur hexadécimale',
        eyedropper: 'Prélever une couleur',
        trigger: (label, color) => `${label} : ${color}`,
        hue: 'Teinte',
        saturation: 'Saturation',
        lightness: 'Luminosité',
        brightness: 'Valeur',
        red: 'Rouge',
        green: 'Vert',
        blue: 'Bleu'
    };

    let value = $state('');
</script>

<ColorPicker.Root bind:value {labels}>
    <ColorPicker.Trigger />
    <ColorPicker.Content />
</ColorPicker.Root>