Skip to content
Lenso UI

ColorSwatch

A visual preview of a color value with accessibility support

Usage

import { ColorSwatch } from '@lenso/ui';
"use client";
import { ColorSwatch } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";
const styles = stylex.create({ row: { display: "flex", alignItems: "center", gap: 12 } });export function ColorSwatchBasic() {  return (    <div {...stylex.props(styles.row)}>      <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>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Examples

Sizes

"use client";/** Adapted from HeroUI v3.2.6. Apache-2.0. */import { ColorSwatch } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { styles } from "../color-picker/source.stylex";export function ColorSwatchSizes() {  return (    <div {...stylex.props(styles.row)}>      <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>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Shapes

"use client";/** Adapted from HeroUI v3.2.6. Apache-2.0. */import { ColorSwatch } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { styles } from "../color-picker/source.stylex";export function ColorSwatchShapes() {  return (    <div {...stylex.props(styles.row)}>      <ColorSwatch color="#0485F7" shape="circle" />      <ColorSwatch color="#0485F7" shape="square" />    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Transparency

"use client";/** Adapted from HeroUI v3.2.6. Apache-2.0. */import { ColorSwatch } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { styles } from "../color-picker/source.stylex";export function ColorSwatchTransparency() {  return (    <div {...stylex.props(styles.row)}>      {[1, 0.75, 0.5, 0.25, 0].map((alpha) => (        <ColorSwatch          key={alpha}          aria-label={`${alpha * 100}% opacity`}          color={`rgba(4, 133, 247, ${alpha})`}        />      ))}    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Render Function

You can use the style render props to access the color value and create custom visual effects.

"use client";/** Adapted from HeroUI v3.2.6. Apache-2.0. Native RAC style render state replaces DOM render interception. */import { ColorSwatch } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { styles } from "../color-picker/source.stylex";const colors = [  ["Blue", "#0485F7"],  ["Red", "#EF4444"],  ["Amber", "#F59E0B"],  ["Green", "#10B981"],  ["Fuchsia", "#D946EF"],] as const;export function RenderFunction() {  return (    <div {...stylex.props(styles.row)}>      {colors.map(([name, color]) => (        <ColorSwatch          key={name}          aria-label={name}          color={color}          data-custom={name.toLowerCase()}          style={({ color: c }) => ({ outlineColor: c.toString("css") })}        />      ))}    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Accessibility

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

"use client";/** Adapted from HeroUI v3.2.6. Apache-2.0. */import { ColorSwatch } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { styles } from "../color-picker/source.stylex";export function ColorSwatchAccessibility() {  return (    <div {...stylex.props(styles.row)}>      <ColorSwatch aria-label="Primary brand color" color="#0485F7" colorName="Ocean Blue" />      <ColorSwatch aria-label="Error state color" color="#EF4444" colorName="Coral Red" />      <ColorSwatch aria-label="Warning color" color="#F59E0B" colorName="Sunset Orange" />    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

"use client";/** Adapted from HeroUI v3.2.6. Apache-2.0. */import { ColorSwatch } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { styles } from "../color-picker/source.stylex";const colors = ["#0485F7", "#EF4444", "#F59E0B", "#10B981", "#D946EF"];export function ColorSwatchCustomStyles() {  return (    <div {...stylex.props(styles.column8)}>      <div {...stylex.props(styles.column2)}>        <span {...stylex.props(styles.muted)}>Glow Effect</span>        <div {...stylex.props(styles.row4)}>          {colors.map((color) => (            <ColorSwatch              key={color}              color={color}              size="xl"              style={() => ({ boxShadow: `0 0 20px 2px ${color}` })}            />          ))}        </div>      </div>      <div {...stylex.props(styles.column2)}>        <span {...stylex.props(styles.muted)}>Gradient</span>        <div {...stylex.props(styles.row4)}>          {colors.map((color) => (            <ColorSwatch              key={color}              color={color}              size="xl"              style={({ color: c }) => ({                background: `linear-gradient(135deg, ${c.toString("css")}, white)`,              })}            />          ))}        </div>      </div>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the ColorSwatch component classes, you can use the @layer components directive. Learn more.

@layer components {  .color-swatch {    @apply border-2 border-white;  }}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ColorSwatch component uses these CSS classes (View source styles):

Base Classes [!toc]

  • .color-swatch - Base swatch styles with checkered background for transparency

Shape Classes [!toc]

  • .color-swatch--circle - Circular shape (default)
  • .color-swatch--square - Square shape with rounded corners

Size Classes [!toc]

  • .color-swatch--xs - Extra small (16px)
  • .color-swatch--sm - Small (24px)
  • .color-swatch--md - Medium (32px, default)
  • .color-swatch--lg - Large (36px)
  • .color-swatch--xl - Extra large (40px)

API Reference

ColorSwatch

PropTypeDefaultDescription
colorstring | Color-The color value to display (hex, rgb, hsl, etc.)
colorNamestring-Accessible name for the color (overrides auto-generated description)
classNamestring-Additional CSS classes
shape"circle" | "square""circle"Shape of the swatch
size"xs" | "sm" | "md" | "lg" | "xl""md"Size of the swatch
styleCSSProperties | ((renderProps) => CSSProperties)-Inline styles or render props function with access to color
aria-labelstring-Accessible label for the swatch
renderDOMRenderFunction<keyof React.JSX.IntrinsicElements, ColorSwatchRenderProps>-Overrides the default DOM element with a custom render function.

Style Render Props

When using the style prop as a function, you receive render props with access to the color:

<ColorSwatch  color="#0485F7"  style={({ color }) => ({    boxShadow: `0 4px 14px ${color.toString("css")}80`,  })}/>

The color object provides methods like:

  • color.toString("css") - Returns CSS color string
  • color.toString("hex") - Returns hex color string
  • color.getChannelValue("alpha") - Returns alpha channel value
ColorSwatchPicker

A list of color swatches that allows users to select a color from a predefined palette.

ColorField

Color input field with labels, descriptions, and validation built on React Aria ColorField

ColorArea

A 2D color picker that allows users to select colors from a gradient area