# ColorField


## Anatomy

```tsx
import { ColorField } from "chroma-panel";

<ColorField label="Hex" withAlpha />;
```

See [parsing](/react/utils/parsing) for what it accepts.

<Callout variant="note" title="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](/react/modes/custom). For a picker outside the panel, use [the
  store and hooks](/react/utils/use-color-store).
</Callout>

## API reference

### Props

<PropsTable name="ColorField" />