Have ideas to improve npm?Join in the discussion! »

    cyanea
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    🐙 cyanea

    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:

    The color object

    {
      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]]

    Available properties

    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.

    How is this different from palx?

    • cyanea depends on color instead of chroma-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.

    Install

    npm i cyanea

    DownloadsWeekly Downloads

    7

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    25.4 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar