ColorPicker

Demos

How to import

<script lang="ts">
    import { Button, ColorPicker, colorStringToValue } from '@fibrae/semi-ui-svelte';
</script>

Basic Use

In portal

<script lang="ts">
    import { Button, ColorPicker, type ColorValue } from '@fibrae/semi-ui-svelte';

    let hex = $state('');

    const onChange = (value: ColorValue) => {
        hex = value.hex;
    };
</script>

<div>
    <ColorPicker alpha {onChange} usePopover />
    <br />
    <div>自定义 trigger</div>
    <ColorPicker alpha {onChange} usePopover>
        <Button>Trigger</Button>
    </ColorPicker>
    <p>当前颜色：{hex}</p>
</div>

Normal display

<script lang="ts">
    import { ColorPicker, type ColorValue } from '@fibrae/semi-ui-svelte';

    let hex = $state('');

    const onChange = (value: ColorValue) => {
        hex = value.hex;
    };
</script>

<ColorPicker alpha {onChange} />
<p>当前颜色：{hex}</p>

Eyedropper Color Picker

The eyedropper is enabled by default and supports picking colors from the browser or external software screen. Pass eyeDropper={false} to turn it off.

<script lang="ts">
    import { ColorPicker, type ColorValue } from '@fibrae/semi-ui-svelte';

    let hex = $state('');

    const onChange = (value: ColorValue) => {
        hex = value.hex;
    };
</script>

<ColorPicker alpha eyeDropper {onChange} />
<p>当前颜色：{hex}</p>

Default Value

When converting between various color representation formats, there are theoretical errors between some formats, so the value returned to you by onChange is an object containing color values in three formats: hsva, hex, and rgba.

The value you pass in should also be an object containing the same three formats. Without value the picker manages its own color, and a one-way value={x} only seeds it.

We provide the tool function colorStringToValue, a named export of @fibrae/semi-ui-svelte rather than a member of the component, to convert common color strings to this object, supporting direct passing of strings such as rgb(57,197,187) #39c5bb (the short form #3cb is also accepted) and hsv(176,71,77). A string that cannot be parsed throws an error.

<script lang="ts">
    import { ColorPicker, colorStringToValue, type ColorValue } from '@fibrae/semi-ui-svelte';

    // a one-way value only seeds the picker, which then manages its own color
    const value = colorStringToValue('rgb(57,197,187)');

    let hex = $state(value.hex);

    const onChange = (next: ColorValue) => {
        hex = next.hex;
    };
</script>

<div>
    <ColorPicker alpha {onChange} {value} />
    <p>当前颜色：{hex}</p>
</div>

Controlled

Bind value with bind:value for controlled use; for full control use the function binding bind:value={get, set}. Treat the color value as immutable and replace it as a whole when updating (declare it with $state.raw); mutating a field such as hsva.h in place does not sync the text inputs.

<script lang="ts">
    import { ColorPicker, colorStringToValue } from '@fibrae/semi-ui-svelte';

    let value = $state.raw(colorStringToValue('#39c5bb'));
</script>

<div>
    <ColorPicker alpha bind:value />
</div>

Rendering additional elements at the top and bottom

Use the topSlot and bottomSlot snippets to render additional elements at the top and bottom

<script lang="ts">
    import { ColorPicker, type ColorValue } from '@fibrae/semi-ui-svelte';

    let hex = $state('');

    const onChange = (value: ColorValue) => {
        hex = value.hex;
    };
</script>

<ColorPicker alpha {onChange}>
    {#snippet topSlot()}
        <div>TopSlot</div>
    {/snippet}
    {#snippet bottomSlot()}
        <div>Bottom Slot</div>
    {/snippet}
</ColorPicker>
<p>当前颜色：{hex}</p>

Keyboard and Focus

• With usePopover, the default trigger is a named button, and Enter or Space opens the popup. The popup is a dialog that opens on click by default and closes with Esc. Its name defaults to the built-in text; an aria-label or aria-labelledby passed in popoverProps (ariaLabel, ariaLabelledby in Vue) takes precedence.
• The handles of the color area, the hue slider and the alpha slider can all be operated with the keyboard. The color area has two sliders, saturation and brightness; the hue slider and the alpha slider have one each.
• Arrow keys step by 1, PageUp and PageDown step by 10, and Home and End jump to the ends. In the color area, whichever slider has focus, Left and Right change saturation, while Up, Down, PageUp and PageDown change brightness; Home and End act on the focused slider. Keys pressed with Alt, Ctrl or Meta are not handled, so the browser and assistive technology keep them.
• A focused handle shows the theme focus ring; the color input, the alpha input and the format selector all have accessible names.

API Table

ColorPicker

Props

Methods

Attribute placement

class (a string, array or object), style (a string) and other native attributes and events land on the picker root element; with usePopover they land on the picker element inside the popup, not on the trigger or the dialog. When the caller passes aria-label or aria-labelledby without a role, the picker root gets role="group".

ColorValue

The value and the onChange payload are the same kind of object: