# Serializing


```ts
import { toFormat } from "chroma-panel";

toFormat(hsva, "hex"); // '#3366cc'
toFormat(hsva, "rgba"); // 'rgba(51, 102, 204, 1)'
toFormat(hsva, "hsl"); // 'hsl(220, 60%, 50%)'
```

The formats are `'hex'`, `'hexa'`, `'rgb'`, `'rgba'`, `'hsl'` and `'hsla'`. This
is the same conversion behind the `format` prop, which sets the `css` field on a
change result and the value a form submits.

## API reference

<Signature name="toFormat" />

### One format at a time

Each format has its own function, if you know which you want.

<SignatureList names="toHex, toHexa, toRgbString, toRgbaString, toHslString, toHslaString" />

### Every format at once

<Signature name="toResult" />

<Callout variant="note" title="Precision">
  `hex` is rounded to 8 bits per channel. Keep the `hsva` if a colour has to
  survive a round trip unchanged.
</Callout>