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

# HsbColor

> [`HsbColor`](#hsbcolor)

## Classes

### HsbColor

#### Constructors

##### Constructor

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

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `h` | `number` |
| `s` | `number` |
| `b` | `number` |
| `alpha` | `number` |

###### Returns

#### Accessors

##### alpha

###### Get Signature

```ts
get alpha(): number;
```

Alpha in range [0, 255]

###### Returns

`number`

##### b

###### Get Signature

```ts
get b(): number;
```

Brightness in range [0, 1]

###### Returns

`number`

##### h

###### Get Signature

```ts
get h(): number;
```

Hue in range [0, 1]

###### Returns

`number`

##### s

###### Get Signature

```ts
get s(): number;
```

Saturation in range [0, 1]

###### Returns

`number`

#### Methods

##### clone()

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

###### Returns

[`HsbColor`](#hsbcolor)

##### darken()

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

###### Parameters

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

###### Returns

[`HsbColor`](#hsbcolor)

##### decreaseAlpha()

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

###### Parameters

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

###### Returns

[`HsbColor`](#hsbcolor)

##### decreaseHue()

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

###### Parameters

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

###### Returns

[`HsbColor`](#hsbcolor)

##### desaturate()

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

###### Parameters

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

###### Returns

[`HsbColor`](#hsbcolor)

##### increaseAlpha()

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

###### Parameters

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

###### Returns

[`HsbColor`](#hsbcolor)

##### increaseHue()

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

###### Parameters

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

###### Returns

[`HsbColor`](#hsbcolor)

##### lighten()

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

###### Parameters

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

###### Returns

[`HsbColor`](#hsbcolor)

##### saturate()

```ts
saturate(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.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.md#rgbcolor) |

###### Returns

[`HsbColor`](#hsbcolor)