Color Preview

Displays the currently selected color value.

Code

Usage

Vue

import { ColorPreview } from '@hueycolor/vue'

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

const color = ref(hueyColor('#1A326380'))
</script>

<template>
  <HueyRoot v-model="color">
    <ColorPreview />
  </HueyRoot>
</template>

Svelte

import { ColorPreview } from '@hueycolor/svelte'

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

let color = $state(hueyColor('#1A326380'))
</script>

<HueyRoot bind:color>
  <ColorPreview />
</HueyRoot>

Props

Prop	Type	Default	Description
splitPreview	boolean	true	Shows a split view of the transparent and opaque color.

Styling

Target with [huey-preview]. Use the data-split-view attribute to style each mode:

• [huey-preview][data-split-view="true"] - split mode
• [huey-preview][data-split-view="false"] - solid mode

Property	Default	Description
--huey-preview-tile-size	20px	Drives both width and height of the preview, plus the size of the transparency checkerboard tiles

The preview’s background color is set dynamically.