Palette Studio
Generate harmonious palettes in OKLCH, lock favourites, copy HEX, and see WCAG contrast live.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Hover the studio and press Space to roll a new palette (analogous, triadic or split-complementary in perceptual OKLCH space). Lock swatches you like, click to copy, and every swatch shows its best text contrast and AA/AAA rating.
Installation
$ npx shadcn@latest add https://guetix.com/r/palette-studio.json
Uses the shadcn CLI. It creates components/guetix/palette-studio.tsx and installs nothing else.
Usage
example.tsx
import { PaletteStudio } from "@/components/guetix/palette-studio";
export default function Example() {
return <PaletteStudio />;
}
Design toolsBrand pagesPortfolio playground
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01A full OKLCH→sRGB conversion inline, so lightness steps look even to the eye.
- 02Space only works while hovered, so it never hijacks page scrolling.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 5 | Swatches (3–7). |
| initial | string[] | — | Starting HEX colors. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Every swatch has labelled copy and lock buttons with aria-pressed.