ColorSwatch

Import

import { ColorSwatch } from '@blakeui/react';

Usage

import {ColorSwatch} from "@blakeui/react";

export function ColorSwatchBasic() {
  return (
    <div className="flex items-center gap-3">

Sizes

import {ColorSwatch} from "@blakeui/react";

export function ColorSwatchSizes() {
  return (
    <div className="flex items-center gap-3">

Shapes

import {ColorSwatch} from "@blakeui/react";

export function ColorSwatchShapes() {
  return (
    <div className="flex items-center gap-3">
      <ColorSwatch color="#0485F7" shape="circle" />
      <ColorSwatch color="#0485F7" shape="square" />
    </div>
  );
}

Transparency

import {ColorSwatch} from "@blakeui/react";

export function ColorSwatchTransparency() {
  return (
    <div className="flex items-center gap-3">

Custom Styles with Render Props

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

"use client";

import {ColorSwatch} from "@blakeui/react";

export function ColorSwatchCustomStyles() {

Accessibility

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

import {ColorSwatch} from "@blakeui/react";

export function ColorSwatchAccessibility() {
  return (
    <div className="flex items-center gap-3">

Custom Render Function

"use client";

import {ColorSwatch} from "@blakeui/react";

export function CustomRenderFunction() {

Styling

Passing Tailwind CSS classes

import {ColorSwatch} from '@blakeui/react';

function CustomColorSwatch() {
  return (
    <ColorSwatch
      className="size-12 rounded-lg"
      color="#0485F7"
    />
  );
}

Customizing the component classes

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

A worked example is in Styling.

blakeUI 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

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

Shape Classes

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

Size Classes

• .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 Props

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