{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "colour-field", "type": "registry:component", "title": "Colour Field", "description": "An OKLCH colour picker that shows you the real shape of sRGB for each hue, tells you how the colour reads on white and black, and copies it as OKLCH or hex.", "categories": [ "component", "Forms" ], "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "utils", "https://coss.com/ui/r/button.json" ], "files": [ { "path": "registry/devl/colour-field.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport { CheckIcon, CopyIcon, TriangleAlertIcon } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport {\n type KeyboardEvent,\n type PointerEvent,\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface Oklch {\n l: number;\n c: number;\n h: number;\n}\n\nconst MAX_C = 0.37;\n\nfunction oklchToLinear({ l, c, h }: Oklch): [number, number, number] {\n const a = c * Math.cos((h * Math.PI) / 180);\n const b = c * Math.sin((h * Math.PI) / 180);\n const lc = l + 0.3963377774 * a + 0.2158037573 * b;\n const mc = l - 0.1055613458 * a - 0.0638541728 * b;\n const sc = l - 0.0894841775 * a - 1.291485548 * b;\n // NaN, not a clamp: the matrix would fold negative cone responses into a fake in-gamut patch near black.\n if (lc < 0 || mc < 0 || sc < 0) return [Number.NaN, Number.NaN, Number.NaN];\n const l_ = lc ** 3;\n const m_ = mc ** 3;\n const s_ = sc ** 3;\n return [\n 4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,\n -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,\n -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_,\n ];\n}\n\nconst encode = (x: number) => (x <= 0.0031308 ? 12.92 * x : 1.055 * x ** (1 / 2.4) - 0.055);\nconst decode = (x: number) => (x <= 0.04045 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4);\nconst inGamut = (rgb: number[]) => rgb.every((v) => v >= -0.00002 && v <= 1.00002);\n\nfunction toGamut(colour: Oklch): Oklch {\n if (inGamut(oklchToLinear(colour))) return colour;\n let lo = 0;\n let hi = colour.c;\n for (let i = 0; i < 18; i++) {\n const mid = (lo + hi) / 2;\n if (inGamut(oklchToLinear({ ...colour, c: mid }))) lo = mid;\n else hi = mid;\n }\n return { ...colour, c: lo };\n}\n\nfunction toHex(colour: Oklch) {\n const rgb = oklchToLinear(toGamut(colour)).map((v) => Math.round(Math.min(Math.max(encode(v), 0), 1) * 255));\n return `#${rgb.map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")}`.toUpperCase();\n}\n\nfunction fromHex(hex: string): Oklch | null {\n const m = hex.trim().replace(/^#/, \"\");\n const full = m.length === 3 ? [...m].map((ch) => ch + ch).join(\"\") : m;\n if (!/^[0-9a-f]{6}$/i.test(full)) return null;\n const [r, g, b] = [0, 2, 4].map((i) => decode(Number.parseInt(full.slice(i, i + 2), 16) / 255));\n const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);\n const mm = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);\n const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);\n const L = 0.2104542553 * l + 0.793617785 * mm - 0.0040720468 * s;\n const A = 1.9779984951 * l - 2.428592205 * mm + 0.4505937099 * s;\n const B = 0.0259040371 * l + 0.7827717662 * mm - 0.808675766 * s;\n const c = Math.sqrt(A * A + B * B);\n const h = c < 0.0001 ? 0 : ((Math.atan2(B, A) * 180) / Math.PI + 360) % 360;\n return { l: L, c, h };\n}\n\nfunction parse(text: string): Oklch | null {\n const m = text.trim().match(/^oklch\\(\\s*([\\d.]+)(%?)\\s+([\\d.]+)\\s+([\\d.]+)(?:deg)?\\s*(?:\\/\\s*[\\d.%]+\\s*)?\\)$/i);\n if (m) {\n const l = Number(m[1]) / (m[2] ? 100 : 1);\n return { l: clamp(l, 0, 1), c: clamp(Number(m[3]), 0, MAX_C), h: Number(m[4]) % 360 };\n }\n return fromHex(text);\n}\n\nfunction luminance(colour: Oklch) {\n const [r, g, b] = oklchToLinear(toGamut(colour)).map((v) => clamp(v, 0, 1));\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\nconst clamp = (v: number, lo: number, hi: number) => Math.min(Math.max(v, lo), hi);\nconst css = ({ l, c, h }: Oklch) => `oklch(${(l * 100).toFixed(1)}% ${c.toFixed(3)} ${h.toFixed(1)})`;\nconst grade = (ratio: number) => (ratio >= 7 ? \"AAA\" : ratio >= 4.5 ? \"AA\" : ratio >= 3 ? \"AA Large\" : \"Fail\");\n\nexport interface ColourFieldProps {\n value?: Oklch;\n defaultValue?: Oklch;\n onValueChange?: (colour: Oklch) => void;\n label?: string;\n className?: string;\n}\n\nexport function ColourField({\n value: valueProp,\n defaultValue = { l: 0.62, c: 0.19, h: 259 },\n onValueChange,\n label = \"Colour\",\n className,\n}: ColourFieldProps) {\n const [inner, setInner] = useState(defaultValue);\n const colour = valueProp ?? inner;\n const [draft, setDraft] = useState(null);\n const [copied, setCopied] = useState<\"oklch\" | \"hex\" | null>(null);\n const planeRef = useRef(null);\n const canvasRef = useRef(null);\n const [size, setSize] = useState({ w: 0, h: 0 });\n const reduce = useReducedMotion();\n const id = useId();\n\n const set = useCallback(\n (next: Oklch) => {\n if (valueProp === undefined) setInner(next);\n onValueChange?.(next);\n },\n [valueProp, onValueChange],\n );\n\n useLayoutEffect(() => {\n const el = planeRef.current;\n if (!el) return;\n const measure = () => setSize({ w: el.offsetWidth, h: el.offsetHeight });\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas || !size.w) return;\n const frame = requestAnimationFrame(() => {\n const dpr = Math.min(window.devicePixelRatio || 1, 2);\n const w = Math.round(size.w * dpr);\n const h = Math.round(size.h * dpr);\n canvas.width = w;\n canvas.height = h;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n const image = ctx.createImageData(w, h);\n const data = image.data;\n for (let y = 0; y < h; y++) {\n const l = 1 - y / (h - 1);\n for (let x = 0; x < w; x++) {\n const rgb = oklchToLinear({ l, c: (x / (w - 1)) * MAX_C, h: colour.h });\n if (!inGamut(rgb)) continue;\n const i = (y * w + x) * 4;\n data[i] = encode(clamp(rgb[0], 0, 1)) * 255;\n data[i + 1] = encode(clamp(rgb[1], 0, 1)) * 255;\n data[i + 2] = encode(clamp(rgb[2], 0, 1)) * 255;\n data[i + 3] = 255;\n }\n }\n ctx.putImageData(image, 0, 0);\n });\n return () => cancelAnimationFrame(frame);\n }, [colour.h, size.w, size.h]);\n\n useEffect(() => {\n if (!copied) return;\n const t = window.setTimeout(() => setCopied(null), 1400);\n return () => window.clearTimeout(t);\n }, [copied]);\n\n const pick = (event: PointerEvent) => {\n const rect = event.currentTarget.getBoundingClientRect();\n const x = clamp((event.clientX - rect.left) / rect.width, 0, 1);\n const y = clamp((event.clientY - rect.top) / rect.height, 0, 1);\n set({ ...colour, l: 1 - y, c: x * MAX_C });\n };\n\n const onPlaneKey = (event: KeyboardEvent) => {\n const big = event.shiftKey ? 5 : 1;\n const moves: Record = {\n ArrowLeft: [-0.005, 0],\n ArrowRight: [0.005, 0],\n ArrowUp: [0, 0.01],\n ArrowDown: [0, -0.01],\n };\n const move = moves[event.key];\n if (!move) return;\n event.preventDefault();\n set({ ...colour, c: clamp(colour.c + move[0] * big, 0, MAX_C), l: clamp(colour.l + move[1] * big, 0, 1) });\n };\n\n const copy = async (kind: \"oklch\" | \"hex\") => {\n try {\n await navigator.clipboard.writeText(kind === \"hex\" ? toHex(colour) : css(colour));\n } catch {\n }\n setCopied(kind);\n };\n\n const shown = toGamut(colour);\n const invalid = draft !== null && draft.trim() !== \"\" && !parse(draft);\n const outside = shown.c < colour.c - 0.0005;\n const lum = luminance(colour);\n const onWhite = 1.05 / (lum + 0.05);\n const onBlack = (lum + 0.05) / 0.05;\n const hueStops = Array.from({ length: 13 }, (_, i) => `oklch(0.72 0.14 ${i * 30})`).join(\", \");\n\n return (\n
\n
\n \n {label}\n \n {toHex(colour)}\n
\n\n {\n event.currentTarget.setPointerCapture(event.pointerId);\n pick(event);\n }}\n onPointerMove={(event) => {\n if (event.currentTarget.hasPointerCapture(event.pointerId)) pick(event);\n }}\n ref={planeRef}\n role=\"slider\"\n tabIndex={0}\n >\n \n \n Outside sRGB\n \n \n
\n\n
\n
\n set({ ...colour, h: Number(event.target.value) })}\n step={1}\n type=\"range\"\n value={Math.round(colour.h)}\n />\n \n
\n\n
\n \n \n {\n const parsed = draft !== null ? parse(draft) : null;\n if (parsed) set(parsed);\n setDraft(null);\n }}\n onChange={(event) => setDraft(event.target.value)}\n onKeyDown={(event) => {\n if (event.key === \"Enter\") event.currentTarget.blur();\n if (event.key === \"Escape\") {\n setDraft(null);\n event.currentTarget.blur();\n }\n }}\n spellCheck={false}\n value={draft ?? css(colour)}\n />\n
\n\n
\n \n \n
\n\n
\n {invalid ? (\n Try a hex like #3B82F6 or oklch(62% 0.19 259).\n ) : outside ? (\n <>\n \n Outside sRGB, so hex uses the nearest match.\n \n ) : (\n Arrow keys nudge it. Paste a hex to start from one.\n )}\n
\n\n
\n {([\"oklch\", \"hex\"] as const).map((kind) => (\n \n ))}\n
\n
\n );\n}\n\nfunction Contrast({ background, colour, ratio }: { background: \"white\" | \"black\"; colour: string; ratio: number }) {\n const g = grade(ratio);\n return (\n \n \n \n Contrast on {background}\n \n \n \n {ratio.toFixed(2)}:1\n \n \n {g === \"Fail\" ? \"Fails\" : g}\n \n \n \n );\n}\n" } ] }