https://github.com/arco-design/color

ArcoDesign color utils
https://github.com/arco-design/color

arco arco-design color palette

Last synced: about 2 months ago
JSON representation

ArcoDesign color utils

• Host: GitHub
• URL: https://github.com/arco-design/color
• Owner: arco-design
• License: mit
• Created: 2021-10-25T04:02:17.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-03T06:56:00.000Z (almost 2 years ago)
• Last Synced: 2024-04-16T05:12:59.065Z (9 months ago)
• Topics: arco, arco-design, color, palette
• Language: JavaScript
• Homepage: https://arco.design/palette
• Size: 14.6 KB
• Stars: 38
• Watchers: 2
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

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

```bash

npm i @arco-design/color

```

```js

import { generate, getPresetColors } from '@arco-design/color';

console.log(generate('#123456'));

console.log(getPresetColors());

// {

//   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`

```js

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

```js

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

```