Color Area

A 2D draggable color picker surface for adjusting saturation and brightness (or similar color channel pairs) with an accessible thumb handle.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Color Area to your project and fits it to your theme.

import { ColorArea } from "@/components/ui/color-area";

export default function ColorAreaDemo() {
  return (
    <div className="flex items-center justify-center p-10">
      <ColorArea defaultValue="hsb(219, 58%, 93%)" />
    </div>
  );
}