Color Picker

Component 62

About

A color picker popover with a saturation canvas, hue and alpha sliders, a screen eyedropper and HEX, RGB and HSL inputs. Great for theme editors and design tools.

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

Code

How Color Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { ColorPickerPanel } from "@/components/ui/color-picker";

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

const primitivePreviewCardSurfaceFrameClass = cn(
  "relative isolate overflow-hidden rounded-2xl",
  "border",
);

const primitivePreviewCardSurfaceLightClass = cn(
  "border-black/[0.08] bg-[#f4f4f5]",
  "[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);

const primitivePreviewCardSurfaceClass = cn(
  primitivePreviewCardSurfaceFrameClass,
  primitivePreviewCardSurfaceLightClass,
  // Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
  // PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
  "dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);

function Panel({
  title,
  subtitle,
  children,
  className,
}: {
  title: string;
  subtitle?: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        primitivePreviewCardSurfaceClass,
        "w-full max-w-sm p-4 sm:p-5",
        className,
      )}
    >
      <p className="mb-1 text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
        {title}
      </p>
      {subtitle ? (
        <p className="mb-4 text-[11px] text-[var(--muted-foreground)]">{subtitle}</p>
      ) : (
        <div className="mb-4" />
      )}
      {children}
    </div>
  );
}

export function ColorPickerPreview() {
  const [color, setColor] = React.useState("#1d6fe8");

  return (
    <Panel title="Color picker" subtitle="Drag the canvas, or type a value.">
      <div className="flex justify-center">
        <ColorPickerPanel value={color} onChange={setColor} />
      </div>
    </Panel>
  );
}

export default function Demo() {
  return <ColorPickerPreview />;
}