Completeness: behavior-required

The stylesheet is only the visible half of this component. It also needs a keyboard map, focus managed across more than one element, ARIA attributes that point at other nodes, and [data-*] attributes that only running code sets — so a CSS-only port will not reproduce it. Use @blakeui/react, or read the interaction contract from the MCP server with get_component_behavior("ColorArea") and build the behaviour yourself.

Import

import { ColorArea } from '@blakeui/react';

Usage

import {ColorArea} from "@blakeui/react";

export function ColorAreaBasic() {
  return (
    <ColorArea defaultValue="rgb(116, 52, 255)">
      <ColorArea.Thumb />
    </ColorArea>
  );
}

Anatomy

import { ColorArea } from '@blakeui/react';

export default () => (
  <ColorArea>
    <ColorArea.Thumb />
  </ColorArea>
);

With Dots

import {ColorArea} from "@blakeui/react";

export function ColorAreaWithDots() {
  return (
    <ColorArea showDots defaultValue="hsl(200, 100%, 50%)">
      <ColorArea.Thumb />
    </ColorArea>
  );
}

Controlled

Current color: #9B80FF

"use client";

import type {Color} from "@blakeui/react";

import {ColorArea, ColorSwatch, parseColor} from "@blakeui/react";

Color Space & Channels

Use colorSpace to set the color space (RGB, HSL, HSB) and xChannel/yChannel props to customize which color channels are displayed on each axis.

Color Space

X Axis

Y Axis

hsb(219, 58%, 93%)

"use client";

import type {ColorSpace, Key} from "@blakeui/react";

import {ColorArea, Label, ListBox, Select, parseColor} from "@blakeui/react";

Disabled

import {ColorArea} from "@blakeui/react";

export function ColorAreaDisabled() {
  return (
    <ColorArea isDisabled defaultValue="hsl(200, 100%, 50%)">
      <ColorArea.Thumb />
    </ColorArea>
  );
}

Custom Render Function

"use client";

import {ColorArea} from "@blakeui/react";

export function CustomRenderFunction() {

Related Components

ColorSwatch

ColorSwatchPicker

ColorField

Styling

Passing Tailwind CSS classes

import { ColorArea } from '@blakeui/react';

function CustomColorArea() {
  return (
    <ColorArea className="max-w-72 rounded-3xl">
      <ColorArea.Thumb />
    </ColorArea>
  );
}

Customizing the component classes

To customize the ColorArea component classes, you can use the @layer components directive.
Learn more.

A worked example is in Styling.

blakeUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ColorArea component uses these CSS classes (View source styles):

Base Classes

.color-area - Base styles with gradient background and inner shadow
.color-area--show-dots - Adds dot grid overlay for precision picking

Element Classes

.color-area__thumb - Draggable thumb indicator

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

Disabled: [data-disabled="true"]
Focus: [data-focus-visible="true"]
Dragging: [data-dragging="true"] (thumb only)

API Reference

ColorArea Props

Inherits from React Aria ColorArea.

Prop	Type	Default	Description
`value`	`string \| Color`	-	The current color value (controlled)
`defaultValue`	`string \| Color`	-	The default color value (uncontrolled)
`onChange`	`(color: Color) => void`	-	Handler called when the color changes while dragging
`onChangeEnd`	`(color: Color) => void`	-	Handler called when the user stops dragging
`xChannel`	`ColorChannel`	`"saturation"`	Color channel for the horizontal axis
`yChannel`	`ColorChannel`	`"brightness"`	Color channel for the vertical axis
`colorSpace`	`ColorSpace`	-	The color space for the channels
`isDisabled`	`boolean`	`false`	Whether the color area is disabled
`showDots`	`boolean`	`false`	Whether to show the dot grid overlay
`className`	`string`	-	Additional CSS classes
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, ColorAreaRenderProps>`	-	Overrides the default DOM element with a custom render function.

ColorArea.Thumb Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`style`	`CSSProperties \| ((renderProps) => CSSProperties)`	-	Inline styles or render props function
`render`	`DOMRenderFunction<keyof React.JSX.IntrinsicElements, ColorThumbRenderProps>`	-	Overrides the default DOM element with a custom render function.

ColorArea

Related Components

On this page

Related Components