Colorpicker

An Input that lets a user specify a color

<template>
    <section>
        <b-field label="Select a color">
            <b-colorpicker value="#7957d5" />
        </b-field>
    </section>
</template>

# Alpha

<template>
    <section>
        <b-field>
            <div class="control">
                <b-switch v-model="alpha">Allow transparent color</b-switch>
            </div>
        </b-field>
        <b-field label="Select a color">
            <b-colorpicker v-model="selected" :alpha="alpha" :color-formatter="formatter" />
        </b-field>
    </section>
</template>

<script>
import Color from '../../../../../src/utils/color'

export default {
    data() {
        return {
            alpha: true,
            selected: Color.parse('#48c78eaa')
        }
    },
    methods: {
        formatter (color) {
            return color.toString(this.alpha ? 'rgba' : 'rgb')
        }
    }
}
</script>

# Representation

<template>
    <section>
        <b-field label="Select a color">
            <b-colorpicker :value="selected" representation="square" inline/>
        </b-field>
    </section>
</template>

<script>
import Color from '../../../../../src/utils/color'

export default {
    data() {
        return {
            selected: Color.parse('red')
        }
    }
}
</script>

<template>
    <section>
        <b-field label="Select a color">
            <b-colorpicker :value="selected" inline horizontal-color-picker>
                <template #footer="{ color }">
                    <div class="colorpicker-fields">
                        <b-field grouped>
                            <b-field horizontal label="R">
                                <b-input
                                    type="number"
                                    v-model.number="color.red"
                                    size="is-small"
                                    aria-label="Red"
                                    min="0"
                                    max="255"
                                />
                            </b-field>
                            <b-field horizontal label="G">
                                <b-input
                                    type="number"
                                    v-model.number="color.green"
                                    size="is-small"
                                    aria-label="Green"
                                    min="0"
                                    max="255"
                                />
                            </b-field>
                            <b-field horizontal label="B">
                                <b-input
                                    type="number"
                                    v-model.number="color.blue"
                                    size="is-small"
                                    aria-label="Blue"
                                    min="0"
                                    max="255"
                                />
                            </b-field>
                        </b-field>
                        <b-field grouped>
                            <b-field horizontal label="H">
                                <b-input
                                    type="number"
                                    v-model.number="color.hue"
                                    size="is-small"
                                    aria-label="Red"
                                    min="0"
                                    max="359"
                                    step="1"
                                />
                            </b-field>
                            <b-field horizontal label="S">
                                <b-input
                                    type="number"
                                    :value="Math.round(color.saturation * 100)"
                                    @input="color.saturation = $event / 100"
                                    size="is-small"
                                    aria-label="Green"
                                    min="0"
                                    max="100"
                                    step="1"
                                />
                            </b-field>
                            <b-field horizontal label="L">
                                <b-input
                                    type="number"
                                    :value="Math.round(color.lightness * 100)"
                                    @input="color.lightness = $event / 100"
                                    size="is-small"
                                    aria-label="Blue"
                                    min="0"
                                    max="1"
                                />
                            </b-field>
                        </b-field>
                    </div>
                    <div class="buttons is-right">
                        <b-button
                            label="Clear"
                            type="is-danger"
                            size="is-small"
                            icon-left="close"
                            outlined
                            @click="clearColor"
                        />
                    </div>
                </template>
            </b-colorpicker>
        </b-field>
    </section>
</template>

<script>
import Color from '../../../../../src/utils/color'

export default {
    data() {
        return {
            selected: Color.parse('cyan')
        }
    },
    methods: {
        clearColor () {
            this.selected = Color.parse('cyan')
        }
    }
}
</script>

# Formatter

<template>
    <section>
        <b-field label="Format">
            <b-select v-model="format" placeholder="Select a format">
                <option value="hex">Hexadecimal RGB</option>
                <option value="hexa">Hexadecimal RGB+A</option>
                <option value="rgb">Functional RGB</option>
                <option value="rgba">Functional RGB+A</option>
                <option value="hsl">Functional HSL</option>
                <option value="hsla">Functional HSL+A</option>
            </b-select>
        </b-field>
        <b-field label="Select a color">
            <b-colorpicker
                v-model="selected"
                :color-formatter="formatter"
                :alpha="hasAlpha"
                expanded
            />
        </b-field>
    </section>
</template>

<script>
import Color from '../../../../../src/utils/color'

export default {
    data() {
        return {
            format: 'rgb',
            selected: Color.parse('#3e8ed0')
        }
    },
    computed: {
        hasAlpha() {
            return /a\s*$/i.test(this.format)
        }
    },
    methods: {
        formatter (color) {
            return color.toString(this.format)
        }
    }
}
</script>

# API

Name
Description
Type
Values
Default
v-modelBinding valueObject (Color)
representationRepresentation of Saturation & Lightness valuesStringtriangle, square"triangle"
alphaAllow color with transparencyBooleanfalse
color-formatterFunction to format color to a string for display in the buttonFunction(color) => color.toString('hex')
color-parserFunction to parse value to a colorFunction(color) => Color.parse(color)
sizeVertical size of input and picker, optionalStringis-small, is-medium, is-large
inlineColorpicker is shown inline, button is removedBooleanfalse
positionOptional, position of the colorpicker relative to the buttonStringis-top-right, is-top-left, is-bottom-leftBottom right
open-on-focusOpen colorpicker on button focusBooleanfalse
focusableColorpicker container can be focusedBooleantrue
trap-focusTrap focus inside the colorpicker.Booleantrue
close-on-clickChoose whether the Colorpicker should close after selecting a colorBoolean-true
append-to-bodyAppend colorpicker dropdown to body (prevents event bubbling)Booleanfalse
Any native attribute

# Variables

You can use these variables to customize this component.

Name
Default
$colorpicker-radius$dropdown-content-radius
$colorpicker-hue-selected-stroke$primary

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub