inputs
Colour picker with an HSB area
The saturation and brightness square is not drawn pixel by pixel: it is one background colour (the pure hue) under two gradients, white left to right and black bottom to top. The opacity checkerboard comes from a single repeating-conic-gradient tiled every 8px.
See it live and copy its promptWhat you can adjust
- Card color
- Border color
- Text color
- Start color
- Card width
- Viewport height
- Thumb size
How this catalog works
Every component ships with its reproduction prompt: the text you paste into an AI builder to get exactly this piece. The values above are editable, and the prompt you copy carries the ones you chose, so what gets generated is what you were looking at.
