#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# Color.Harmony Class

Defined in: `color/js/color-harmony.js:1`
Module: color-harmony
Parent Module: color

Color Harmony provides methods useful for color combination discovery.

- Index
- Methods
- Properties

## Item Index

### Methods

- _adjustOffsetAndFinish
- _constrainHue
- _finish
- _searchLuminanceForBrightness
- _start
- _toAdditive
- _toSubtractive
- getAnalogous
- getBrightness
- getComplementary
- getMonochrome
- getOffset
- getSimilar
- getSimilarBrightness
- getSplit
- getSquare
- getTetrad
- getTriad

### Properties

- _brightnessWeights

## Methods

### `_adjustOffsetAndFinish`

(

- `color`
- `offsets`
- `to`

)
Array private

Defined in `color/js/color-harmony.js:529`

Available since 3.8.0

Takes an HSL array, and an array of offsets and returns and array of colors that have been adjusted. The returned colors will match the array of offsets provided. If you wish you have the same color value returned, you can provide null or an empty object to the offsets. The returned array will contain color value strings that have been adjusted from subtractive to additive.

#### Parameters:

- `color` Array
- `offsets` Array
- `to` String

#### Returns:

Array:

### `_constrainHue`

(

- `hue`
- `[precision]`

)
Number private

Defined in `color/js/color-harmony.js:461`

Available since 3.8.0

Contrain the hue to a value between 0 and 360 for calculations and real color wheel value space. Provide a precision value to round return value to a decimal place

#### Parameters:

- `hue` Number
- `[precision]` Number optional

#### Returns:

Number: Constrained hue value

### `_finish`

(

- `hsla`
- `[to]`

)
String private

Defined in `color/js/color-harmony.js:400`

Available since 3.8.0

Converts the provided HSLA values from subtractive to additive returning a converted color string

#### Parameters:

- `hsla` Array
- `[to]` String optional

#### Returns:

String:

### `_searchLuminanceForBrightness`

(

- `color`
- `brightness`
- `min`
- `max`

)
Number private

Defined in `color/js/color-harmony.js:501`

Available since 3.8.0

Calculates the luminance as a mid range between the min and max to match the brightness level provided

#### Parameters:

- `color` Array

  HSLA values

- `brightness` Number

  Brightness to be matched

- `min` Number

  Minimum range for luminance

- `max` Number

  Maximum range for luminance

#### Returns:

Number: Found luminance to achieve requested brightness

### `_start`

(

- `str`

)
Array private

Defined in `color/js/color-harmony.js:384`

Available since 3.8.0

Converts the provided color from additive to subtractive returning an Array of HSLA values

#### Parameters:

- `str` String

#### Returns:

Array:

### `_toAdditive`

(

- `hue`

)
Number private

Defined in `color/js/color-harmony.js:421`

Available since 3.8.0

Adjusts the hue degree from subtractive to additive

#### Parameters:

- `hue` Number

#### Returns:

Number: Converted additive hue

### `_toSubtractive`

(

- `hue`

)
Number private

Defined in `color/js/color-harmony.js:441`

Available since 3.8.0

Adjusts the hue degree from additive to subtractive

#### Parameters:

- `hue` Number

#### Returns:

Number: Converted subtractive hue

### `getAnalogous`

(

- `str`
- `[offset]`
- `[to]`

)
String public

Defined in `color/js/color-harmony.js:77`

Available since 3.8.0

Returns an Array of five colors. The first color in the Array will be the color passed in. The remaining four will be analogous colors two in either direction from the initially provided color.

#### Parameters:

- `str` String
- `[offset]` Number optional
- `[to]` String optional

#### Returns:

String:

### `getBrightness`

(

- `str`

)
Number public

Defined in `color/js/color-harmony.js:328`

Available since 3.8.0

Returns 0 - 100 percentage of brightness from `0` (black) being the darkest to `100` (white) being the brightest.

#### Parameters:

- `str` String

#### Returns:

Number:

### `getComplementary`

(

- `str`
- `[to]`

)
Array public

Defined in `color/js/color-harmony.js:27`

Available since 3.8.0

Returns an Array of two colors. The first color in the Array will be the color passed in. The second will be the complementary color of the color provided

#### Parameters:

- `str` String
- `[to]` String optional

#### Returns:

Array:

### `getMonochrome`

(

- `str`
- `[count]`
- `[to]`

)
String public

Defined in `color/js/color-harmony.js:182`

Available since 3.8.0

Calculates lightness offsets resulting in a monochromatic Array of values.

#### Parameters:

- `str` String
- `[count]` Number optional
- `[to]` String optional

#### Returns:

String:

### `getOffset`

(

- `str`
- `adjust`
- `[to]`

)
String public

Defined in `color/js/color-harmony.js:280`

Available since 3.8.0

Adjusts the provided color by the offset(s) given. You may adjust hue, saturation, and/or luminance in one step.

#### Parameters:

- `str` String
- `adjust` Object
  - `[h]` Number optional
  - `[s]` Number optional
  - `[l]` Number optional
- `[to]` String optional

#### Returns:

String:

### `getSimilar`

(

- `str`
- `[offset]`
- `[count]`
- `[to]`

)
String public

Defined in `color/js/color-harmony.js:226`

Available since 3.8.0

Creates an Array of similar colors. Returned Array is prepended with the color provided followed a number of colors decided by count

#### Parameters:

- `str` String
- `[offset]` Number optional
- `[count]` Number optional
- `[to]` String optional

#### Returns:

String:

### `getSimilarBrightness`

(

- `str`
- `match`
- `[to]`

)
String public

Defined in `color/js/color-harmony.js:352`

Available since 3.8.0

Returns a new color value with adjusted luminance so that the brightness of the return color matches the perceived brightness of the `match` color provided.

#### Parameters:

- `str` String
- `match` String
- `[to]` String optional

#### Returns:

String:

### `getSplit`

(

- `str`
- `[offset]`
- `[to]`

)
String public

Defined in `color/js/color-harmony.js:50`

Available since 3.8.0

Returns an Array of three colors. The first color in the Array will be the color passed in. The second two will be split complementary colors.

#### Parameters:

- `str` String
- `[offset]` Number optional
- `[to]` String optional

#### Returns:

String:

### `getSquare`

(

- `str`
- `[to]`

)
String public

Defined in `color/js/color-harmony.js:157`

Available since 3.8.0

Returns an Array of four colors. The first color in the Array will be the color passed in. The remaining three colors are equidistant offsets from the starting color and each other.

#### Parameters:

- `str` String
- `[to]` String optional

#### Returns:

String:

### `getTetrad`

(

- `str`
- `[offset]`
- `[to]`

)
String public

Defined in `color/js/color-harmony.js:130`

Available since 3.8.0

Returns an Array of four colors. The first color in the Array will be the color passed in. The remaining three colors are equidistant offsets from the starting color and each other.

#### Parameters:

- `str` String
- `[offset]` Number optional
- `[to]` String optional

#### Returns:

String:

### `getTriad`

(

- `str`
- `[to]`

)
String public

Defined in `color/js/color-harmony.js:106`

Available since 3.8.0

Returns an Array of three colors. The first color in the Array will be the color passed in. The second two will be equidistant from the start color and each other.

#### Parameters:

- `str` String
- `[to]` String optional

#### Returns:

String:

## Properties

### `_brightnessWeights`

Unknown private

Defined in `color/js/color-harmony.js:485`

Available since 3.8.0

Brightness weight factors for perceived brightness calculations

"standard" values are listed as R: 0.241, G: 0.691, B: 0.068 These values were changed based on grey scale comparison of hsl to new hsl where brightness is said to be within plus or minus 0.01.