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
Wave Mesh
83
Route Globe
79
Glass Tiles
68
Glyph Swell
28
Orbit Ring Stats
26
Ask Bar
25
Wind Map
18
Glass Carousel
18