Reka UI logoReka
backdrop
Examples
Components

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.
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.

sh
$ 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.

ColorAreaArea

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

ColorAreaThumb

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

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

KeyDescription
ArrowLeftDecreases the x-axis channel value by one step.
ArrowRightIncreases the x-axis channel value by one step.
ArrowUpIncreases the y-axis channel value by one step.
ArrowDownDecreases the y-axis channel value by one step.
Shift + ArrowKeyChanges values by 10 steps at a time.
PageUpIncreases the y-axis channel value by a larger step.
PageDownDecreases the y-axis channel value by a larger step.
HomeJumps left (decreases x-axis value).
EndJumps right (increases x-axis value).