A draggable 2D color plane for picking two channels at once (like saturation and brightness), with keyboard, RTL and form support.
import { ColorArea } from "@/components/ui/color-area";
const PLANES = [
{ space: "rgb", xChannel: "red", yChannel: "green", label: "RGB" },
{ space: "hsl", xChannel: "saturation", yChannel: "lightness", label: "HSL" },
{
space: "hsb",
xChannel: "saturation",
yChannel: "brightness",
label: "HSB",
},
] as const;
export default function ColorAreaSpaces() {
return (
<div className="grid grid-cols-3 gap-6">
{PLANES.map(({ space, xChannel, yChannel, label }) => (
<div key={space} className="flex flex-col items-center gap-2">
<ColorArea
defaultValue="#3b82f6"
colorSpace={space}
xChannel={xChannel}
yChannel={yChannel}
aria-label={`${label} color area`}
className="size-32"
/>
<span className="text-foreground-muted text-xs font-medium">
{label}
</span>
</div>
))}
</div>
);
}
