---
title: "ColorPreviewService | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/ColorPreviewService/"
---

# ColorPreviewService

> - [`IListenableColorPreviewService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#ilistenablecolorpreviewservice)

## Classes

### ColorPreviewService

#### Implements

#### Constructors

##### Constructor

```ts
new ColorPreviewService(apiClient, renderingConfigProvider): ColorPreviewService;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `apiClient` | [`IDesignAtomsApiClient`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IDesignAtomsApiClient.md#idesignatomsapiclient) |
| `renderingConfigProvider` | [`IRenderingConfigProvider`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IRenderingConfigProvider.md#irenderingconfigprovider) |

###### Returns

[`ColorPreviewService`](#colorpreviewservice)

#### Methods

##### getPreview()

```ts
getPreview(color): any;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `color` | `Color` |

###### Returns

`any`

###### Implementation of

[`IListenableColorPreviewService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#ilistenablecolorpreviewservice).[`getPreview`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#getpreview-1)

##### getPreviewAsync()

```ts
getPreviewAsync(color): Promise<RgbColor>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `color` | `Color` |

###### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`RgbColor`\>

###### Implementation of

[`IListenableColorPreviewService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#ilistenablecolorpreviewservice).[`getPreviewAsync`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#getpreviewasync-1)

##### getPreviews()

```ts
getPreviews(colors): any[];
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `colors` | `Color`[] |

###### Returns

`any`[]

###### Implementation of

[`IListenableColorPreviewService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#ilistenablecolorpreviewservice).[`getPreviews`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#getpreviews-1)

##### getPreviewsAsync()

```ts
getPreviewsAsync(colors): Promise<RgbColor[]>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `colors` | `Color`[] |

###### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/finally.md#promise)\<`RgbColor`[]\>

###### Implementation of

[`IListenableColorPreviewService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#ilistenablecolorpreviewservice).[`getPreviewsAsync`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#getpreviewsasync-1)

##### subscribeToPreviewLoaded()

```ts
subscribeToPreviewLoaded(color, listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `color` | `Color` |
| `listener` | (`args`) => `any` |

###### Returns

`void`

###### Implementation of

[`IListenableColorPreviewService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#ilistenablecolorpreviewservice).[`subscribeToPreviewLoaded`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#subscribetopreviewloaded)

##### unsubscribeFromPreviewLoaded()

```ts
unsubscribeFromPreviewLoaded(color, listener): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `color` | `Color` |
| `listener` | (`args`) => `any` |

###### Returns

`void`

###### Implementation of

[`IListenableColorPreviewService`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#ilistenablecolorpreviewservice).[`unsubscribeFromPreviewLoaded`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms/IColorPreviewService.md#unsubscribefrompreviewloaded)