The Palette API can generate a color palettes of many different types.
makeAnalogousPalette
The makeAnalogousPalette method makes an analogous color palette of x colors. Analogous colors are colors that are next to each other on the color wheel. The distance between the colors can vary depending on the desired result.
Syntax
makeAnalogousPalette({ ...options })
makeAnalogousPalette()Parameters
options: Object with 5 elements to set the palette output.
- color: Color of type Color, the color which the color palette will start, random HSL color if not sent.
- quantity: Quantity of colors to be on the palette, min value 2, default 3.
- format: Color format wich the method will return the palette, if not sent will take the value of the receive color format.
- shift: Mathematical distance the saturation and lightness will take from each color, minimum value 1 and maximum value 10, random if not sent.
- direction: Direction on the color wheel the palette will take, random if not sent, values “left” or “right”.
Return value
An array of colors of type Color that make an analogous color palette.
Examples
makeAnalogousPalette({
color: '#3e7a72',
quantity: 5
})
// Expected output: ['#3e7a72', '#3e647a', '#3d457a', '#543e7a', '#723e7a']
makeAnalogousPalette({
color: '#db490f',
quantity: 4,
shift: 100
})
// Expected output: ['#db490f', '#80db0f', '#0fc5dd', '#0f5ddb']
makeAnalogousPalette()
// Expected output: [
// { h: 88, s: 50, l: 46 },
// { h: 19, s: 50, l: 46 },
// { h: 343, s: 50, l: 46 }
// ]makeComplementaryPalette
The makeComplementaryPalette method makes a complementary color palette of 2 colors. Complementary colors are colors that are opposites on the color wheel.
Syntax
makeComplementaryPalette({ ...options })
makeComplementaryPalette()Parameters
options: Object with 3 elements to set the palette output.
- color: Color of type Color, the color which the color palette will start, random HSL color if not sent.
- quantity: Quantity of colors to be on the palette, min value 2, default 2.
- format: Color format wich the method will return the palette, if not sent will take the value of the receive color format.
Return value
An array of colors of type Color that make a complementary color palette of 2 colors.
Examples
makeComplementaryPalette({
color: '#692053',
quantity: 4
})
// Expected output: ['#b96e95', '#692053', '#206936', '#aaf8c0']
makeComplementaryPalette({
color: '#ae6913',
format: 'hsl'
})
// Expected output: [
// { h: 39, s:90, l: 50},
// { h: 33, s: 80, l: 38},
// { h: 213: 2: 80, l: 38}
// ]
makeComplementaryPalette(),
// Expected output: [
// { h: 292, s: 45, l: 45},
// { h: 112, s: 45, l: 45 }
]makeMixedPalette
The makeMixedPalette method makes a color palette mixed of any of the previous palette types.
Syntax
makeColorPalette({ ...options })
makeColorPalette()Parameters
options: Object with 3 elements to set the palette output.
- color: Color of type Color, the color which the color palette will start, random HSL color if not sent.
- quantity: Quantity of colors to be on the palette, min value 3, default 5.
- format: Color format wich the method will return the palette, if not sent will take the value of the receive color format.
Return value
An array of colors of type BaseColor that make a color palette.
Examples
makeMixedPalette({
format: 'hex'
})
// Expected output: ['#89fea6', '#bb8bfe', '#ea8077', '#fe948b', '#ffa89f']
makeMixedPalette({
format: 'hex',
quantity: 4
})
// Expected output: ['#c5261b', '#c5981b, '#1bc543', '#1b48c5']makeMonochromaticPalette
The makeMonochromaticPalette method makes a monochromatic color palette of x colors. A monochromatic palette is a set of colors that start with a base color. The following colors are variations of that base color, created by changing the lightness of it.
Syntax
makeMonochromaticPalette({ ...options })
makeMonochromaticPalette()Parameters
options: Object with 4 elements to set the palette output.
- color: Color of type Color, the color which the color palette will start, random HSL color if not sent.
- quantity: Quantity of colors to be on the palette, min value 2, default 3.
- format: Color format wich the method will return the palette, if not sent will take the value of the receive color format.
- shift: Mathematical distance the saturation and lightness will take from each color, minimum value 1 and maximum value 10, random if not sent.
Return value
An array of colors of type Color that make a monochromatic color palette of x colors.
Examples
makeMonochromaticPalette({
color: { r: 35, g: 0, b: 7 },
})
// Expected output: [
// { r: 35, g: 0, b: 7 },
// { r: 55, g: 15, b: 27 },
// { r: 75, g: 35, b: 47 }
// ]
makeMonochromaticPalette({
color: { r: 2, g: 69, b: 0 },
quantity: 2
})
// Expected output: [
// { r: 2, g: 69, b: 0 },
// { r: 22, g: 89, b: 12 }
// ]
makeMonochromaticPalette()
// Expected output: [
// { h: 163, s: 20, l: 93 },
// { h: 157, s: 21, l: 73 },
// { h: 164, s: 44, l: 47 }
// ]makeShadesPalette
The makeShadesPalette method makes a monochromatic color palette of x colors. A monochromatic palette is a set of colors that start with a base color. The following colors are variations of that base color, created by changing the lightness of it.
Syntax
makeShadesPalette({ ...options })
makeShadesPalette()Parameters
options: Object with 4 elements to set the palette output.
- color: Color of type Color, the color which the color palette will start, random HSL color if not sent.
- quantity: Quantity of colors to be on the palette, min value 2, default 3.
- format: Color format wich the method will return the palette, if not sent will take the value of the receive color format.
- shift: Mathematical distance the saturation and lightness will take from each color, minimum value 1 and maximum value 10, random if not sent.
Return value
An array of colors of type Color that make a monochromatic color palette of x colors.
Examples
makeShadesPalette({
color: '#0d0c18',
})
// Expected output: [
// '#0d0c18',
// '#e9e7f3',
// '#5e51a9'
// ]
makeShadesPalette({
color: '#997429',
format: 'rgb'
})
// Expected output: [
// { r: 40, g: 58, b: 38 },
// { r: 40, g: 58, b: 23 }
// { r: 39, g: 57, b: 9 }
// { r: 39, g: 58, b: 87 }
// ]
makeShadesPalette()
// Expected output: [
// { h: 163, s: 20, l: 93 },
// { h: 157, s: 21, l: 73 },
// { h: 164, s: 44, l: 47 }
// ]makeSplitComplementaryPalette
The makeSplitComplementaryPalette method makes a split complementary color palette of 3 colors. A split complementary color palette search first for the opposite color of a selected color on the color wheel, but takes the proximate colors at the left and right of it.
Syntax
makeSplitComplementaryPalette({ ...options })
makeSplitComplementaryPalette()Parameters
options: Object with 4 elements to set the palette output.
- color: Color of type Color, the color which the color palette will start, random HSL color if not sent.
- quantity: Quantity of colors to be on the palette, min value 2, default 3.
- format: Color format wich the method will return the palette, if not sent will take the value of the receive color format.
- shift: Mathematical distance the saturation and lightness will take from each color, minimum value 1 and maximum value 10, random if not sent.
Return value
An array of colors of type Color that make a color palette of 3 colors.
Examples
makeSplitComplementaryPalette({
color: '#cf927c'
})
// Expected output: ['#cf927c', '#7dcfa0, '#857dcf']
makeSplitComplementaryPalette({
color: '#2180fa',
shift: 40
})
// Expected output: ['#2180fa', '#fa511e', '#c7fa1e']
makeSplitComplementaryPalette()
// Expected output: ['#775713', '#136d77', '#2d1377']makeSquarePalette
The makeSquarePalette method makes a square color palette of 4 colors. A square palette is a selection of colors on the color wheel that, when joined, form a square.
Syntax
makeSquarePalette({ ...options })
makeSquarePalette()Parameters
options: Object with 3 elements to set the palette output.
- color: Color of type Color, the color which the color palette will start, random HSL color if not sent.
- quantity: Quantity of colors to be on the palette, min value 4, default 4.
- format: Color format wich the method will return the palette, if not sent will take the value of the receive color format.
Return value
An array of colors of type Color that make a color palette of 4 colors.
Examples
makeSquarePalette('#c1ea8c')
// Expected output: ['#c1ea8c', '#8beae3, '#b48bea', '#ea8b91']
makeSquarePalette({
format: 'hex'
})
// Expected outou: ['#58fd5b', '#58a8fd', '#fd58fb', '#fdae58']
makeTetradicPalette
The makeTetradicPalette method makes a tetradic color palette of 4 colors. A tetradic palette is a set of 4 colors that are evenly spaced around the color wheel.
Syntax
makeTetradicPalette({ ...options })
makeTetradicPalette()Parameters
options: Object with 3 elements to set the palette output.
- color: Color of type Color, the color which the color palette will start, random HSL color if not sent.
- quantity: Quantity of colors to be on the palette, min value 2, default 4.
- format: Color format wich the method will return the palette, if not sent will take the value of the receive color format.
Return value
An array of colors of type Color that make a color palette of 4 colors.
Examples
makeTetradicPalette('#ff5387')
// Expected output: ['#ff5387', '#ff7654, '#43cca3', '#225866']
makeTetradicPalette({
format: 'hex'
})
// Expected output: ['#cca374', '#c9cc74, '#749dcc', '#3c3a66']makeTriadicPalette
The makeTriadicPalette method makes a triadic color palette of 3 colors. A triadic palette is a selection of colors on the color wheel that, when joined, form a triangle.
Syntax
makeTriadicPalette({ ...options })
makeTriadicPalette()Parameters
options: Object with 3 elements to set the palette output.
- color: Color of type Color, the color which the color palette will start, random HSL color if not sent.
- quantity: Quantity of colors to be on the palette, min value 2, default 4.
- format: Color format wich the method will return the palette, if not sent will take the value of the receive color format.
Return value
An array of colors of type Color that make a color palette of 4 colors.
Examples
makeTriadicPalette('#6248cc')
// Expected output: ['#6248cc', '#cb6248, '#48cb62']
makeTriadicPalette({
format: 'hex'
})
// Expected output: ['#931b1f', '#1f931b, '#1b1f93']makeColorPalette
The makeColorPalette method makes a color palette of any of the previous palette types.
Syntax
makeColorPalette({ ...options })Parameters
options: An object with 2 obligatory option and 4 optional options.
- color: Color of type Color to use as base color, it should match the selected format.
- paletteType (required): A string of type Palette to select the type of color palette you want.
- format: A string, it can only contain a value of the input formats (cmyk, hex, hsl, hsv or rgb).
- quantity: Number, if the palette type you select receive a quantity to create a certain number of colors, you can send a value.
- shift: Mathematical distance the saturation and lightness will take from each color.
Return value
An array of colors of type Color that make a color palette.
Examples
makeColorPalette({
paletteType: 'monochromatic',
format: 'hex'
})
// Expected output: ['#02001d', '#2a1245, '#523a6d']
makeColorPalette({
color: { r: 159, g: 136, b: 255 },
paletteType: 'complementary',
format: 'rgb',
})
// Expected output: [{ r: 159, g: 136, b: 255 }, { r: 232, g: 255, b: 138 }]
makeColorPalette({
color: '#b5eb8e',
paletteType: 'analogous',
format: 'hex',
quantity: 5,
shift: 50
})
// Expected output: ['#b5eb8e', '#8eebb5', '#8ed4eb', '#8ea5eb', '#c48eeb']
makeColorPalette({ paletteType: 'shades' })
// Expected output: ['#0d0c18', '#e9e7f3', '#5e51a9']