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
20
Glass Tiles
15
Wave Mesh
12
Uptime Ribbon
10
Wind Map
8
Glass Carousel
8
Time Window
7
Streak Field Stats
6