Marble UI
← Components

Color Area

Preview: Saturation × brightness

2D picker for two channels (default: saturation × brightness).

Import

import { ColorArea } from '@marbleui/ui'

Props

<ColorArea>

PropTypeDefaultDescription
size'sm' | 'md''md'

Also accepts React Aria props (91).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria ColorArea. Follow the primitive's docs for the full keyboard map.

Usage notes

Two-dimensional picker for two color channels, by default saturation by brightness. Pair with ColorSlider for hue, or use ColorPicker for the full set.

import { parseColor } from 'react-aria-components'

const [color, setColor] = useState(parseColor('hsb(219, 58%, 93%)'))

<ColorArea value={color} onChange={setColor} />
  • Controlled: value + onChange with a Color from parseColor. Uncontrolled: defaultValue.
  • Defaults are colorSpace="hsb", xChannel="saturation", yChannel="brightness". For another pair, set all three, for example colorSpace="rgb" xChannel="red" yChannel="green".
  • size is sm or md. Arrow keys move the thumb.
  • Hue lives on a separate ColorSlider; the area does not change it.
Example source · show
import { useState } from 'react'
import { parseColor } from 'react-aria-components'
import { ColorSwatch } from '../color-swatch'
import { ColorArea } from './color-area'

function Live() {
  const [color, setColor] = useState(parseColor('hsb(219, 58%, 93%)'))
  return (
    <div className="flex items-start gap-4">
      <ColorArea value={color} onChange={setColor} />
      <div className="flex flex-col gap-2 text-sm text-fg-muted">
        <ColorSwatch color={color} size="lg" />
        <span className="font-mono">{color.toString('hex')}</span>
      </div>
    </div>
  )
}

export const styles = {
  'Saturation × brightness': Live,
  'Red × green': () => <ColorArea colorSpace="rgb" xChannel="red" yChannel="green" defaultValue="rgb(120, 80, 200)" size="sm" />,
}

Source: packages/ui/src/color-area/color-area.tsx

Catalog

Category
color
Priority
Core
Primitive
react-aria
React Aria
ColorArea