Flux

Color picker ​

The color picker lets users select and adjust a color in HEX, RGB, HSV, or HSL. It offers a hue and saturation area, an optional alpha slider for transparency, and input fields for precise values.

Props

model-value?: string | [number, number, number]
The selected color.

alpha?: number
The alpha (opacity) value, from 0 to 1. Use `v-model:alpha` to control it, together with `is-alpha-enabled`.
Default: 1

is-alpha-enabled?: boolean
Enables the alpha slider.

type?: "hex" | "rgb" | "hsl" | "hsv"
The color format used.
Default: hex

Emits

update:model-value: [string | [number, number, number]]
The updated selected color.

update:alpha: [number]
The updated alpha value, from 0 to 1.

Examples ​

Basic

A basic color picker that is shown directly.

<template>
    <FluxColorPicker
        :model-value="[31, 75, 109]"
        type="rgb"/>
</template>

<script
    lang="ts"
    setup>
    import { FluxColorPicker } from '@flux-ui/components';
</script>

Flyout

A basic color picker that is shown directly.

<template>
    <FluxFlyout>
        <template #opener="{open}">
            <FluxSecondaryButton
                label="Pick color..."
                @click="open()">
                <template #before>
                    <div :style="{background: `rgb(${color.join(' ')})`, borderRadius: '99px', width: '24px', height: '24px', position: 'relative', flexShrink: 0}"/>
                </template>
            </FluxSecondaryButton>
        </template>

        <template #default>
            <FluxPaneBody style="width: 330px">
                <FluxColorPicker
                    v-model="color"
                    type="rgb"/>
            </FluxPaneBody>
        </template>
    </FluxFlyout>
</template>

<script
    lang="ts"
    setup>
    import { FluxColorPicker, FluxFlyout, FluxPaneBody, FluxSecondaryButton } from '@flux-ui/components';
    import { ref } from 'vue';

    const color = ref<[number, number, number]>([31, 75, 109]);
</script>

Used components ​