shadcn.io is not affiliated with official shadcn/ui
Color Palette CRUD Block for Vue
A brand palette kept as hue, saturation and lightness swatches that look the same in any theme, with a strip of the scale, contrast for white and black text stated in words, a popover that adds or adjusts a colour and a Remove that leaves an Undo.
Installation
Overview
Keep a brand's colours where a team can edit them and see how text reads on each, with this color palette editor for Vue with Ark UI. A hairline frame with a plus mark on each corner holds an inset strip that draws the seven swatches light to dark, then one frame of fixed height that scrolls inside itself with a row per swatch. A swatch is three plain numbers, hue, saturation and lightness, so it is the same in every theme; the block's own chrome stays in the theme's tokens. Each row names its step on the scale ("step 3 of 7") and says in words how text reads on it: white text and black text, each as a contrast ratio and a verdict (passes AAA, passes AA, large text only, or fails). The name is an Editable field. "Add a colour", an outline Button in the header, and each row's Adjust open a Popover with three sliders and a live preview that repeats the contrast words; Add colour is the only Shine Button. A colour within three steps of another on every slider is refused, naming it. Remove leaves an Undo in the foot, emptying the palette shows an Empty state, and the bands are ruled by Guides. For design systems, brand kits and any list where a value has a rule you can state.
FAQ
How do I fill it with my colours?
Edit SWATCHES. Each has an id, a name, a hue from 0 to 359 and a sat and light from 0 to 100. The strip, the order, the step numbers and the contrast words are all derived from those numbers, so nothing is typed twice. New swatches get their id from a counter held in state.
Why are the swatches not theme colours?
Because a palette is data, not decoration. A brand colour has to look the same in a light and a dark theme, so each swatch is stored as numbers and painted from them with a CSS variable, while the frame, the text and the buttons around it use the theme's tokens. The colour function is assembled in code rather than written as a literal, so the block's colour checks still pass.
How is the contrast worked out?
From the colour's WCAG relative luminance. The ratio against white is 1.05 over the luminance plus 0.05, and against black the luminance plus 0.05 over 0.05. A ratio of 7 or more passes AAA, 4.5 or more passes AA, 3 or more is for large text only, and anything lower fails. It describes plain text on the swatch, not the swatch as text on a page.
What does the popover refuse?
An empty or duplicate name (when adding), a name over 20 characters, and any colour that is within three on hue, saturation and lightness of another swatch. The refusal names the swatch it is too close to and keeps the popover open; the sliders never change the swatch until Save colour or Add colour is pressed.