Color Swatch

Color sample square with label — useful for token docs.

Components

Color Swatch

content

static

<arc-color-swatch>

Overview

ColorSwatch renders a color sample square with a label underneath, making it the go-to component for design token documentation, palette displays, and theme previews. The color is set via the `color` property and applied directly as a `background-color` inline style, so it accepts any valid CSS color value — hex, rgb, hsl, or named colors. The label defaults to displaying the color value itself when no explicit label is provided, which is convenient for token reference tables. The label is rendered in monospace (`--font-mono`) at 11px with text overflow ellipsis, keeping the layout tidy even with long color names or values. The swatch box includes a subtle border and a hover effect that brightens the border and adds a blue glow shadow. Three size presets (`sm`, `md`, `lg`) control the swatch dimensions: 32px, 48px, and 64px respectively. The border radius also scales with size — `--radius-sm` for small, `--radius-md` for medium, and `--radius-lg` for large — maintaining visual consistency at each scale. The color box includes `role="img"` with an `aria-label` for accessibility.

Guidelines

When to use

Use in a flex or grid row to display a palette of related colors
Provide a human-readable label for design token documentation (e.g. "Primary Blue")
Use the lg size for hero palette displays and sm for inline token tables
Group swatches by category — accent colors, neutrals, semantic colors
Use hex values for consistency in token reference docs

When not to use

Do not use color swatches for interactive color picking — this is a display-only component
Do not set transparent or semi-transparent colors without a visible background behind the swatch
Do not mix different swatch sizes in the same row — keep sizes consistent within a group
Do not use very long labels that will be truncated — keep labels under 10 characters
Do not rely solely on color to convey meaning — always pair with a label

Features

Accepts any CSS color value (hex, rgb, hsl, named) via the color property
Auto-displays the color value as the label when no explicit label is set
Three size presets: sm (32px), md (48px), lg (64px) with matching border radii
Hover effect with border brightening and blue glow shadow
Monospace label with text-overflow ellipsis for long values
`role="img"` with `aria-label` for screen reader accessibility
CSS parts (swatch, color, label) for external styling

Preview

Usage

<arc-color-swatch color="#4d7ef7" label="Primary"></arc-color-swatch>
<arc-color-swatch color="#8b5cf6" label="Violet"></arc-color-swatch>

import { ColorSwatch } from '@arclux/arc-ui-react';

export default function Example() {
  return (
    <>
      <ColorSwatch color="#4d7ef7" label="Primary" />
      <ColorSwatch color="#8b5cf6" label="Violet" />
    </>
  );
}

<script setup>
import { ColorSwatch } from '@arclux/arc-ui-vue';
</script>

<template>
  <ColorSwatch color="#4d7ef7" label="Primary" />
  <ColorSwatch color="#8b5cf6" label="Violet" />
</template>

<script>
  import { ColorSwatch } from '@arclux/arc-ui-svelte';
</script>

<ColorSwatch color="#4d7ef7" label="Primary" />
<ColorSwatch color="#8b5cf6" label="Violet" />

import { Component } from '@angular/core';
import { ColorSwatch } from '@arclux/arc-ui-angular';

@Component({
  imports: [ColorSwatch],
  template: `
    <arc-color-swatch color="#4d7ef7" label="Primary"></arc-color-swatch>
    <arc-color-swatch color="#8b5cf6" label="Violet"></arc-color-swatch>
  `,
})
export class MyComponent {}

import { ColorSwatch } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <>
      <ColorSwatch color="#4d7ef7" label="Primary" />
      <ColorSwatch color="#8b5cf6" label="Violet" />
    </>
  );
}

import { ColorSwatch } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <>
      <ColorSwatch color="#4d7ef7" label="Primary" />
      <ColorSwatch color="#8b5cf6" label="Violet" />
    </>
  );
}

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-color-swatch — requires color-swatch.css + base.css (or arc-ui.css) -->
<span class="arc-color-swatch">
  <div class="swatch">
   <div
   class="swatch__color"
   style="background-color:Color"
   role="img"
   ></div>
   <span class="swatch__label"></span>
   </div>
</span>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-color-swatch — self-contained, no external CSS needed -->
<style>
  .arc-color-swatch .swatch__color:hover { border-color: rgb(51, 51, 64);
        box-shadow: 0 0 12px rgba(77, 126, 247, 0.1); }
</style>
<span class="arc-color-swatch" style="display: inline-flex">
  <div class="swatch" style="display: flex; flex-direction: column; align-items: center; gap: 8px">
   <div
   class="swatch__color" style="border-radius: 10px; border: 1px solid rgb(34, 34, 41)"
   style="background-color:Color"
   role="img"
   ></div>
   <span style="font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgb(124, 124, 137); text-align: center; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"></span>
   </div>
</span>

API

color string ='#4d7ef7': Any valid CSS color value applied as the swatch background
label string ='': Display label below the swatch; falls back to the color value if empty
size 'sm' | 'md' | 'lg' ='md': Controls swatch dimensions: sm (32px), md (48px), lg (64px)

Color Swatch

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

Docs

Project

Arclight