├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── CHANGELOG.md
├── LICENSE
├── README.md
├── bin
├── color-generate.js
├── core.js
├── generate.js
├── index.js
└── util.js
├── demo-esm.html
├── demo-umd.html
├── examples
├── App.vue
├── env.d.ts
├── main.ts
└── tsconfig.json
├── index.html
├── package.json
├── pnpm-lock.yaml
├── src
├── color-generate.ts
├── core.ts
├── generate.ts
├── index.ts
├── typings.d.ts
└── util.ts
├── templates
├── color.less.tpl
└── color.scss.tpl
├── tsconfig.json
└── vite.config.ts
/.eslintignore:
--------------------------------------------------------------------------------
1 | typings
2 | dist
3 | bin
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: '@typescript-eslint/parser',
3 | parserOptions: {
4 | ecmaVersion: 2018,
5 | sourceType: 'module',
6 | ecmaFeatures: {
7 | jsx: true,
8 | },
9 | },
10 | extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
11 | env: {
12 | browser: true,
13 | node: true,
14 | },
15 | rules: {
16 | 'prettier/prettier': 'error',
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 | dist
84 |
85 | # Gatsby files
86 | .cache/
87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
88 | # https://nextjs.org/blog/next-9-1#public-directory-support
89 | # public
90 |
91 | # vuepress build output
92 | .vuepress/dist
93 |
94 | # Serverless directories
95 | .serverless/
96 |
97 | # FuseBox cache
98 | .fusebox/
99 |
100 | # DynamoDB Local files
101 | .dynamodb/
102 |
103 | # TernJS port file
104 | .tern-port
105 |
106 | # package publish
107 | publish.sh
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | semi: true,
3 | singleQuote: true,
4 | trailingComma: 'all',
5 | printWidth: 120,
6 | tabWidth: 2,
7 | };
8 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | ## 1.0.1
4 | *2021-11-04*
5 | - 🚀 Launch
6 |
7 | ## 1.0.2
8 | *2021-11-04*
9 | - fix cli bugs
10 |
11 | ## 1.0.3
12 | *2021-11-04*
13 | - change windows.ColorsGenerate to windows.ColorGenerate in the broswer
14 | - add [Documentation](https://color-generate-docs.sh2.agoralab.co/#/)
15 |
16 | ## 1.0.4
17 | *2021-11-18*
18 | - fix some bug
19 |
20 | ## 1.0.5
21 | *2021-11-19*
22 | - add `color-generate --file` on the cli
23 |
24 | ## 1.0.6
25 | *2021-11-19*
26 | - add templates
27 |
28 | ## 1.0.7
29 | *2021-11-19*
30 | - fix some bug
31 |
32 | ## 1.0.8
33 | *2021-11-19*
34 | - add cli demo
35 | - fix cli bugs
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013-present, Yuxi (Evan) You
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Color Generate
2 |
3 | 
4 | 
5 | 
6 | 
7 |
8 |
9 | Referring to [`Ant Design`](https://ant.design/docs/spec/colors-cn), enter a primary color to generate color steps.
10 |
11 | Sorry, this library has been suspended for some reason, You can see [Docs](https://color-generate-docs.sh2.agoralab.co) to use it
12 |
13 | ## Documentation
14 |
15 | Docs are available at [`here`](https://color-generate-docs.sh2.agoralab.co)
16 |
17 | ## Demo
18 |
19 | 
20 |
21 | 
22 |
23 | ## Installation
24 |
25 | ### CLI
26 |
27 | ```javascript
28 | # npm
29 | $ sudo npm install color-generate -g
30 |
31 | # pnpm
32 | $ pnpm add color-generate -g
33 | ```
34 |
35 | ### YARN | NPM | PNPM
36 |
37 | ```javascript
38 | yarn add color-generate
39 |
40 | npm install color-generate
41 |
42 | pnpm add color-generate
43 | ```
44 |
45 | ### CDN
46 |
47 | - **`unpkg`**
48 | - `https://unpkg.com/color-generate/dist/color-generate.umd.js`
49 | - `https://unpkg.com/color-generate/dist/color-generate.es.js`
50 |
51 | - **`jsdelivr`**
52 | - `https://cdn.jsdelivr.net/npm/color-generate/dist/color-generate.umd.js`
53 | - `https://cdn.jsdelivr.net/npm/color-generate/dist/color-generate.es.js`
54 |
55 | ## Examples
56 |
57 | ### CLI
58 |
59 | ```bash
60 | # help
61 | $ color-generate -h
62 |
63 | # just print color
64 | $ color-generate g -c 099dfd
65 |
66 | # generate file Sass/Less
67 | $ color-generate g -c 099dfd -f
68 | ```
69 |
70 | ### Module
71 |
72 | ```javascript
73 | import { generate } from 'color-generate'
74 | ```
75 |
76 | ### Broswer
77 |
78 | ```javascript
79 |
80 |
81 |
85 | ```
86 |
87 | ## Links
88 |
89 | - [Documentation](https://color-generate-docs.sh2.agoralab.co/#/)
90 | - [ChangeLog](https://github.com/Johnson-hd/color-generate/blob/master/CHANGELOG.md)
91 | - [Ant Design](https://ant.design/docs/spec/colors-cn)
92 |
--------------------------------------------------------------------------------
/bin/color-generate.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | "use strict";
3 | var __importDefault = (this && this.__importDefault) || function (mod) {
4 | return (mod && mod.__esModule) ? mod : { "default": mod };
5 | };
6 | Object.defineProperty(exports, "__esModule", { value: true });
7 | var commander_1 = require("commander");
8 | var inquirer_1 = __importDefault(require("inquirer"));
9 | var chalk_1 = __importDefault(require("chalk"));
10 | var generate_1 = require("./generate");
11 | var util_1 = require("./util");
12 | var package_json_1 = __importDefault(require("../package.json"));
13 | var program = new commander_1.Command();
14 | var promps = [
15 | {
16 | type: 'list',
17 | name: 'cssPreProcessor',
18 | message: 'Pick a CSS pre-processor',
19 | choices: [
20 | {
21 | name: 'Sass/SCSS',
22 | value: 'sass',
23 | },
24 | {
25 | name: 'Less',
26 | value: 'less',
27 | },
28 | ],
29 | },
30 | ];
31 | program
32 | .version(package_json_1.default.version, '-v --version')
33 | .command('generate')
34 | .alias('g')
35 | .description('generate color steps')
36 | .option('-c --color ', 'just print color')
37 | .option('-f --file', 'generate file')
38 | .action(function (option) {
39 | if (!option.color) {
40 | console.log(chalk_1.default.redBright('color option is must\nif you want primary color #099dfd, you should write `color-generate g -c 099dfd`\nif you want generate file, you should write `color-generate g -c 099dfd -f`'));
41 | return;
42 | }
43 | var colors = (0, generate_1.generate)("#" + option.color);
44 | if (!option.file) {
45 | console.log(chalk_1.default.blueBright(colors));
46 | return;
47 | }
48 | inquirer_1.default.prompt(promps).then(function (answers) {
49 | switch (answers.cssPreProcessor) {
50 | case 'sass':
51 | (0, util_1.generateFile)(colors, 'color.scss');
52 | break;
53 | case 'less':
54 | (0, util_1.generateFile)(colors, 'color.less');
55 | break;
56 | }
57 | });
58 | });
59 | program.command('*').action(function () {
60 | console.error('\nUnknown command');
61 | program.outputHelp();
62 | });
63 | program.parse(process.argv);
64 |
--------------------------------------------------------------------------------
/bin/core.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | exports.getValue = exports.getSaturation = exports.getHue = exports.behindBrightnessStep = exports.topBrightnessLightStep = exports.behindSaturationStep = exports.topSaturationStep = exports.behindColorCount = exports.topColorCount = exports.hueStep = void 0;
4 | // 颜色从1-10，主色为第6个，前面有5个浅色，后面有4个深色
5 | exports.hueStep = 2; // 色相阶梯
6 | exports.topColorCount = 5; // 主色前数量，浅色部分
7 | exports.behindColorCount = 4; // 主色后数量，深色部分
8 | exports.topSaturationStep = 0.16; // 饱和度阶梯，主色前(浅色部分)
9 | exports.behindSaturationStep = 0.05; // 饱和度阶梯，主色后(深色部分)
10 | exports.topBrightnessLightStep = 0.05; // 亮度阶梯，主色前(浅色部分)
11 | exports.behindBrightnessStep = 0.15; // 亮度阶梯，主色后(深色部分)
12 | /**
13 | * 获取色相
14 | * @param hsv 主色hsv
15 | * @param i index
16 | * @param isTop 是否为主色前，主色前为浅色
17 | * @returns 色相
18 | */
19 | var getHue = function (hsv, i, isTop) {
20 | var hue;
21 | // H: [60, 240]为暖色调，其他为冷色调
22 | if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
23 | // 主色为冷色调
24 | // 1-10色相变化 => 色相从小到大 => 色相逆时针旋转 => 更冷
25 | hue = isTop ? Math.round(hsv.h) - exports.hueStep * i : Math.round(hsv.h) + exports.hueStep * i;
26 | }
27 | else {
28 | // 主色为暖色调
29 | // 1-10色相变化 => 色相从大到小 => 色相顺时针旋转 => 更暖
30 | hue = isTop ? Math.round(hsv.h) + exports.hueStep * i : Math.round(hsv.h) - exports.hueStep * i;
31 | }
32 | (hue < 0 || hue >= 360) && (hue = Math.abs(Math.abs(hue) - 360));
33 | return hue;
34 | };
35 | exports.getHue = getHue;
36 | /**
37 | * 获取饱和度
38 | * 1-10饱和度变化 => 饱和度从小到大
39 | * @param hsv 主色hsv
40 | * @param i index
41 | * @param isTop 是否为主色前，主色前为浅色
42 | * @returns 饱和度
43 | */
44 | var getSaturation = function (hsv, i, isTop) {
45 | // 不改变灰色的饱和度
46 | if (hsv.h === 0 && hsv.s === 0) {
47 | return hsv.s;
48 | }
49 | var saturation = isTop ? hsv.s - exports.topSaturationStep * i : hsv.s + exports.behindSaturationStep * i;
50 | saturation > 1 && (saturation = 1);
51 | saturation < 0.06 && (saturation = 0.06);
52 | // 主色前1个饱和度限制在 0.06-0.1 之间
53 | if (isTop && i === exports.topColorCount && saturation > 0.1) {
54 | saturation = 0.1;
55 | }
56 | return Number(saturation.toFixed(2));
57 | };
58 | exports.getSaturation = getSaturation;
59 | /**
60 | * 获取明度
61 | * HSV中V控制纯色中混入黑色的量，量越大，黑色越少，明度越高
62 | * 1-10明度变化 => 明度从大到小 => 明度越来越小
63 | * @param hsv 主色hsv
64 | * @param i index
65 | * @param isTop 是否为主色前，主色前为浅色
66 | * @returns 明度
67 | */
68 | var getValue = function (hsv, i, isTop) {
69 | var value;
70 | value = isTop ? hsv.v + exports.topBrightnessLightStep * i : hsv.v - exports.behindBrightnessStep * i;
71 | value > 1 && (value = 1);
72 | return Number(value.toFixed(2));
73 | };
74 | exports.getValue = getValue;
75 |
--------------------------------------------------------------------------------
/bin/generate.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __importDefault = (this && this.__importDefault) || function (mod) {
3 | return (mod && mod.__esModule) ? mod : { "default": mod };
4 | };
5 | Object.defineProperty(exports, "__esModule", { value: true });
6 | exports.generate = void 0;
7 | var tinycolor2_1 = __importDefault(require("tinycolor2"));
8 | var core_1 = require("./core");
9 | var generate = function (primaryColor) {
10 | var colors = [];
11 | var hsv = (0, tinycolor2_1.default)(primaryColor).toHsv();
12 | // 主色前
13 | for (var i = core_1.topColorCount; i > 0; i -= 1) {
14 | var color = (0, tinycolor2_1.default)({
15 | h: (0, core_1.getHue)(hsv, i, true),
16 | s: (0, core_1.getSaturation)(hsv, i, true),
17 | v: (0, core_1.getValue)(hsv, i, true),
18 | }).toHexString();
19 | colors.push(color);
20 | }
21 | // 主色
22 | colors.push(primaryColor);
23 | // 主色后
24 | for (var i = 1; i <= core_1.behindColorCount; i += 1) {
25 | var color = (0, tinycolor2_1.default)({
26 | h: (0, core_1.getHue)(hsv, i),
27 | s: (0, core_1.getSaturation)(hsv, i),
28 | v: (0, core_1.getValue)(hsv, i),
29 | }).toHexString();
30 | colors.push(color);
31 | }
32 | return colors;
33 | };
34 | exports.generate = generate;
35 |
--------------------------------------------------------------------------------
/bin/index.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | exports.generate = void 0;
4 | var generate_1 = require("./generate");
5 | Object.defineProperty(exports, "generate", { enumerable: true, get: function () { return generate_1.generate; } });
6 | if (typeof window !== 'undefined' && window.ColorGenerate) {
7 | window.ColorGenerate = generate_1.generate;
8 | }
9 |
--------------------------------------------------------------------------------
/bin/util.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __importDefault = (this && this.__importDefault) || function (mod) {
3 | return (mod && mod.__esModule) ? mod : { "default": mod };
4 | };
5 | Object.defineProperty(exports, "__esModule", { value: true });
6 | exports.generateFile = void 0;
7 | var fs_1 = __importDefault(require("fs"));
8 | var path_1 = __importDefault(require("path"));
9 | var generateFile = function (colors, template) {
10 | try {
11 | var data_1 = fs_1.default.readFileSync(path_1.default.resolve(__dirname, "../templates/" + template + ".tpl"), 'utf8');
12 | colors.map(function (color, index) {
13 | data_1 = data_1.replace(new RegExp("\\$\\{colorPrimary" + index + "\\}", 'mg'), color);
14 | });
15 | fs_1.default.writeFileSync(process.cwd() + "/" + template, data_1);
16 | }
17 | catch (e) {
18 | console.error('generate file error: ', e);
19 | }
20 | };
21 | exports.generateFile = generateFile;
22 |
--------------------------------------------------------------------------------
/demo-esm.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | color-generate
8 |
70 |
71 |
72 |
73 |
ESM MODULE
74 |
75 |
78 |
79 |
80 |
81 |
点击了解更多
82 |
74 |
UMD MODULE - BROWSWER
75 |
76 |
79 |
80 |
81 |
82 |
点击了解更多
83 |
21 |
22 |
主色: {{ primaryColor }}
23 |
24 |
25 |
26 |
27 |
28 | {{ item }}
29 |
30 |
31 |
32 |
点击了解更多
33 |