Skip to content
color-kitnext
StartAPI
color-kit on GitHub
Start

Concepts

  • OKLCH-canonical
  • Requested vs displayed
  • Planes and queries
  • Gamut and tolerance
  • Contrast

Guides

  • Headless picker
  • React
  • Contrast-aware palettes
  • GPU and three.js
  • Performance

API

  • Overview
  • @pbroom/color-kit
  • @pbroom/color-kit/plane
  • @pbroom/color-kit/interop
  • @pbroom/color-kit/compute
  • @pbroom/color-kit/hct
  • @pbroom/color-kit/driver
      • ffunctionareColorAreaAxesDistinct
      • KconstCOLOR_AREA_DEFAULT_RANGES
      • ffunctiongetColorAreaFallbackPoint
      • ffunctioncolorFromColorAreaKey
      • ffunctiongetColorAreaKeyAxis
      • ffunctiongetColorAreaValueText
      • ffunctioncolorFromColorAreaPosition
      • ffunctiongetColorAreaChromaBandPoints
      • ffunctiongetColorAreaContrastRegionPaths
      • ffunctiongetColorAreaGamutBoundaryPoints
      • ffunctiongetColorAreaThumbPosition
      • ffunctionnormalizeColorAreaPointer
      • ffunctionresolveColorAreaAxes
      • ffunctionresolveColorAreaRange
      • ffunctiontoColorAreaPlaneDefinition
      • IinterfaceColorAreaAxes
      • IinterfaceColorAreaAxis
      • IinterfaceColorAreaPlaneDefinition
      • IinterfaceColorAreaChromaBandOptions
      • TtypeColorAreaChannel
      • TtypeColorAreaContrastRegionOptions
      • IinterfaceColorAreaContrastRegionPoint
      • IinterfaceColorAreaFallbackPoint
      • IinterfaceColorAreaGamutBoundaryOptions
      • IinterfaceColorAreaGamutBoundaryPoint
      • TtypeColorAreaKey
      • IinterfaceColorAreaKeyOptions
      • IinterfaceColorAreaPointerRect
      • IinterfaceResolvedColorAreaAxes
      • IinterfaceResolvedColorAreaAxis
  • @pbroom/color-kit/react
Map

@pbroom/color-kit/driver/Color area

ColorAreaPointerRect

Client-space bounds of a color area, e.g. from getBoundingClientRect().

interfaceimport type { ColorAreaPointerRect } from '@pbroom/color-kit/driver';color-area.ts:429
interface ColorAreaPointerRect {
  left: number;
  top: number;
  width: number;
  height: number;
}

Properties

leftnumber
Left edge in client pixels.
topnumber
Top edge in client pixels.
widthnumber
Width in pixels.
heightnumber
Height in pixels.

Your display: detecting

MIT licensedSource