ColorSwatch 颜色色块
颜色值的视觉预览，并提供无障碍支持
用法
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.
示例
尺寸
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"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.
形状
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"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.
透明度
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"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.
渲染函数
可使用 style render prop 读取颜色值并创建自定义视觉效果。
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"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.
无障碍
使用 colorName 为颜色提供自定义可访问名称，并使用 aria-label 补充颜色用途的上下文。
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"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.
自定义样式
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.
全局 CSS
可使用 @layer components 指令自定义 ColorSwatch 组件类。
了解更多。
@layer components { .color-swatch { @apply border-2 border-white; }}样式参考
HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。
CSS 类
ColorSwatch 组件使用以下 CSS 类（查看源码样式）：
基础类 [!toc]
.color-swatch- 基础 swatch 样式，透明区域使用棋盘格背景
形状类 [!toc]
.color-swatch--circle- 圆形（默认）.color-swatch--square- 圆角方形
尺寸类 [!toc]
.color-swatch--xs- 特小（16px）.color-swatch--sm- 小（24px）.color-swatch--md- 中（32px，默认）.color-swatch--lg- 大（36px）.color-swatch--xl- 特大（40px）
API 参考
ColorSwatch
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
color | string | Color | - | 要展示的颜色值（hex、rgb、hsl 等） |
colorName | string | - | 颜色的可访问名称（会覆盖自动生成的描述） |
className | string | - | 附加 CSS 类 |
shape | "circle" | "square" | "circle" | swatch 形状 |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | swatch 尺寸 |
style | CSSProperties | ((renderProps) => CSSProperties) | - | 行内样式，或带颜色访问能力的 render prop 函数 |
aria-label | string | - | swatch 的无障碍标签 |
render | DOMRenderFunction<keyof React.JSX.IntrinsicElements, ColorSwatchRenderProps> | - | 使用自定义 render 函数覆盖默认 DOM 元素 |
Style Render
当把 style 作为函数传入时，会获得包含颜色对象在内的 render props：
<ColorSwatch color="#0485F7" style={({ color }) => ({ boxShadow: `0 4px 14px ${color.toString("css")}80`, })}/>color 对象提供例如：
color.toString("css")- 返回 CSS 颜色字符串color.toString("hex")- 返回十六进制颜色字符串color.getChannelValue("alpha")- 返回 alpha 通道数值