patterns / 04Color selection
Explore a solid color with live feedback and an explicit final choice.
Live interface previewSession only Try the controlsUsage
- Preview the draft locally and restore the original on cancellation.
- Keep exact hex entry alongside perceptual controls.
Variants
Swatch choiceHSV explorationExact hexApply/cancel
Preview states
Color previewInvalid hexAppliedCancelled
Integration boundary
- Gradient, opacity and external eyedropper are outside the current solid picker.
- Color uses the real model for palette edits, save/reopen and CSS/JSON export; published source palettes remain read-only.
Source modules 3
conceptualize/components/studio-v2/studio-library-patterns.tsxconceptualize/components/studio-v2/studio-color-picker.tsxshared/lib/color-model.ts