"use client"; import * as React from "react"; type ColorSpace = "hsb" | "hsl" | "rgb"; type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"; type ColorValue = { h: number; s: number; b: number; a: number; toString: (format?: "hex" | "css" | "hsl" | "hsb" | "rgb") => string; toFormat: (format: string) => ColorValue; }; function cn(...values: Array) { return values.filter(Boolean).join(" "); } function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } function hsbToRgb(h: number, s: number, b: number) { s /= 100; b /= 100; const k = (n: number) => (n + h / 60) % 6; const f = (n: number) => b * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1))); return { r: Math.round(255 * f(5)), g: Math.round(255 * f(3)), b: Math.round(255 * f(1)) }; } function rgbToHsb(r: number, g: number, b: number) { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const delta = max - min; let h = 0; if (delta) { if (max === r) h = 60 * (((g - b) / delta) % 6); else if (max === g) h = 60 * ((b - r) / delta + 2); else h = 60 * ((r - g) / delta + 4); } return { h: (h + 360) % 360, s: max === 0 ? 0 : (delta / max) * 100, b: max * 100 }; } function hslToHsb(h: number, s: number, l: number) { s /= 100; l /= 100; const bright = l + s * Math.min(l, 1 - l); const sat = bright === 0 ? 0 : 2 * (1 - l / bright); return { h, s: sat * 100, b: bright * 100 }; } function hsbToHsl(color: Pick) { const s = color.s / 100; const b = color.b / 100; const l = b * (1 - s / 2); const sl = l === 0 || l === 1 ? 0 : (b - l) / Math.min(l, 1 - l); return { h: color.h, s: sl * 100, l: l * 100 }; } function makeColor(raw: { h: number; s: number; b: number; a?: number }): ColorValue { const color = { h: ((raw.h % 360) + 360) % 360, s: clamp(raw.s, 0, 100), b: clamp(raw.b, 0, 100), a: clamp(raw.a ?? 1, 0, 1), }; return { ...color, toFormat: () => makeColor(color), toString: (format = "hex") => { const rgb = hsbToRgb(color.h, color.s, color.b); if (format === "rgb") return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`; if (format === "hsl") { const hsl = hsbToHsl(color); return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`; } if (format === "hsb") return `hsb(${Math.round(color.h)}, ${Math.round(color.s)}%, ${Math.round(color.b)}%)`; if (format === "css") return color.a < 1 ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${color.a.toFixed(2)})` : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`; return `#${[rgb.r, rgb.g, rgb.b].map((v) => v.toString(16).padStart(2, "0")).join("")}`.toUpperCase(); }, }; } export function parseColor(input: string | ColorValue): ColorValue { if (typeof input !== "string") return makeColor(input); const value = input.trim(); const hex = value.match(/^#?([a-f\d]{3}|[a-f\d]{6})$/i); if (hex) { const full = hex[1].length === 3 ? hex[1].split("").map((x) => x + x).join("") : hex[1]; return makeColor(rgbToHsb(parseInt(full.slice(0, 2), 16), parseInt(full.slice(2, 4), 16), parseInt(full.slice(4, 6), 16))); } const hsl = value.match(/^hsla?$([\d.]+),\s*([\d.]+)%?,\s*([\d.]+)%?(?:,\s*([\d.]+))?$$/i); if (hsl) return makeColor({ ...hslToHsb(Number(hsl[1]), Number(hsl[2]), Number(hsl[3])), a: hsl[4] ? Number(hsl[4]) : 1 }); const rgb = value.match(/^rgba?$([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?$$/i); if (rgb) return makeColor({ ...rgbToHsb(Number(rgb[1]), Number(rgb[2]), Number(rgb[3])), a: rgb[4] ? Number(rgb[4]) : 1 }); return makeColor({ h: 208, s: 98, b: 97 }); } type PickerContextValue = { color: ColorValue; setColor: (color: ColorValue) => void; open: boolean; setOpen: (open: boolean) => void; }; const PickerContext = React.createContext(null); function usePicker() { const context = React.useContext(PickerContext); if (!context) throw new Error("ColorPicker subcomponents must be used inside ColorPicker"); return context; } function ColorPickerStyles() { return ( ); } function ColorPickerRoot({ children, className, defaultValue = "#0485F7", value, onChange, defaultOpen = false, }: { children: React.ReactNode; className?: string; defaultValue?: string | ColorValue; value?: string | ColorValue; onChange?: (color: ColorValue) => void; defaultOpen?: boolean; }) { const [internalColor, setInternalColor] = React.useState(() => parseColor(defaultValue)); const [open, setOpen] = React.useState(defaultOpen); const color = value === undefined ? internalColor : parseColor(value); const setColor = React.useCallback((next: ColorValue) => { setInternalColor(next); onChange?.(next); }, [onChange]); return (

{children}

); } function ColorPickerTrigger({ children, className, ...props }: React.ButtonHTMLAttributes) { const { open, setOpen } = usePicker(); const [focusVisible, setFocusVisible] = React.useState(false); return ( ); } function ColorPickerPopover({ children, className, ...props }: React.HTMLAttributes) { const { open } = usePicker(); if (!open) return null; return

{children}

; } function channelValue(color: ColorValue, channel: ColorChannel) { const hsl = hsbToHsl(color); const rgb = hsbToRgb(color.h, color.s, color.b); if (channel === "hue") return color.h; if (channel === "saturation") return color.s; if (channel === "brightness") return color.b; if (channel === "lightness") return hsl.l; if (channel === "red") return rgb.r; if (channel === "green") return rgb.g; if (channel === "blue") return rgb.b; return color.a; } function updateChannel(color: ColorValue, channel: ColorChannel, value: number, colorSpace: ColorSpace = "hsb") { if (channel === "hue") return makeColor({ ...color, h: value }); if (channel === "saturation" && colorSpace === "hsl") { const hsl = hsbToHsl(color); return makeColor({ ...hslToHsb(hsl.h, value, hsl.l), a: color.a }); } if (channel === "lightness") { const hsl = hsbToHsl(color); return makeColor({ ...hslToHsb(hsl.h, hsl.s, value), a: color.a }); } if (channel === "brightness") return makeColor({ ...color, b: value }); if (channel === "saturation") return makeColor({ ...color, s: value }); if (channel === "alpha") return makeColor({ ...color, a: value }); const rgb = hsbToRgb(color.h, color.s, color.b); const next = { ...rgb, [channel[0]]: value } as { r: number; g: number; b: number }; return makeColor({ ...rgbToHsb(next.r, next.g, next.b), a: color.a }); } function areaBackground(color: ColorValue) { const hue = `hsl(${color.h} 100% 50%)`; return `linear-gradient(to top, black, transparent), linear-gradient(to right, white, ${hue})`; } function ColorAreaRoot({ children, className, ...props }: React.HTMLAttributes & { colorSpace?: ColorSpace; xChannel?: ColorChannel; yChannel?: ColorChannel }) { const { color, setColor } = usePicker(); const [dragging, setDragging] = React.useState(false); const [focusVisible, setFocusVisible] = React.useState(false); const ref = React.useRef(null); const updateFromPoint = React.useCallback((clientX: number, clientY: number) => { const box = ref.current?.getBoundingClientRect(); if (!box) return; const s = clamp(((clientX - box.left) / box.width) * 100, 0, 100); const b = clamp(100 - ((clientY - box.top) / box.height) * 100, 0, 100); setColor(makeColor({ ...color, s, b })); }, [color, setColor]); return (

{ setDragging(true); (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId); updateFromPoint(event.clientX, event.clientY); }} onPointerMove={(event) => dragging && updateFromPoint(event.clientX, event.clientY)} onPointerUp={() => setDragging(false)} onFocus={() => setFocusVisible(true)} onBlur={() => setFocusVisible(false)} onKeyDown={(event) => { const step = event.shiftKey ? 10 : 1; if (event.key === "ArrowRight") setColor(makeColor({ ...color, s: color.s + step })); if (event.key === "ArrowLeft") setColor(makeColor({ ...color, s: color.s - step })); if (event.key === "ArrowUp") setColor(makeColor({ ...color, b: color.b + step })); if (event.key === "ArrowDown") setColor(makeColor({ ...color, b: color.b - step })); }} > {React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child as React.ReactElement, { dragging, focusVisible }) : child)}

); } function ColorAreaThumb({ dragging, focusVisible }: { dragging?: boolean; focusVisible?: boolean }) { const { color } = usePicker(); return

; } function rangeFor(channel: ColorChannel) { if (channel === "hue") return 360; if (channel === "alpha") return 1; if (["red", "green", "blue"].includes(channel)) return 255; return 100; } function trackBackground(color: ColorValue, channel: ColorChannel) { const h = color.h; if (channel === "hue") return "linear-gradient(to right, rgb(255,0,0), rgb(255,255,0), rgb(0,255,0), rgb(0,255,255), rgb(0,0,255), rgb(255,0,255), rgb(255,0,0))"; if (channel === "alpha") return `linear-gradient(to right, transparent, ${color.toString("css")})`; if (channel === "saturation") return `linear-gradient(to right, hsl(${h} 0% 50%), hsl(${h} 100% 50%))`; if (channel === "lightness") return `linear-gradient(to right, black, hsl(${h} ${Math.round(color.s)}% 50%), white)`; if (channel === "brightness") return `linear-gradient(to right, black, hsl(${h} ${Math.round(color.s)}% 50%))`; return `linear-gradient(to right, rgb(${channel === "red" ? 0 : hsbToRgb(h, color.s, color.b).r}, ${channel === "green" ? 0 : hsbToRgb(h, color.s, color.b).g}, ${channel === "blue" ? 0 : hsbToRgb(h, color.s, color.b).b}), rgb(${channel === "red" ? 255 : hsbToRgb(h, color.s, color.b).r}, ${channel === "green" ? 255 : hsbToRgb(h, color.s, color.b).g}, ${channel === "blue" ? 255 : hsbToRgb(h, color.s, color.b).b}))`; } const SliderContext = React.createContext<{ channel: ColorChannel; colorSpace: ColorSpace; dragging: boolean; setDragging: (value: boolean) => void } | null>(null); function ColorSliderRoot({ children, channel, colorSpace = "hsb", className, ...props }: React.HTMLAttributes & { channel: ColorChannel; colorSpace?: ColorSpace }) { const [dragging, setDragging] = React.useState(false); return

{children}

; } function ColorSliderOutput({ className }: { className?: string }) { const { color } = usePicker(); const ctx = React.useContext(SliderContext)!; const value = channelValue(color, ctx.channel); const suffix = ctx.channel === "hue" ? "°" : ctx.channel === "alpha" ? "%" : "%"; const shown = ctx.channel === "alpha" ? Math.round(value * 100) : Math.round(value); return {shown}{suffix}; } function ColorSliderTrack({ children }: { children: React.ReactNode }) { const { color, setColor } = usePicker(); const ctx = React.useContext(SliderContext)!; const ref = React.useRef(null); const max = rangeFor(ctx.channel); const value = channelValue(color, ctx.channel); const update = React.useCallback((clientX: number) => { const box = ref.current?.getBoundingClientRect(); if (!box) return; const next = clamp(((clientX - box.left) / box.width) * max, 0, max); setColor(updateChannel(color, ctx.channel, next, ctx.colorSpace)); }, [color, ctx.channel, ctx.colorSpace, max, setColor]); return (

{ ctx.setDragging(true); (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId); update(event.clientX); }} onPointerMove={(event) => ctx.dragging && update(event.clientX)} onPointerUp={() => ctx.setDragging(false)} > {children}

); } function ColorSliderThumb() { const { color, setColor } = usePicker(); const ctx = React.useContext(SliderContext)!; const max = rangeFor(ctx.channel); const value = channelValue(color, ctx.channel); return (

{ const step = event.shiftKey ? 10 : ctx.channel === "alpha" ? .05 : 1; if (event.key === "ArrowRight" || event.key === "ArrowUp") setColor(updateChannel(color, ctx.channel, value + step, ctx.colorSpace)); if (event.key === "ArrowLeft" || event.key === "ArrowDown") setColor(updateChannel(color, ctx.channel, value - step, ctx.colorSpace)); }} /> ); } function ColorSwatch({ color, size = "sm", className }: { color?: string | ColorValue; size?: "xs" | "sm" | "lg"; className?: string }) { const picker = React.useContext(PickerContext); const value = color ? parseColor(color) : picker?.color ?? parseColor("#0485F7"); return ; } function Label({ className, ...props }: React.LabelHTMLAttributes) { return ; } function ColorFieldRoot({ children, channel, colorSpace = "hsl", ...props }: React.HTMLAttributes & { channel?: ColorChannel; colorSpace?: ColorSpace }) { return

{children}

; } function ColorFieldGroup({ children, className }: React.HTMLAttributes & { variant?: string }) { return

{children}

; } function ColorFieldInput({ "aria-label": ariaLabel, ...props }: React.InputHTMLAttributes) { const { color, setColor } = usePicker(); const parent = React.useRef(null); const [text, setText] = React.useState(color.toString("hex")); React.useEffect(() => setText(color.toString("hex")), [color.h, color.s, color.b, color.a]); return ( { setText(event.target.value); if (/^#?[a-f\d]{6}$/i.test(event.target.value.trim())) setColor(parseColor(event.target.value)); }} {...props} /> ); } function ColorFieldPrefix(props: React.HTMLAttributes) { return

; } function ColorSwatchPickerRoot({ children, className }: React.HTMLAttributes & { size?: string }) { return

{children}

; } function ColorSwatchPickerItem({ children, color }: { children: React.ReactNode; color: string }) { const { color: selected, setColor } = usePicker(); const parsed = parseColor(color); const isSelected = selected.toString("hex") === parsed.toString("hex"); return ( ); } function ColorSwatchPickerSwatch({ color }: { color?: string }) { return ; } const SelectContext = React.createContext<{ value: string; setValue: (value: string) => void; open: boolean; setOpen: (value: boolean) => void } | null>(null); function SelectRoot({ children, value = "hsl", onChange, className }: { children: React.ReactNode; value?: string; variant?: string; onChange?: (value: string) => void; className?: string; "aria-label"?: string }) { const [open, setOpen] = React.useState(false); const setValue = (next: string) => { onChange?.(next); setOpen(false); }; return

{children}

; } function SelectTrigger({ children }: { children: React.ReactNode }) { const ctx = React.useContext(SelectContext)!; return ; } function SelectValue({ className }: { className?: string }) { const ctx = React.useContext(SelectContext)!; return {ctx.value}; } function SelectIndicator() { return ⌄; } function SelectPopover({ children }: { children: React.ReactNode }) { const ctx = React.useContext(SelectContext)!; return ctx.open ?

{children}

: null; } function ListBoxRoot({ children }: { children: React.ReactNode }) { return ; } function ListBoxItem({ children, id, className }: { children: React.ReactNode; id: string; textValue?: string; className?: string }) { const ctx = React.useContext(SelectContext)!; return ; } function ListBoxItemIndicator() { return ✓; } function Button({ children, onPress, ...props }: React.ButtonHTMLAttributes & { isIconOnly?: boolean; size?: string; variant?: string; onPress?: () => void }) { return ; } function ShuffleIcon({ className }: { className?: string }) { return ( ); } export const ColorPicker = Object.assign(ColorPickerRoot, { Trigger: ColorPickerTrigger, Popover: ColorPickerPopover }); export const ColorArea = Object.assign(ColorAreaRoot, { Thumb: ColorAreaThumb }); export const ColorSlider = Object.assign(ColorSliderRoot, { Output: ColorSliderOutput, Track: ColorSliderTrack, Thumb: ColorSliderThumb }); export const ColorField = Object.assign(ColorFieldRoot, { Group: ColorFieldGroup, Prefix: ColorFieldPrefix, Input: ColorFieldInput }); export const ColorSwatchPicker = Object.assign(ColorSwatchPickerRoot, { Item: ColorSwatchPickerItem, Swatch: ColorSwatchPickerSwatch }); export const Select = Object.assign(SelectRoot, { Trigger: SelectTrigger, Value: SelectValue, Indicator: SelectIndicator, Popover: SelectPopover }); export const ListBox = Object.assign(ListBoxRoot, { Item: Object.assign(ListBoxItem, { Indicator: ListBoxItemIndicator }), ItemIndicator: ListBoxItemIndicator }); export { Button, ColorSwatch, Label, ShuffleIcon }; export type { ColorChannel, ColorSpace, ColorValue };

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

ColorPicker

Created by

Installation

How to use

Website

Tags

ColorPicker

Created by

Installation

How to use

Website

Tags