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