About
A color picker in OKLCH space that visually marks where sRGB and Display P3 gamuts end, with live hex and WCAG contrast readouts for the picked color.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Gamut Picker to your project and fits it to your theme.
Code
How Gamut Picker is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { GamutPicker } from "@/components/ui/gamut-picker";
export default function GamutPickerDemo() {
return (
<div
className="flex min-h-full w-full items-center justify-center px-4 py-10"
style={{ background: "#08090b" }}
>
<GamutPicker theme="night" />
</div>
);
}
More by ham7a311
View all
Route Globe
70
Wave Mesh
65
Glass Tiles
56
Glyph Swell
23
Orbit Ring Stats
20
Ask Bar
18
Streak Field Stats
17
Glass Carousel
17