Color Swatch

A clickable color swatch element for selecting preset colors.

Code

Usage

Vue

import { ColorSwatch } from '@hueycolor/vue'

<script setup>
import { ref } from 'vue'
import { HueyRoot, ColorSwatch, hueyColor } from '@hueycolor/vue'

const color = ref(hueyColor('#1A3263'))
const swatch = ['#007680', '#24B2FF', '#FFBA51', '#FFD013', '#F65600']
</script>

<template>
  <HueyRoot v-model="color">
    <ColorSwatch :swatch="swatch" />
  </HueyRoot>
</template>

Svelte

import { ColorSwatch } from '@hueycolor/svelte'

<script>
import { HueyRoot, ColorSwatch, hueyColor } from '@hueycolor/svelte'

let color = $state(hueyColor('#1A3263'))
const swatch = ['#007680', '#24B2FF', '#FFBA51', '#FFD013', '#F65600']
</script>

<HueyRoot bind:color>
  <ColorSwatch {swatch} />
</HueyRoot>

Props

Prop	Type	Default	Description
swatch	string[]	—	Array of hex color values to display as selectable presets.
aria-label	string	'Color swatch'	Accessible label for the swatch group.

Styling

Target the container with [huey-swatch] and individual items with [huey-swatch-color]. Style the currently selected item via [huey-swatch-color][aria-selected="true"].

Property	Default	Description
--huey-swatch-color-size	16px	Size of each swatch item
--huey-swatch-color-radius	4px	Border radius of each swatch item

Each item’s background is driven dynamically by --swatch-color.