ColorSwatch

Usage

<script setup lang="ts">
import { ColorSwatch } from '@hareui/vue'
</script>

<script setup lang="ts">import { ColorSwatch } from '@hareui/vue'</script><template>  <div class="flex items-center gap-3">    <ColorSwatch aria-label="Blue" color="#0485F7" />    <ColorSwatch aria-label="Red" color="#EF4444" />    <ColorSwatch aria-label="Amber" color="#F59E0B" />    <ColorSwatch aria-label="Green" color="#10B981" />    <ColorSwatch aria-label="Fuchsia" color="#D946EF" />  </div></template>

Examples

Sizes

<script setup lang="ts">import { ColorSwatch } from '@hareui/vue'</script><template>  <div class="flex items-center gap-3">    <ColorSwatch color="#0485F7" size="xs" />    <ColorSwatch color="#EF4444" size="sm" />    <ColorSwatch color="#F59E0B" size="md" />    <ColorSwatch color="#10B981" size="lg" />    <ColorSwatch color="#D946EF" size="xl" />  </div></template>

Shapes

<script setup lang="ts">import { ColorSwatch } from '@hareui/vue'</script><template>  <div class="flex items-center gap-3">    <ColorSwatch color="#0485F7" shape="circle" />    <ColorSwatch color="#0485F7" shape="square" />  </div></template>

Transparency

<script setup lang="ts">import { ColorSwatch } from '@hareui/vue'</script><template>  <div class="flex items-center gap-3">    <ColorSwatch aria-label="100% opacity" color="rgba(4, 133, 247, 1)" />    <ColorSwatch aria-label="75% opacity" color="rgba(4, 133, 247, 0.75)" />    <ColorSwatch aria-label="50% opacity" color="rgba(4, 133, 247, 0.5)" />    <ColorSwatch aria-label="25% opacity" color="rgba(4, 133, 247, 0.25)" />    <ColorSwatch aria-label="0% opacity" color="rgba(4, 133, 247, 0)" />  </div></template>

Render Function

The default slot gives you the resolved color (as a CSS string) and its alpha channel to build custom visual effects.

<script setup lang="ts">import { ColorSwatch } from '@hareui/vue'const colors = ['#0485F7', '#EF4444', '#F59E0B', '#10B981', '#D946EF']</script><template>  <div class="flex items-center gap-3">    <ColorSwatch v-for="color in colors" :key="color" :color="color" :style="{ boxShadow: `0 0 20px 2px ${color}` }" />  </div></template>

Accessibility

Use colorName to provide a custom accessible name for the color, and aria-label to add context about how the color is used.

<script setup lang="ts">import { ColorSwatch } from '@hareui/vue'</script><template>  <div class="flex items-center gap-3">    <ColorSwatch aria-label="Primary brand color" color="#0485F7" color-name="Ocean Blue" />    <ColorSwatch aria-label="Error state color" color="#EF4444" color-name="Coral Red" />    <ColorSwatch aria-label="Warning color" color="#F59E0B" color-name="Sunset Orange" />  </div></template>

Customization

Tailwind CSS

Glow Effect

Gradient

<script setup lang="ts">import { ColorSwatch } from '@hareui/vue'const colors = ['#0485F7', '#EF4444', '#F59E0B', '#10B981', '#D946EF']</script><template>  <div class="flex flex-col gap-8">    <div class="flex flex-col gap-2">      <span class="text-sm text-muted">Glow Effect</span>      <div class="flex items-center gap-4">        <ColorSwatch v-for="color in colors" :key="color" :color="color" size="xl" :style="{ boxShadow: `0 0 20px 2px ${color}` }" />      </div>    </div>    <div class="flex flex-col gap-2">      <span class="text-sm text-muted">Gradient</span>      <div class="flex items-center gap-4">        <ColorSwatch v-for="color in colors" :key="`grad-${color}`" :color="color" size="xl">          <template #default="{ color: c }">            <div :style="{ background: `linear-gradient(135deg, ${c}, white)` }" class="size-full rounded-[inherit]" />          </template>        </ColorSwatch>      </div>    </div>  </div></template>

Global CSS

To customize the ColorSwatch component classes app-wide, override the colorSwatch theme with createHareUI:

app.use(createHareUI({
  ui: {
    colorSwatch: {
      slots: {
        base: 'border-2 border-white',
      },
    },
  },
}))

Styling Reference

Each rendered element carries the same data-slot string as HeroUI, so selectors translate 1:1.

`ui` key	`data-slot`	Description
`base`	`color-swatch`	Base swatch styles with checkered background for transparency

API Reference

Props

Prop	Type	Default	Description
`color`	`string \| Color`	-	The color to display, as a hex/CSS color string or a `Color` object. When omitted and used inside a `ColorPicker`, falls back to its current color.
`colorName`	`string`	-	Accessible name for the color, overriding the automatically derived color name.
`shape`	`"circle" \| "square"`	`'circle'`	Shape of the swatch.
`size`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`	`'md'`	Size of the swatch.
`ui`	`ComponentSlots<{ slots: { base: string[]; }; variants: { shape: { circle: string; square: string; }; size: { xs: string; sm: string; md: string; lg: string; xl: string; }; }; compoundVariants: { shape: string; size: string; class: { base: string; }; }[]; defaultVariants: { shape: string; size: string; }; }>`	-	Per-slot class overrides.

Slots

Slot	Props	Description
`default`	`{ color: string; alpha: number; }`	Replaces the swatch content. Receives the resolved color as a CSS string and its alpha channel (0–1).

ColorSwatchPicker

On this page