Reka UI logoReka
backdrop
Examples
Components

Color Swatch

Alpha
Displays a color swatch, which can be used to represent colors in a UI.

Features

  • Supports custom colors
  • Provides an accessible label for screen readers
  • Provides a color contrast for better visibility

Installation

Install the component from your command line.

sh
$ npm add reka-ui
tip

Looking for a complete color picker? Check out the Color Picker example that combines Color Area, Color Slider, Color Field, and Color Swatch components.

Anatomy

Import all parts and piece them together.

vue
<script setup>
import {
  ColorSwatch,
} from 'reka-ui'
</script>

<template>
  <ColorSwatch color="#ff0000" />
</template>

API Reference

ColorSwatch

The main component that displays a color swatch.

PropDefaultType
as
'div'
AsTag | Component

The element or component this component should render as. Can be overwritten by asChild.

asChild
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read our Composition guide for more details.

color
''
string | Color

The color to display in the swatch as a hex string or Color object. Example: #16a372, #ff5733, or { space: 'hsl', h: 120, s: 100, l: 50, alpha: 1 }.

label
string

Optional accessible label for the color. If omitted, the color name will be derived from the color value.

Slots (default)Payload
color
string
alpha
number