Chroma Panel

Search documentation

Find a page or section

A two-axis area for saturation and brightness.

Anatomy

import { ColorArea } from "chroma-panel";
 
<ColorArea height={180} />;

Only inside a panel

This is one of the parts the built-in modes are made of. It reads the colour through usePanel(), so it only works inside a ChromaPanel — typically in a custom mode. For a picker outside the panel, use the store and hooks.

API reference

Props

PropTypeDefaultDescription
heightnumber150Height in pixels. The width fills the container.
classNamestringClass on the area.