Inspired by palx and named after the Cyanea Octopus for its wild color changing abilities, cyanea is a color palette generator. You pass it a single value and it generates a full-spectrum color object.
yarn add cyanea
# or
npm i cyanea
import cyanea from 'cyanea'
const colors = cyanea('rebeccapurple')
From here, cyanea generates a color object for each of the 12 hues in the color spectrum. Each hue has the following object created:
{
violet: {
isDark: true,
hex: '#663399',
rgb: ['101.99999999999996', '50.999999999999986', '153.00000000000003'],
variants: [
{
isDark: false,
hex: '#F9F5FC',
rgb: ['48.625', '245.4375', '251.81249999999997'],
},
// ... repeated for the remaining light/dark variants
],
},
// ... repeated for the remaining hues
}
The color you pass will be the first color returned in the object. Since you might not always know what the hue name is, a useful way to get the passed color value is:
const colors = cyanea('#663399')
const passedColor = colors[Object.keys(colors)[0]]
Key | Type | Description |
---|---|---|
isDark |
Boolean | Returns true or false for the current color. This is useful for determining if text on the color is light or dark. |
hex |
String | The colors hex value. e.g. '#663399' |
rgb |
String | The colors rgb value. Can be used in styles with: rgb(${colors.violet.rgb}) |
variants |
Array | 40 different lightness levels. From "almost white" to "almost black", and everything in-between them. |
- cyanea depends on
color
instead ofchroma-js
, which has a much smaller unpacked size - cyanea provides more shade variations and goes to a darker scale. This is useful for creating light and dark modes for your themes.
- cyanea provides both hex and rgb options so you can easily play with
rgba()
when necessary. e.g.box-shadow
, etc. - For every generated color, cyanea provides a
isDark
boolean to help determine text colors for when the color is used as a background.