UseColorReturn · color-kit

interfaceimport type { UseColorReturn } from '@pbroom/color-kit/react';use-color.ts:110

interface UseColorReturn {
  store: ColorStore;
  state: ColorState;
  requested: Color;
  displayed: Color;
  displayedSrgb: Color;
  displayedP3: Color;
  activeGamut: GamutTarget;
  activeView: ViewModel;
  setRequested: (requested: Color, options?: SetRequestedOptions) => void;
  setChannel: (channel: ColorChannel, value: number, options?: Omit<SetRequestedOptions, 'changedChannel'>) => void;
  setFromString: (css: string, options?: SetRequestedOptions) => void;
  setFromRgb: (rgb: Rgb, options?: SetRequestedOptions) => void;
  setFromHsl: (hsl: Hsl, options?: SetRequestedOptions) => void;
  setFromHsv: (hsv: Hsv, options?: SetRequestedOptions) => void;
  setActiveGamut: (gamut: GamutTarget, source?: ColorSource) => void;
  setActiveView: (view: ViewModel, source?: ColorSource) => void;
  hex: string;
  rgb: Rgb;
  hsl: Hsl;
  hsv: Hsv;
  oklch: Oklch;
  requestedCss: (format?: CssColorFormat) => string;
  displayedCss: (format?: CssColorFormat) => string;
}

Properties

storeColorStore: Subscribable store backing this hook; child components subscribe to slices.
stateColorState: The full current state.
requestedColor: The requested (user-intended) OKLCH color; may be out of gamut.
displayedColor: The requested color gamut-mapped into activeGamut.
displayedSrgbColor: The requested color gamut-mapped into sRGB.
displayedP3Color: The requested color gamut-mapped into Display P3.
activeGamutGamutTarget: Gamut that displayed and displayedCss() target.
activeViewViewModel: View model the UI is presenting (oklch, rgb, hex, ...).
setRequested(requested: Color, options?: SetRequestedOptions) => void: Sets the requested OKLCH color.
setChannel(channel: ColorChannel, value: number, options?: Omit<SetRequestedOptions, 'changedChannel'>) => void: Sets one OKLCH channel (l, c, h or alpha) of the requested color; reports channel as the event's changedChannel.
setFromString(css: string, options?: SetRequestedOptions) => void: Parses a CSS color and sets it as requested. Except for an oklch() string with a hue, an achromatic color keeps the latest requested hue (see SetRequestedOptions.explicitHue); the same applies to setFromRgb, setFromHsl and setFromHsv.
setFromRgb(rgb: Rgb, options?: SetRequestedOptions) => void: Sets the requested color from sRGB channels (0-255, alpha 0-1).
setFromHsl(hsl: Hsl, options?: SetRequestedOptions) => void: Sets the requested color from HSL.
setFromHsv(hsv: Hsv, options?: SetRequestedOptions) => void: Sets the requested color from HSV.
setActiveGamut(gamut: GamutTarget, source?: ColorSource) => void: Sets the active display gamut; source defaults to 'user'.
setActiveView(view: ViewModel, source?: ColorSource) => void: Sets the active view model; source defaults to 'user'.
hexstring: Requested color as hex. This and the other requested-color conversions (rgb, hsl, hsv, oklch) are computed lazily on first access and cached per requested color.
rgbRgb: Requested color as sRGB (computed lazily).
hslHsl: Requested color as HSL (computed lazily).
hsvHsv: Requested color as HSV (computed lazily).
oklchOklch: Requested color as OKLCH (computed lazily).
requestedCss(format?: CssColorFormat) => string: Formats the requested color as CSS; format defaults to 'hex'.
displayedCss(format?: CssColorFormat) => string: Formats the displayed color as CSS. Defaults to 'display-p3' when the active gamut is Display P3 and 'hex' otherwise.