A colour picker with a saturation and brightness area, hue and opacity, Hex, RGB, HSL and OKLCH values, swatches, an eyedropper and a contrast check, inline or in a popover.
npx shadcn@latest add @sphere-kit/color-pickerimport { ColorPicker, ColorPickerAlpha, ColorPickerArea, ColorPickerContrast, ColorPickerCopy, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerPopover, ColorPickerPreview, ColorPickerSwatch, ColorPickerSwatches, ColorFormat, ColorPickerProps, ColorPickerPopoverProps, ColorSwatch,} from "@/components/ui/color-picker"Exports ColorPicker ColorPickerAlpha ColorPickerArea ColorPickerContrast ColorPickerCopy ColorPickerEyeDropper ColorPickerFormat ColorPickerHue ColorPickerPopover ColorPickerPreview ColorPickerSwatch ColorPickerSwatches ColorFormat ColorPickerProps ColorPickerPopoverProps ColorSwatch. Every part takes its element's usual props and a className.
Used for buttons and links on every page of this funnel.
Set by your workspace theme. Ask an admin to change it.
“brand blue” isn’t a colour the picker can read. Pick one, or type a hex such as #3B82F6.
Saved before colours were checked. Pick one to replace it.