Flux

Appearance

Color picker ​

This component allows users to select and adjust colors in various formats, including HEX, RGB, HSV, and HSL. It features a hue and saturation slider, an optional alpha slider for transparency control, and input fields for precise value adjustments.

Props

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

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.

Examples ​

Basic

A basic color picker that is shown directly.

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

<script
    lang="ts"
    setup>
    import { FluxColorPicker, FluxPane } from '@flux-ui/flux';
</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>
            <FluxPane style="width: 330px">
                <FluxColorPicker
                    v-model="color"
                    type="rgb"/>
            </FluxPane>
        </template>
    </FluxFlyout>
</template>

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

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

Used components ​