Skip to main content

​
Overview

A comprehensive color picker component featuring support for multiple color formats (HSL, HSLA, RGB, RGBA, HEX), accessibility features with contrast ratio display, and customizable color swatches.

​
Installation

This component requires the @uiw/color-convert package: 
npm install @uiw/color-convert

​
Usage

<template>
  <ColorPicker
    v-model:value="selectedColor"
    type="hsl"
    :swatches="['#ff0000', '#00ff00', '#0000ff']"
    :hideContrastRatio="false"
    :hideDefaultSwatches="false"
    @value-change="handleColorChange"
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedColor = ref('#ff0000')

const handleColorChange = (value) => {
  console.log('Selected color:', value)
}
</script>

​
Props

Prop NameTypeDefaultDescription
valuestring | HsvaColor | HslaColor | RgbaColorundefinedThe current color value in any supported format
type'hsl' | 'hsla' | 'rgb' | 'rgba' | 'hex''hsl'Default color format to display in inputs
swatchesHexColor[][]Array of predefined color swatches
hideContrastRatiobooleanfalseHide the accessibility contrast ratio section
hideDefaultSwatchesbooleanfalseHide the default color swatches
classstring""Additional CSS classes for the popover content
openbooleanfalseControl the open/closed state of the color picker

​
Events

Event NameTypeDescription
value-change(value: ColorPickerValue) => voidEmitted when the selected color changes
update:open(value: boolean) => voidEmitted when the popover open state changes

​
Types

​
ColorPickerValue

interface ColorPickerValue {
  hex: string; // Hex color string (e.g., "#ff0000")
  hsl: HslaColor; // HSL color object with h, s, l, a properties
  hsla: HslaColor; // HSLA color object with h, s, l, a properties
  rgb: RgbaColor; // RGB color object with r, g, b, a properties
  rgba: RgbaColor; // RGBA color object with r, g, b, a properties
}

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us