Accessibility: Work in progress

Translations: Work in progress

Color Picker

A versatile color picker component that supports swatches, custom colors, and various picker formats.

Basic Usage

swatch, picker, and inline-picker types

selected color from inline-picker:

swatch.vuepicker.vueinlinePicker.vue

html

<HLColorPicker
  id="basic-color-picker"
  :swatches="[{
      key: 'brand',
      label: 'Brand Colors',
      type: 'brand',
      swatches: ['var(--primary-200)', 'var(--primary-500)', 'var(--primary-800)'],
      showAddButton: false,
      showTooltip: 'value'
    }]"
/>

html

<HLColorPicker id="basic-color-picker-2" type="picker" @select="handleOnSelect" />

html

<div class="w-80">
  <HLColorPicker id="basic-color-picker-3" type="inline-picker" @select="handleOnSelect" />
</div>

Empty States

empty.vueempty.ts

html

<HLContentWrap>
  <HLColorPicker id="basic-color-picker" :swatches="emptySwatches">
    <template #empty="{ key }"> No {{ key.toLowerCase() }} colors found </template>
  </HLColorPicker>
</HLContentWrap>

const emptySwatches: HLColorPickerSections[] = [
  {
    key: 'brand',
    label: 'Brand Colors',
    swatches: [],
    showAddButton: false,
    showTooltip: 'value',
  },
  {
    key: 'default',
    label: 'Default Colors',
    swatches: [],
    showAddButton: true,
    showTransparentSwatch: true,
    showEyeDropper: true,
    showTooltip: 'both',
  },
  {
    key: 'custom',
    label: 'Custom Colors',
    swatches: [],
    showAddButton: true,
    showEyeDropper: true,
    showTooltip: 'name',
    editable: true,
  },
]

More Swatches

Open dev tools console and play with the picker to see how the emits work!

moreSwatches.vuemoreSwatches.ts

html

<HLColorPicker id="basic-color-picker" :swatches="moreSwatches" />

const moreSwatches: HLColorPickerSections[] = [
  {
    key: 'brand',
    label: 'Brand Colors',
    swatches: ['var(--primary-500)', 'var(--primary-600)', 'var(--primary-700)', 'var(--primary-800)', 'var(--primary-900)'],
    showAddButton: false,
    showTooltip: 'value',
  },
  {
    key: 'default',
    label: 'Default Colors',
    swatches: ['var(--gray-100)', 'var(--gray-200)', 'var(--gray-300)', 'var(--gray-400)', 'var(--gray-500)'],
    showAddButton: true,
    showTransparentSwatch: true,
    showEyeDropper: true,
    showTooltip: 'both',
  },
  {
    key: 'custom',
    label: 'Custom Colors',
    swatches: ['var(--green-100)', 'var(--green-200)', 'var(--green-300)', 'var(--green-400)', 'var(--green-500)'],
    showAddButton: true,
    showEyeDropper: true,
    showTooltip: 'name',
    editable: true,
  },
  {
    key: 'blues',
    label: 'Blues',
    swatches: ['var(--indigo-100)', 'var(--indigo-200)', 'var(--indigo-300)', 'var(--indigo-400)', 'var(--indigo-500)'],
    showAddButton: true,
    showEyeDropper: true,
    showTooltip: 'name',
    editable: true,
  },
  {
    key: 'pinks',
    label: 'Pinks',
    swatches: ['var(--pink-100)', 'var(--pink-200)', 'var(--pink-300)', 'var(--pink-400)', 'var(--pink-500)'],
    showAddButton: true,
    showEyeDropper: true,
    showTooltip: 'name',
    editable: true,
  },
]

CRUD Operations on Swatches

Look out for notifications based on CRUD operations performed on the swatches!

crudOps.vuecrudOps.tscrudOpsNotification.ts

html

<HLColorPicker
  id="basic-color-picker"
  :swatches="colorpickerSections"
  @swatch:add="handleSwatchAdd"
  @swatch:edit="handleSwatchEdit"
  @swatch:delete="handleSwatchDelete"
/>

import type { HLColorPickerSections } from '@platform-ui/highrise'

const colorpickerSections: HLColorPickerSections[] = [
  {
    key: 'brand',
    label: 'Brand Colors',
    swatches: ['var(--primary-500)', 'var(--primary-600)', 'var(--primary-700)', 'var(--primary-800)', 'var(--primary-900)'],
    showAddButton: false,
    showTooltip: 'value',
  },
  {
    key: 'default',
    label: 'Default Colors',
    swatches: ['var(--gray-100)', 'var(--gray-200)', 'var(--gray-300)', 'var(--gray-400)', 'var(--gray-500)'],
    showAddButton: true,
    showTransparentSwatch: true,
    showEyeDropper: true,
    showTooltip: 'both',
  },
  {
    key: 'custom',
    label: 'Custom Colors',
    swatches: ['var(--green-100)', 'var(--green-200)', 'var(--green-300)', 'var(--green-400)', 'var(--green-500)'],
    showAddButton: true,
    showEyeDropper: true,
    showTooltip: 'name',
    editable: true,
  },
  {
    key: 'blues',
    label: 'Blues',
    swatches: ['var(--indigo-100)', 'var(--indigo-200)', 'var(--indigo-300)', 'var(--indigo-400)', 'var(--indigo-500)'],
    showAddButton: true,
    showEyeDropper: true,
    showTooltip: 'name',
    editable: true,
  },
  {
    key: 'pinks',
    label: 'Pinks',
    swatches: ['var(--pink-100)', 'var(--pink-200)', 'var(--pink-300)', 'var(--pink-400)', 'var(--pink-500)'],
    showAddButton: true,
    showEyeDropper: true,
    showTooltip: 'name',
    editable: true,
  },
]

import { h } from 'vue'
import type { HLColorSwatch } from '@platform-ui/highrise'
import { HLAlert, HLSwatchTile, HLText, useHLNotification } from '@platform-ui/highrise'

const notification = useHLNotification()
function openNotification(
  action: 'add' | 'edit' | 'delete',
  sectionKey: string,
  sectionIndex: number,
  value: string | HLColorSwatch,
  editorDeleteIndex?: number
) {
  const mergedValue = typeof value === 'string' ? value : JSON.stringify(value)
  const message =
    action === 'add' ? 'A new swatch has been added' : action === 'edit' ? 'A swatch has been edited' : 'A swatch has been deleted'
  const color = action === 'add' ? 'green' : action === 'edit' ? 'blue' : 'red'
  const n = notification.create({
    content: () =>
      h(
        HLAlert,
        {
          closable: true,
          color,
          id: 'test-alert',
          width: '720px',
          onClose: () => {
            n.destroy()
          },
        },
        {
          default: () =>
            h(
              'div',
              {
                class: 'flex flex-col gap-2',
              },
              [
                h(
                  HLText,
                  {
                    size: 'xl',
                    weight: 'bold',
                  },
                  () => message
                ),
                h(
                  HLText,
                  {
                    size: 'md',
                    weight: 'medium',
                  },
                  () => `Section: ${sectionKey}`
                ),
                h(
                  HLText,
                  {
                    size: 'md',
                    weight: 'medium',
                  },
                  () => `Section Index: ${sectionIndex}`
                ),
                h(
                  HLText,
                  {
                    size: 'md',
                    weight: 'medium',
                  },
                  () => `Value: ${mergedValue}`
                ),
                h(
                  HLText,
                  {
                    size: 'md',
                    weight: 'medium',
                  },
                  () => `Swatch Index: ${editorDeleteIndex ?? 'N/A'}`
                ),
                h(HLSwatchTile, {
                  value: typeof value === 'string' ? value : value.value8,
                  shape: 'rectangle',
                  size: 'lg',
                }),
              ]
            ),
        }
      ),
    duration: 10000,
  })
}
const handleSwatchAdd = (sectionKey: string, sectionIndex: number, value: string | HLColorSwatch) => {
  console.log('handleSwatchAdd: ', sectionKey, sectionIndex, value)
  openNotification('add', sectionKey, sectionIndex, value)
}
const handleSwatchEdit = (sectionKey: string, sectionIndex: number, editIndex: number, value: string | HLColorSwatch) => {
  console.log('handleSwatchEdit: ', sectionKey, sectionIndex, editIndex, value)
  openNotification('edit', sectionKey, sectionIndex, value, editIndex)
}
const handleSwatchDelete = (sectionKey: string, sectionIndex: number, deleteIndex: number, value: string | HLColorSwatch) => {
  console.log('handleSwatchDelete: ', sectionKey, sectionIndex, deleteIndex, value)
  openNotification('delete', sectionKey, sectionIndex, value, deleteIndex)
}

Default Swatches

defaultSwatches.vuedefaultSwatches.ts

html

<HLColorPicker id="basic-color-picker" :swatches="colorpickerSections" :width="394" />

import type { HLColorPickerSections } from '@platform-ui/highrise'

const colorpickerSections: HLColorPickerSections[] = [
  {
    key: 'brand',
    label: 'Brand Colors',
    swatches: ['var(--primary-500)', 'var(--primary-600)', 'var(--primary-700)', 'var(--primary-800)', 'var(--primary-900)'],
    showAddButton: false,
    showTooltip: 'value',
  },
  ...defaultColorSections,
  {
    key: 'custom',
    label: 'Custom Colors',
    swatches: ['var(--green-100)', 'var(--green-200)', 'var(--green-300)', 'var(--green-400)', 'var(--green-500)'],
    showAddButton: true,
    showEyeDropper: true,
    showTooltip: 'name',
    editable: true,
  },
]

The showTooltip property controls what information is displayed when hovering over a color swatch. It has four possible values:

name: Shows only the color's label in the tooltip
value: Shows only the color value and alpha percentage in the tooltip
both: Shows both the name and value information If the color has a label: Shows the label in the header and the color value with alpha below If the color has no label: Shows just the color value with alpha
false: No tooltip will appear when hovering over the color swatch

tooltipTypes.vuetooltipTypes.ts

html

<HLColorPicker id="basic-color-picker" :swatches="tooltipTypesColorpickerSections" :width="392" />

import type { HLColorPickerSections } from '@platform-ui/highrise'

const tooltipTypesColorpickerSections: HLColorPickerSections[] = [
  {
    key: 'custom1',
    label: 'Show Name',
    swatches: [
      {
        value: '#22C55E',
        value8: '#22C55EFF',
        alpha: 100,
        label: 'Success Green',
      },
      {
        value: '#16A34A',
        value8: '#16A34AFF',
        alpha: 100,
        label: 'Forest Green',
      },
      {
        value: '#15803D',
        value8: '#15803DFF',
        alpha: 100,
        label: 'Deep Green',
      },
      {
        value: '#166534',
        value8: '#166534FF',
        alpha: 100,
        label: 'Dark Green',
      },
      {
        value: '#14532D',
        value8: '#14532DFF',
        alpha: 100,
        label: 'Pine Green',
      },
      {
        value: '#14532D',
        value8: '#14532DFE',
        alpha: 99,
        label: 'Pine Green v2',
        custom: '{{ customValues.pine.green.v2 }}',
      },
    ],
    showAddButton: true,
    showEyeDropper: true,
    showTransparentSwatch: true,
    showTooltip: 'name',
    editable: true,
  },
  {
    key: 'custom2',
    label: 'Show Value',
    swatches: [
      {
        value: '#3B82F6',
        value8: '#3B82F6FF',
        alpha: 100,
        label: 'Primary Blue',
      },
      {
        value: '#2563EB',
        value8: '#2563EBFF',
        alpha: 100,
        label: 'Royal Blue',
      },
      {
        value: '#1D4ED8',
        value8: '#1D4ED8FF',
        alpha: 100,
        label: 'Deep Blue',
      },
      {
        value: '#1E40AF',
        value8: '#1E40AFFF',
        alpha: 100,
        label: 'Navy Blue',
      },
      {
        value: '#1E3A8A',
        value8: '#1E3A8AFF',
        alpha: 100,
        label: 'Dark Blue',
      },
      {
        value: '#1E3A8A',
        value8: '#1E3A8AFE',
        alpha: 99,
        label: 'Dark Blue v2',
        custom:
          '{{ customValues.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2.darkBlue.v2 }}',
      },
    ],
    showAddButton: true,
    showEyeDropper: true,
    showTransparentSwatch: true,
    showTooltip: 'value',
    editable: true,
  },
  {
    key: 'custom3',
    label: 'Show Both',
    swatches: [
      {
        value: '#EF4444',
        value8: '#EF4444FF',
        alpha: 100,
        label: 'Bright Red',
      },
      {
        value: '#DC2626',
        value8: '#DC2626FF',
        alpha: 100,
        label: 'Fire Red',
      },
      {
        value: '#B91C1C',
        value8: '#B91C1CFF',
        alpha: 100,
        label: 'Ruby Red',
      },
      {
        value: '#991B1B',
        value8: '#991B1BFF',
        alpha: 100,
        label: 'Dark Red',
      },
      {
        value: '#7F1D1D',
        value8: '#7F1D1DFF',
        alpha: 100,
        label: 'Deep Red',
      },
      {
        value: '#7F1D1D',
        value8: '#7F1D1DFE',
        alpha: 99,
        label: 'Deep Red v2',
        custom:
          '{{ customValues.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2.deepRed.v2 }}',
      },
    ],
    showAddButton: true,
    showEyeDropper: true,
    showTransparentSwatch: true,
    showTooltip: 'both',
    editable: true,
  },
]

Different Swatch Shapes

shapeSizes.vueshapeSizes.ts

html

<HLColorPicker id="basic-color-picker" swatch-size="3xs" :width="392" :swatches="shapeSizeExampleSections" />

import type { HLColorPickerSections } from '@platform-ui/highrise'

const shapeSizeExampleSections: HLColorPickerSections[] = [
  {
    key: 'custom1',
    label: 'Show Name',
    swatches: [
      {
        value: '#22C55E',
        value8: '#22C55EFF',
        alpha: 100,
        label: 'Success Green',
        overrideTileShape: 'circle',
      },
      {
        value: '#16A34A',
        value8: '#16A34AFF',
        alpha: 100,
        label: 'Forest Green',
      },
      {
        value: '#15803D',
        value8: '#15803DFF',
        alpha: 100,
        label: 'Deep Green',
        overrideTileShape: 'rectangle',
      },
      {
        value: '#166534',
        value8: '#166534FF',
        alpha: 100,
        label: 'Dark Green',
      },
      {
        value: '#14532D',
        value8: '#14532DFF',
        alpha: 100,
        label: 'Pine Green',
      },
    ],
    showAddButton: true,
    showEyeDropper: true,
    showTransparentSwatch: true,
    showTooltip: 'name',
    editable: true,
    overrideTileShape: 'rectangle',
  },
  {
    key: 'custom1',
    label: 'Show Value',
    swatches: [
      {
        value: '#3B82F6',
        value8: '#3B82F6FF',
        alpha: 100,
        label: 'Primary Blue',
      },
      {
        value: '#2563EB',
        value8: '#2563EBFF',
        alpha: 100,
        label: 'Royal Blue',
      },
      {
        value: '#1D4ED8',
        value8: '#1D4ED8FF',
        alpha: 100,
        label: 'Deep Blue',
      },
      {
        value: '#1E40AF',
        value8: '#1E40AFFF',
        alpha: 100,
        label: 'Navy Blue',
      },
      {
        value: '#1E3A8A',
        value8: '#1E3A8AFF',
        alpha: 100,
        label: 'Dark Blue',
      },
    ],
    showAddButton: true,
    showEyeDropper: true,
    showTransparentSwatch: true,
    showTooltip: 'value',
    editable: true,
  },
]

Custom Trigger

customTrigger.vue

html

<HLColorPicker
  id="basic-color-picker"
  :width="394"
  :swatches="[
  {
    key: 'custom',
    label: 'Custom Colors',
    swatches: ['var(--green-100)', 'var(--green-200)', 'var(--green-300)', 'var(--green-400)', 'var(--green-500)'],
  },
]"
>
  <template #trigger>
    <HLButton id="cp-trigger-1" size="sm" variant="secondary" color="blue"> Select Color </HLButton>
  </template>
</HLColorPicker>

Custom Add Button Slot

customAddButton.vuecustomAddButton.ts

html

<HLContentWrap>
  <HLColorPicker id="basic-color-picker" :width="394" :swatches="colorpickerSections">
    <template #swatchAddButton="{ sectionKey, sectionIndex }">
      <HLButton :id="`${sectionKey}-${sectionIndex}`" size="3xs" color="blue" variant="secondary">
        {{ sectionIndex }}. {{ sectionKey }}
      </HLButton>
    </template>
  </HLColorPicker>
</HLContentWrap>

import type { HLColorPickerSections } from '@platform-ui/highrise'

const colorpickerSections: HLColorPickerSections[] = [
  {
    key: 'brand',
    label: 'Brand Colors',
    swatches: ['var(--primary-500)', 'var(--primary-600)', 'var(--primary-700)', 'var(--primary-800)', 'var(--primary-900)'],
    showAddButton: false,
    showTooltip: 'value',
  },
  {
    key: 'default',
    label: 'Default Colors',
    swatches: ['var(--gray-100)', 'var(--gray-200)', 'var(--gray-300)', 'var(--gray-400)', 'var(--gray-500)'],
    showAddButton: true,
    showTransparentSwatch: true,
    showEyeDropper: true,
    showTooltip: 'both',
  },
  {
    key: 'custom',
    label: 'Custom Colors',
    swatches: ['var(--green-100)', 'var(--green-200)', 'var(--green-300)', 'var(--green-400)', 'var(--green-500)'],
    showAddButton: true,
    showEyeDropper: true,
    showTooltip: 'name',
    editable: true,
  },
  {
    key: 'blues',
    label: 'Blues',
    swatches: ['var(--indigo-100)', 'var(--indigo-200)', 'var(--indigo-300)', 'var(--indigo-400)', 'var(--indigo-500)'],
    showAddButton: true,
    showEyeDropper: true,
    showTooltip: 'name',
    editable: true,
  },
  {
    key: 'pinks',
    label: 'Pinks',
    swatches: ['var(--pink-100)', 'var(--pink-200)', 'var(--pink-300)', 'var(--pink-400)', 'var(--pink-500)'],
    showAddButton: true,
    showEyeDropper: true,
    showTooltip: 'name',
    editable: true,
  },
]

Props

Name	Type	Default	Description
id *	`string \| undefined`	`undefined`	The unique identifier for the color picker
value	`string`	`'#ff0000'`	The current color value
autoCloseOnSelect	`boolean`	`false`	Whether to close the picker after color selection
pickerOptions	`HLColorPickerOptions`	`defaultPickerOpts`	Configuration options for the color picker
placement	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end' \| 'bottom-start' \| 'bottom-end' as HLPopoverPlacement`	`'bottom-start'`	Placement of the color picker
swatches	`HLColorPickerSections[]`	`[]`	Array of color section configurations
swatchShape	`'square' \| 'circle' \| 'rectangle' as HLSwatchTileShape`	`'square'`	The shape of color swatches
swatchSize	`'lg' \| 'md' \| 'sm' \| 'xs' \| '2xs' \| '3xs' as HLSwatchTileSize`	`'xs'`	The size of color swatches
trigger	`'click' \| 'hover' \| 'focus' \| 'manual' as HLPopoverTrigger`	`'click'`	The trigger action for the color-picker to open
type	`'swatch' \| 'picker' \| 'inline-picker' as HLColorPickerType`	`'swatch'`	The type of color picker to display
width	`number`	`276`	Width of the color picker in pixels

Types

HLColorPickerSections.tsHLColorPickerOptions.tsdefaultPickerOpts.tsHLColorSwatch.ts

export type HLColorPickerSections = {
  key: string
  label: string | false
  swatches: Array<HLColorSwatch | string>
  showAddButton?: boolean
  showTransparentSwatch?: boolean
  showEyeDropper?: boolean
  showTooltip?: 'name' | 'value' | 'both' | false
  editable?: boolean
  overrideTileShape?: 'square' | 'circle' | 'rectangle'
}

export type HLColorPickerOptions = {
  // Format to show by default in the color picker
  defaultPickerFormat?: 'HEX' | 'RGB' | 'HSL' | 'HSB' | 'Custom'
  // Available format options in the dropdown
  pickerFormatOptions?: Array<'HEX' | 'RGB' | 'HSL' | 'HSB' | 'Custom'>
  // Show alpha/opacity control
  showAlpha?: boolean
  // Show save/cancel buttons
  showCTA?: boolean
  // Show eyedropper tool
  showEyeDropper?: boolean
  // Show hue slider
  showHue?: boolean
  // Show input fields for color values
  showInputFields?: boolean
}

// Default values
const defaultPickerOpts = {
  defaultPickerFormat: 'HEX',
  pickerFormatOptions: ['HEX', 'RGB', 'HSL', 'HSB', 'Custom'],
  showAlpha: true,
  showCTA: true,
  showEyeDropper: true,
  showHue: true,
  showInputFields: true,
} as const

export type HLColorSwatch = {
  alpha: number
  value: string
  value8: string
  label?: string
  oldValue?: string | HLColorSwatch
  overrideTileShape?: 'square' | 'circle' | 'rectangle'
  custom?: false | string
  inputType?: 'HEX' | 'RGB' | 'HSL' | 'HSB' | 'Custom'
}

Supported Color Formats

The color picker supports the following formats:

Format	Example	Description
HEX	`#FF0000`	6-digit (RGB) hexadecimal
HEXA	`#FF0000FF`	8-digit (RGBA) hexadecimal
RGB	`rgb(255, 0, 0)`	RGB values (0-255)
RGBA	`rgba(255, 0, 0, 1)`	RGB with alpha channel (0-1)
HSL	`hsl(0, 100%, 50%)`	Hue (0-360), Saturation (0-100%), Lightness (0-100%)
HSLA	`hsla(0, 100%, 50%, 1)`	HSL with alpha channel (0-1)
HSB	`hsb(0, 100%, 100%)`	Hue (0-360), Saturation (0-100%), Brightness (0-100%)
Custom	`var(--primary-500)` \| `{{ location.customValue }}`	Custom variable names

Emits

Name	Parameters	Description
`@select`	`(value: string, selectedValue: string \| HLColorSwatch, sectionKey?: string, sectionIndex?: number, tileIndex?: number) => void`	Emitted when a color is selected; Only `HEXA` value is emitted for `type="picker"`. Other arguments are for `type="swatch"`
`@swatch:add`	`(sectionKey: string, sectionIndex: number, newValue: HLColorSwatch) => void`	Emitted when a new swatch is added; index not necessary as new swatches are added to the start of the array; swatches array is not updated in case of custom value
`@swatch:delete`	`(sectionKey: string, sectionIndex: number, deleteIndex: number, deletedValue: string \| HLColorSwatch) => void`	Emitted when a swatch is deleted
`@swatch:edit`	`(sectionKey: string, sectionIndex: number, editIndex: number, updatedValue: string \| HLColorSwatch) => void`	Emitted when a swatch is edited
`@swatch:reset`	`(sectionKey: string, sectionIndex: number, resetIndex: number, revertedValue: string \| HLColorSwatch) => void`	Emitted when a swatch is deleted
`@update:picker`	`(value: string, value8: string, alpha: number, inputType?: PickerInputType, label?: string, custom?: string \| false) => void`	Emitted when picker value changes; Only applicable for `type="picker"` and `type="inline-picker"`
`@update:show`	`(value: boolean) => void`	Emitted when picker visibility changes
`@update:swatches`	`(value: HLColorPickerSections[]) => void`	Emitted when swatches are updated

Slots

Name	Parameters	Description
trigger	`()`	Custom trigger element. If not provided, defaults to a color swatch with the current value
swatchAddButton	`(sectionKey: string, sectionIndex: number)`	Slot to replace the "Add" button in each section. Will be available only if `showAddButton` is enabled for the corresponding section

Color Picker ​

Basic Usage ​

Empty States ​

More Swatches ​

CRUD Operations on Swatches ​

Default Swatches ​

Tooltip Types ​

Different Swatch Shapes ​

Custom Trigger ​

Custom Add Button Slot ​

Props ​

Types ​

Supported Color Formats ​

Emits ​

Slots ​

Color Picker

Basic Usage

Empty States

More Swatches

CRUD Operations on Swatches

Default Swatches

Tooltip Types

Different Swatch Shapes

Custom Trigger

Custom Add Button Slot

Props

Types

Supported Color Formats

Emits

Slots