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

# HsbColor

> [`HsbColor`](#hsbcolor)

## Classes

### HsbColor

#### Constructors

##### Constructor

```ts
new HsbColor(
   h?, 
   s?, 
   b?, 
   a?): HsbColor;
```

###### Parameters

| Parameter | Type | Default value |
| ------ | ------ | ------ |
| `h` | `number` | `0` |
| `s` | `number` | `0` |
| `b` | `number` | `0` |
| `a` | `number` | `0` |

###### Returns

#### Properties

##### A

```ts
A: number;
```

##### B

```ts
B: number;
```

##### H

```ts
H: number;
```

##### S

```ts
S: number;
```

#### Methods

##### clone()

```ts
clone(): HsbColor;
```

###### Returns

[`HsbColor`](#hsbcolor)

##### getDarken()

```ts
getDarken(value): HsbColor;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

[`HsbColor`](#hsbcolor)

##### getFaded()

```ts
getFaded(value): HsbColor;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

[`HsbColor`](#hsbcolor)

##### getLighten()

```ts
getLighten(value): HsbColor;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `value` | `number` |

###### Returns

[`HsbColor`](#hsbcolor)

##### toRgb()

```ts
toRgb(): RgbColor;
```

###### Returns

[`RgbColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/RgbColor-1.md#rgbcolor)

##### fromRgb()

```ts
static fromRgb(rgbColor): HsbColor;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `rgbColor` | [`RgbColor`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/RgbColor-1.md#rgbcolor) |

###### Returns

[`HsbColor`](#hsbcolor)