JSPM

@arco-design/color

0.4.0
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 46462
    • Score
      100M100P100Q154808F
    • License MIT

    ArcoDesign color utils

    Package Exports

    • @arco-design/color

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@arco-design/color) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    ArcoDesign Color

    ArcoDesign Color Utils.

    For a given color, a gradient swatch containing ten colors is generated with an algorithm. This works for both light and dark modes.

    Usage

    npm i @arco-design/color
    import { generate, presetColor } from '@arco-design/color';
    
    console.log(generate('#123456'));
    
    console.log(presetColor);
    // {
    //   red: {...},
    //   orangered: {...},
    //   orange: {...},
    //   gold: {...},
    //   yellow: {...},
    //   lime: {...},
    //   green: {...},
    //   cyan: {...},
    //   blue: {...},
    //   arcoblue: {...},
    //   purple: {...},
    //   pinkpurple: {...},
    //   magenta: {...},
    //   gray: {...}
    // }

    API

    generate(color: string, options: Object);

    options.index {number | 1-10}

    Index (starting from 1) of the gradient colors to be generated.

    options.list {boolean}

    Whether to generate color array containing the ten colors.

    options.dark

    Whether to generate colors for dark mode.

    options.format {'hex' | 'rgb' | 'hsl'}

    Color format.

    getPresetColors {Function}

    Contains 14 preset sets of colors.

    • red
    • orangered
    • orange
    • gold
    • yellow
    • lime
    • green
    • cyan
    • blue
    • arcoblue
    • purple
    • pinkpurple
    • magenta
    • gray
    const { red } = getPresetColors();
    
    console.log(red.light);
    console.log(red.dark);
    console.log(red.primary);

    getRgbStr(color: string)

    For a given color, get the r, g, b value in string

    getRgbStr('#F53F3F') // 245,63,63