colors-generate v1.0.1

主题色彩生成算法

An awesome theme color generation scheme.

简介

参考 Ant Design 色彩规范，输入一个主色，可以根据主色生成一系列的颜色阶梯，帮助前端和设计师更好地选色。

安装

• CDN : version 字段替换为 1.0.1 | 1.0.2 等，版本信息可以见官网

  • https://web-cdn.agora.io/colors-generate/colors-generate@version.es.js
  • https://web-cdn.agora.io/colors-generate/colors-generate@version.umd.js

• NPM :

  • npm install colors-generate --save -dev
  • yarn add colors-generate --dev

使用

• ESM

// 可参考demo-esm.html
<script type="module">
  import { generate } from 'https://web-cdn.agora.io/colors-generate/colors-generate@1.0.0.es.js'

  // ['#e6f9ff', '#ade9ff', '#85daff', '#5cc9ff', '#33b4ff', '#099dfd', '#0079d6', '#005eb0', '#00458a', '#002e63']
  console.log("colors", generate('#099dfd'));
</script>

• UMD - Browser

// 可参考demo-umd.html
<script src="https://web-cdn.agora.io/colors-generate/colors-generate@1.0.0.umd.js"></script>
<script>
  // ['#e6f9ff', '#ade9ff', '#85daff', '#5cc9ff', '#33b4ff', '#099dfd', '#0079d6', '#005eb0', '#00458a', '#002e63']
  console.log("colors", ColorsGenerate('#099dfd'));
</script>

• UMD - Commonjs

// 可参考examples/App.vue
import { generate } from 'colors-generate';

// ['#e6f9ff', '#ade9ff', '#85daff', '#5cc9ff', '#33b4ff', '#099dfd', '#0079d6', '#005eb0', '#00458a', '#002e63']
console.log("colors", generate('#099dfd'));

本地调试

yarn install
yarn start:example

打开 http://localhost:3000 查看

相关链接

• 官网
• Ant Design