---
name: "ColourTransformer"
mode: "api"
versionRequirements:
  - { name: "@ray-js/panel-sdk", version: "1.0.0" }
title: "ColourTransformer"
summary: "ColourTransformer is used to parse the lighting `colour_data` DP and provides parsing and formatting for the raw color data format."
questions:
  - "What is ColourTransformer used for?"
  - "How does ColourTransformer parse the raw color data format?"
  - "What are the input and output of ColourTransformer?"
  - "What are the transformation rules of ColourTransformer?"
---

## ColourTransformer

> [VERSION] @ray-js/panel-sdk >= 1.0.0

> 💡 For color light control DPs of lighting products (e.g., colour_data), converts front-end HSV values (hue/saturation/value) to and from a 12-character hexadecimal DP string. Each component occupies 4 hex digits (2 bytes).

### Description

Standard color light DP protocol converter for bidirectional conversion between HSV values and the device DP hexadecimal protocol

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `uuid` | `string` | No | DP identifier, defaults to 'colour_data' |
| `defaultValue` | `TColorData` | No | Default HSV value returned when parsing fails |

### Return Value

Type: `ColourTransformer`

ColourTransformer instance

#### Methods

| Method | Description |
| --- | --- |
| `parser` | Parse a DP hexadecimal string into an HSV value object |
| `formatter` | Format an HSV value object as a DP hexadecimal string |

### Referenced Types

##### `type` TColorData

| Property | Type | Description |
| --- | --- | --- |
| `hue` | `number` | Hue |
| `saturation` | `number` | Saturation |
| `value` | `number` | Brightness |


### Examples

#### Example

```ts
import { ColourTransformer } from '@ray-js/panel-sdk';

const transformer = new ColourTransformer();
// Parse DP string into an HSV object
const hsv = transformer.parser('000003e803e8');
// => { hue: 0, saturation: 1000, value: 1000 }

// Format the HSV object into a DP string
const dpStr = transformer.formatter({ hue: 120, saturation: 800, value: 900 });
// => '007803200384'
```