Analogous Schemes

+ Triadic & Split Complement Schemes

These three methods are synonyms with different default angles.

.scheme('analogous', {
  angle: number, // optional, default = 30
  round: boolean // optional, defaults to true
})
.scheme('triadic', {
  angle: number, // optional, default = 120
  round: boolean // optional, defaults to true
})
.scheme('splitcomplement', {
  angle: number, // optional, default = 150
  round: boolean // optional, defaults to true
})

Examples

analogous

30°

hsv: { h: 344, s: 100, v: 100, a: 100 }ff0044hsv: { h: 14, s: 100, v: 100, a: 100 }ff3c00hsv: { h: 314, s: 100, v: 100, a: 100 }ff00c3

analogous

10°

hsv: { h: 344, s: 100, v: 100, a: 100 }ff0044hsv: { h: 354, s: 100, v: 100, a: 100 }ff0019hsv: { h: 334, s: 100, v: 100, a: 100 }ff006f

analogous

60°

hsv: { h: 344, s: 100, v: 100, a: 100 }ff0044hsv: { h: 44, s: 100, v: 100, a: 100 }ffbb00hsv: { h: 284, s: 100, v: 100, a: 100 }bb00ff

triadic

120°

hsv: { h: 344, s: 100, v: 100, a: 100 }ff0044hsv: { h: 104, s: 100, v: 100, a: 100 }44ff00hsv: { h: 224, s: 100, v: 100, a: 100 }0044ff

triadic

100°

hsv: { h: 344, s: 100, v: 100, a: 100 }ff0044hsv: { h: 84, s: 100, v: 100, a: 100 }99ff00hsv: { h: 244, s: 100, v: 100, a: 100 }1100ff

triadic

135°

hsv: { h: 344, s: 100, v: 100, a: 100 }ff0044hsv: { h: 119, s: 100, v: 100, a: 100 }04ff00hsv: { h: 209, s: 100, v: 100, a: 100 }0084ff

split complement

150°

hsv: { h: 344, s: 100, v: 100, a: 100 }ff0044hsv: { h: 134, s: 100, v: 100, a: 100 }00ff3chsv: { h: 194, s: 100, v: 100, a: 100 }00c3ff

split complement

140°

hsv: { h: 344, s: 100, v: 100, a: 100 }ff0044hsv: { h: 124, s: 100, v: 100, a: 100 }00ff11hsv: { h: 204, s: 100, v: 100, a: 100 }0099ff

split complement

170°

hsv: { h: 344, s: 100, v: 100, a: 100 }ff0044hsv: { h: 154, s: 100, v: 100, a: 100 }00ff91hsv: { h: 174, s: 100, v: 100, a: 100 }00ffe5

JavaScript

const Color = require('chromaticity-color-utilities')

const scheme1 = Color.from('rgb', [255, 0, 255]).scheme('analogous')
// [
//   rgb { r: 255, g: 0, b: 255, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 128, g: 255, b: 0, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 0, g: 255, b: 128, a: 255, bitDepth: 8, max: 255 }
// ]
const scheme2 = Color.from('rgb', [255, 0, 255]).scheme('triadic')
// [
//   rgb { r: 255, g: 0, b: 255, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 255, g: 255, b: 0, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 0, g: 255, b: 255, a: 255, bitDepth: 8, max: 255 }
// ]
const scheme3 = Color.from('rgb', [255, 0, 255]).scheme('splitcomplement', {
  angle: 160,
})
// [
//   rgb { r: 255, g: 0, b: 255, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 85, g: 255, b: 0, a: 255, bitDepth: 8, max: 255 },
//   rgb { r: 0, g: 255, b: 85, a: 255, bitDepth: 8, max: 255 }
// ]

TypeScript

import Color from 'chromaticity-color-utilities'

const scheme1: Color.rgb[] = Color.from('rgb', [255, 0, 255]).scheme(
  'analogous'
)