Color Area

Alpha

A two-dimensional area control that allows users to select color values by interacting with a visual gradient area. Supports multiple color spaces and configurable channels for each axis.

View code

Current: #56d799

Features

Supports HSL, HSB, and RGB color spaces.
Configurable channels for horizontal (x) and vertical (y) axes.
Full keyboard navigation support.
Pointer/touch interaction for value selection.
Preserves hue information when saturation is 0.
Form integration with hidden inputs.

Installation

Install the component from your command line.

$ npm add reka-ui

tip

Looking for a complete color picker? Check out the Color Picker example that combines Color Area, Color Slider, Color Field, and Color Swatch components.

Anatomy

Import all parts and piece them together.

vue

<script setup>
import {
  ColorAreaArea,
  ColorAreaRoot,
  ColorAreaThumb,
} from 'reka-ui'
</script>

<template>
  <ColorAreaRoot v-slot="{ style }">
    <ColorAreaArea :style="style">
      <ColorAreaThumb />
    </ColorAreaArea>
  </ColorAreaRoot>
</template>

API Reference

ColorAreaRoot

The root component that provides the color area context and state management.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`colorSpace`	`'hsl'`	`'hsl' \| 'rgb' \| 'hsb'` The color space to operate in.
`defaultValue`	`'#ff0000'`	`string \| Color` The default color value (uncontrolled).
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with the area.
`modelValue`		`string \| Color` The color value (controlled). Can be a hex string or Color object.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`xChannel`	`'hue'`	`'hue' \| 'saturation' \| 'red' \| 'green' \| 'blue' \| 'alpha' \| 'lightness' \| 'brightness'` Color channel for the horizontal (x) axis.
`xName`		`string` The name of the x channel input element for form submission.
`yChannel`	`'saturation'`	`'hue' \| 'saturation' \| 'red' \| 'green' \| 'blue' \| 'alpha' \| 'lightness' \| 'brightness'` Color channel for the vertical (y) axis.
`yName`		`string` The name of the y channel input element for form submission.

Emit	Payload
`change`	`[value: string]`
`changeEnd`	`[value: string]`
`update:color`	`[value: Color]`
`update:modelValue`	`[value: string]` Event handler called when the value of the checkbox changes.

Slots (default)	Payload
`style`	`CSSProperties` CSS styles for the color area background gradient

ColorAreaArea

The interactive area component where users can select color values by clicking or dragging.

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

ColorAreaThumb

The draggable thumb component that indicates the current position in the color area.

Prop	Default	Type
`as`	`'span'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Examples

HSL Saturation/Lightness

A common use case for color area is selecting saturation and lightness in HSL color space.

vue

<script setup>
import {
  ColorAreaArea,
  ColorAreaRoot,
  ColorAreaThumb,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#3b82f6')
</script>

<template>
  <ColorAreaRoot
    v-slot="{ style }"
    v-model="color"
    color-space="hsl"
    x-channel="saturation"
    y-channel="lightness"
  >
    <ColorAreaArea :style="style">
      <ColorAreaThumb />
    </ColorAreaArea>
  </ColorAreaRoot>
</template>

RGB Red/Green Selector

Using RGB color space with red and green channels.

vue

<script setup>
import {
  ColorAreaArea,
  ColorAreaRoot,
  ColorAreaThumb,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#ff0000')
</script>

<template>
  <ColorAreaRoot
    v-slot="{ style }"
    v-model="color"
    color-space="rgb"
    x-channel="red"
    y-channel="green"
  >
    <ColorAreaArea :style="style">
      <ColorAreaThumb />
    </ColorAreaArea>
  </ColorAreaRoot>
</template>

Disabled State

Disable interaction with the color area.

vue

<script setup>
import {
  ColorAreaArea,
  ColorAreaRoot,
  ColorAreaThumb,
} from 'reka-ui'
import { ref } from 'vue'

const color = ref('#3b82f6')
</script>

<template>
  <ColorAreaRoot
    v-slot="{ style }"
    v-model="color"
    disabled
  >
    <ColorAreaArea :style="style">
      <ColorAreaThumb />
    </ColorAreaArea>
  </ColorAreaRoot>
</template>

Accessibility

Keyboard Interactions

Key	Description
`ArrowLeft`	Decreases the x-axis channel value by one step.
`ArrowRight`	Increases the x-axis channel value by one step.
`ArrowUp`	Increases the y-axis channel value by one step.
`ArrowDown`	Decreases the y-axis channel value by one step.
`Shift + ArrowKey`	Changes values by 10 steps at a time.
`PageUp`	Increases the y-axis channel value by a larger step.
`PageDown`	Decreases the y-axis channel value by a larger step.
`Home`	Jumps left (decreases x-axis value).
`End`	Jumps right (increases x-axis value).

Color Area ​

Features ​

Installation ​

Anatomy ​

API Reference ​

ColorAreaRoot ​

ColorAreaArea ​

ColorAreaThumb ​

Examples ​

HSL Saturation/Lightness ​

RGB Red/Green Selector ​

Disabled State ​

Accessibility ​

Keyboard Interactions ​