Brand colour picker on react-colorful: saturation area, hue slider, swatches and a hex field that expands shorthand ("1ba" → #11bbaa) and ignores invalid input. Opens from a Field. Part of the Layro System: layro.vercel.app.
import * as React from "react";
import { ColorPicker, Field } from "@/components/ui/color-picker-hex-swatches";
/* Brand settings. Drag in the square, pick a swatch, or type a hex: "1ba"
expands to #11bbaa, a pasted "#" is ignored, and an invalid value never
reaches your state. The preview uses the colour as you change it and
picks black or white text for contrast. */
function readable(hex: string) {
const n = parseInt(hex.slice(1), 16);
const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => {
const c = v / 255;
return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
});
const L = 0.2126 * r + 0.7152 * g + 0.0722 * b;
/* whichever of white and near-black reads better on it */
return 1.05 / (L + 0.05) >= (L + 0.05) / 0.0556 ? "#ffffff" : "#111111";
}
export default function ColorPickerDemo() {
const [brand, setBrand] = React.useState("#2563eb");
const ink = readable(brand);
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full max-w-[420px] min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-5 ring-1 ring-border sm:p-6">
<h2 className="text-[16px] font-semibold tracking-[-0.01em]">Workspace branding</h2>
<p className="mt-1 text-[13px] text-muted-foreground">Used on signing pages and emails your clients see.</p>
<div className="mt-5">
<Field label="Brand colour" hint="Hex, or pick a swatch">
<ColorPicker value={brand} onValueChange={setBrand} swatches={["#2563eb", "#1baf7a", "#eb6834", "#e87ba4", "#7c3aed", "#171717"]} />
</Field>
</div>
<div className="mt-5 overflow-hidden rounded-[14px] [corner-shape:squircle] ring-1 ring-border">
<div className="px-4 py-3 text-[13px] font-semibold" style={{ background: brand, color: ink }}>
Northwind Studio
</div>
<div className="grid gap-3 p-4">
<p className="text-[13px] text-muted-foreground">Daniel, the master services agreement is ready for your signature.</p>
<span className="inline-flex h-9 w-fit items-center rounded-[10px] [corner-shape:squircle] px-3.5 text-[13px] font-medium" style={{ background: brand, color: ink }}>
Review and sign
</span>
</div>
</div>
</div>
</div>
);
}
Part of Layro System — browse the full library on 21st.dev.