@hairy/palette 0.3.2 → 0.3.4

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-PRESENT Mr Mao<https://github.com/TuiMao233>
+Copyright (c) 2019-PRESENT Hairyf<https://github.com/hairyf>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.cjs.js

@@ -0,0 +1,153 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  blend: () => blend,
+  brightness: () => brightness,
+  changeAlpha: () => changeAlpha,
+  colorPalette: () => colorPalette,
+  hexToRgb: () => hexToRgb,
+  hsvToRgb: () => hsvToRgb,
+  lighten: () => lighten,
+  luminance: () => luminance,
+  rgbToHex: () => rgbToHex,
+  rgbToHsv: () => rgbToHsv,
+  textToRgb: () => textToRgb
+});
+module.exports = __toCommonJS(src_exports);
+var import_colord = require("colord");
+var import_a11y = __toESM(require("colord/plugins/a11y"));
+var import_mix = __toESM(require("colord/plugins/mix"));
+(0, import_colord.extend)([import_a11y.default, import_mix.default]);
+function rgbToHex({ r, g, b, a }) {
+  return (0, import_colord.colord)({ r, g, b, a }).toHex();
+}
+function hexToRgb(hex) {
+  return (0, import_colord.colord)(hex).toRgb();
+}
+function hsvToRgb({ h, s, v, a }) {
+  return (0, import_colord.colord)({ h, s, v, a }).toRgb();
+}
+function rgbToHsv({ r, g, b, a }) {
+  return (0, import_colord.colord)({ r, b, g, a }).toHsv();
+}
+function textToRgb(str) {
+  return (0, import_colord.colord)(str).toRgb();
+}
+function lighten(color, percent) {
+  return (0, import_colord.colord)(color).lighten(percent).toHex();
+}
+function luminance(color) {
+  return (0, import_colord.colord)(color).luminance();
+}
+function brightness(color) {
+  return (0, import_colord.colord)(color).brightness();
+}
+function blend(fgColor, bgColor) {
+  return (0, import_colord.colord)(fgColor).mix(bgColor);
+}
+function changeAlpha(color, alpha) {
+  return (0, import_colord.colord)(color).alpha(alpha).toHex();
+}
+var hueStep = 2;
+var saturationStep = 16;
+var saturationStep2 = 5;
+var brightnessStep1 = 5;
+var brightnessStep2 = 15;
+var lightColorCount = 5;
+var darkColorCount = 4;
+function colorPalette(color, index) {
+  if (typeof color !== "string" && (!color || color.r === void 0))
+    throw new TypeError("Expected a string or a {r, g, b} object as color");
+  const rgb = typeof color === "string" ? textToRgb(color) : color;
+  const oldHsv = (0, import_colord.colord)(rgb).toHsv();
+  if (index === 6)
+    return rgbToHex(rgb);
+  const light = index < 6;
+  const i = light ? lightColorCount + 1 - index : index - lightColorCount - 1;
+  const newHsv = {
+    h: hue(oldHsv, i, light),
+    s: saturation(oldHsv, i, light),
+    v: value(oldHsv, i, light),
+    a: oldHsv.a
+  };
+  return (0, import_colord.colord)(newHsv).toHex();
+}
+function hue(hsv, i, isLight) {
+  let hue2;
+  if (hsv.h >= 60 && hsv.h <= 240) {
+    hue2 = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+  } else {
+    hue2 = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+  }
+  if (hue2 < 0)
+    hue2 += 360;
+  else if (hue2 >= 360)
+    hue2 -= 360;
+  return hue2;
+}
+function saturation(hsv, i, isLight) {
+  let saturation2;
+  if (isLight)
+    saturation2 = hsv.s - saturationStep * i;
+  else if (i === darkColorCount)
+    saturation2 = hsv.s + saturationStep;
+  else
+    saturation2 = hsv.s + saturationStep2 * i;
+  if (saturation2 > 100)
+    saturation2 = 100;
+  if (isLight && i === lightColorCount && saturation2 > 10)
+    saturation2 = 10;
+  if (saturation2 < 6)
+    saturation2 = 6;
+  return saturation2;
+}
+function value(hsv, i, isLight) {
+  let value2;
+  value2 = isLight ? hsv.v + brightnessStep1 * i : hsv.v - brightnessStep2 * i;
+  if (value2 > 100)
+    value2 = 100;
+  return value2;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  blend,
+  brightness,
+  changeAlpha,
+  colorPalette,
+  hexToRgb,
+  hsvToRgb,
+  lighten,
+  luminance,
+  rgbToHex,
+  rgbToHsv,
+  textToRgb
+});

package/{index.d.ts → dist/index.d.ts}

@@ -1,14 +1,17 @@
-declare type RGBA = Record<'r' | 'g' | 'b' | 'a', number>;
-declare type RGB = Record<'r' | 'g' | 'b', number> & {
+import * as colord from 'colord';
+import { RgbaColor, HsvaColor, AnyColor } from 'colord';
+
+type RGBA = Record<'r' | 'g' | 'b' | 'a', number>;
+type RGB = Record<'r' | 'g' | 'b', number> & {
     a?: number;
 };
-declare type HEX = string;
-declare type HSVA = Record<'h' | 's' | 'v' | 'a', number>;
-declare type RGBA_TEXT = string;
-declare type HEX_TEXT = string;
-declare type HSVA_TEXT = string;
-declare type COLOR = RGBA_TEXT | HEX_TEXT | HSVA_TEXT;
-declare type PALETTE_INDEXES = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+type HexColor = string;
+type HSVA = Record<'h' | 's' | 'v' | 'a', number>;
+type RGBA_TEXT = string;
+type HEX_TEXT = string;
+type HSVA_TEXT = string;
+type COLOR = RGBA_TEXT | HEX_TEXT | HSVA_TEXT;
+type PALETTE_INDEXES = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 /**
  * Converts a RGB/A color
  *
@@ -20,7 +23,7 @@ declare type PALETTE_INDEXES = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
  *
  * If Alpha channel is present in the original object it will be present also in the output.
  */
-declare function rgbToHex({ r, g, b, a }: RGB): HEX;
+declare function rgbToHex({ r, g, b, a }: RgbaColor): HexColor;
 /**
  * Converts a HEX/A color
  *
@@ -32,7 +35,7 @@ declare function rgbToHex({ r, g, b, a }: RGB): HEX;
  *
  * If Alpha channel is present in the original object it will be present also in the output.
  */
-declare function hexToRgb(hex: HEX): RGB;
+declare function hexToRgb(hex: HexColor): RgbaColor;
 /**
  * Converts a HEX/A color
  *
@@ -44,7 +47,7 @@ declare function hexToRgb(hex: HEX): RGB;
  *
  * If Alpha channel is present in the original object it will be present also in the output.
  */
-declare function hsvToRgb({ h, s, v, a }: HSVA): RGBA;
+declare function hsvToRgb({ h, s, v, a }: HsvaColor): RgbaColor;
 /**
  * Converts a RGB/A color
  *
@@ -52,11 +55,11 @@ declare function hsvToRgb({ h, s, v, a }: HSVA): RGBA;
  *
  * to its HSV/A representation as an
  *
- * Object (`{ h: [0-360], s: [0-100], v: [0-100}, a: [0-100]}`).
+ * Object (`{ h: [0-360], s: [0-100], v: [0-100}, a: [0-1]}`).
  *
  * If Alpha channel is present in the original object it will be present also in the output.
  */
-declare function rgbToHsv({ r, g, b, a }: RGB): HSVA;
+declare function rgbToHsv({ r, g, b, a }: RgbaColor): HsvaColor;
 /**
  * Converts a HEX/A color
  *
@@ -68,42 +71,31 @@ declare function rgbToHsv({ r, g, b, a }: RGB): HSVA;
  *
  * If Alpha channel is present in the original object it will be present also in the output.
  */
-declare function textToRgb(str: COLOR): RGB;
+declare function textToRgb(str: AnyColor): RgbaColor;
 /**
  * Lighten the `color` (if `percent` is positive) or darken it (if `percent` is negative).
  *
- * Accepts a HEX/A String or a RGB/A String as color and a percent (0 to 100 or -100 to 0) of lighten/darken to be applied to the   `color`. Returns a HEX String representation of the calculated `color`.
+ * Accepts a HEX/A String or a RGB/A String as color and a percent (0 to 1 or -1 to 0) of lighten/darken to be applied to the   `color`. Returns a HEX String representation of the calculated `color`.
  */
-declare function lighten(color: COLOR, percent: number): string;
+declare function lighten(color: AnyColor, percent: number): string;
 /**
  * Calculates the [relative luminance](https://www.w3.org/TR/WCAG20/#relativeluminancedef) of the `color`.
  *
  * Accepts a HEX/A String, a RGB/A String or a RGB/A Object as `color`. Returns a value between 0 and 1.
  */
-declare function luminosity(color: COLOR | RGB): number;
+declare function luminance(color: AnyColor): number;
 /**
  * Calculates the [color contrast](https://www.w3.org/TR/AERT/#color-contrast) of the `color`.
  *
  * Accepts a HEX/A String, a RGB/A String or a RGB/A Object as `color`. Returns a value between 0 and 1.
  */
-declare function brightness(color: COLOR | RGB): number;
+declare function brightness(color: AnyColor): number;
 /**
  * Calculates the [blend](https://www.w3.org/TR/compositing-1/#simplealphacompositing) of two colors.
  *
  * Accepts a HEX/A String or a RGB/A Object as `fgColor`/`bgColor`. If the alpha channel of the `fgColor` is completely opaque, then the result will be the `fgColor`. If the alpha channel of the `bgColor` is completely opaque, then the resulting blended color will also be opaque. Returns the same type as input for fgColor.
  */
-declare function blend(fgColor: COLOR | RGB, bgColor: COLOR | RGB): string | {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-};
-/**
- * Increments or decrements the alpha of a string color.
- *
- * Accepts a HEX/A String as color and a number between -1 and 1 (including edges) as offset. Use a negative value to decrement and a positive number to increment (ex: blendAlpha('#ff0000', -0.1) to decrement alpha by 10%). Returns HEX/A String.
- */
-declare function blendAlpha(color: COLOR, offset: number): string;
+declare function blend(fgColor: AnyColor, bgColor: AnyColor): colord.Colord;
 /**
  * Change color transparency
  */
@@ -114,6 +106,6 @@ declare function changeAlpha(color: COLOR, alpha: number): string;
  * @param index - 调色板的对应的色号(6为主色号)
  * @description 算法实现从ant-design调色板算法中借鉴 https://github.com/ant-design/ant-design/blob/master/components/style/color/colorPalette.less
  */
-declare function colorPalette(color: COLOR | RGB, index: PALETTE_INDEXES): string;
+declare function colorPalette(color: string | RgbaColor, index: PALETTE_INDEXES): string;
 
-export { COLOR, HEX, HEX_TEXT, HSVA, HSVA_TEXT, PALETTE_INDEXES, RGB, RGBA, RGBA_TEXT, blend, blendAlpha, brightness, changeAlpha, colorPalette, hexToRgb, hsvToRgb, lighten, luminosity, rgbToHex, rgbToHsv, textToRgb };
+export { COLOR, HEX_TEXT, HSVA, HSVA_TEXT, HexColor, PALETTE_INDEXES, RGB, RGBA, RGBA_TEXT, blend, brightness, changeAlpha, colorPalette, hexToRgb, hsvToRgb, lighten, luminance, rgbToHex, rgbToHsv, textToRgb };

package/dist/index.esm.js

@@ -0,0 +1,108 @@
+// src/index.ts
+import { colord, extend } from "colord";
+import a11yPlugin from "colord/plugins/a11y";
+import mixPlugin from "colord/plugins/mix";
+extend([a11yPlugin, mixPlugin]);
+function rgbToHex({ r, g, b, a }) {
+  return colord({ r, g, b, a }).toHex();
+}
+function hexToRgb(hex) {
+  return colord(hex).toRgb();
+}
+function hsvToRgb({ h, s, v, a }) {
+  return colord({ h, s, v, a }).toRgb();
+}
+function rgbToHsv({ r, g, b, a }) {
+  return colord({ r, b, g, a }).toHsv();
+}
+function textToRgb(str) {
+  return colord(str).toRgb();
+}
+function lighten(color, percent) {
+  return colord(color).lighten(percent).toHex();
+}
+function luminance(color) {
+  return colord(color).luminance();
+}
+function brightness(color) {
+  return colord(color).brightness();
+}
+function blend(fgColor, bgColor) {
+  return colord(fgColor).mix(bgColor);
+}
+function changeAlpha(color, alpha) {
+  return colord(color).alpha(alpha).toHex();
+}
+var hueStep = 2;
+var saturationStep = 16;
+var saturationStep2 = 5;
+var brightnessStep1 = 5;
+var brightnessStep2 = 15;
+var lightColorCount = 5;
+var darkColorCount = 4;
+function colorPalette(color, index) {
+  if (typeof color !== "string" && (!color || color.r === void 0))
+    throw new TypeError("Expected a string or a {r, g, b} object as color");
+  const rgb = typeof color === "string" ? textToRgb(color) : color;
+  const oldHsv = colord(rgb).toHsv();
+  if (index === 6)
+    return rgbToHex(rgb);
+  const light = index < 6;
+  const i = light ? lightColorCount + 1 - index : index - lightColorCount - 1;
+  const newHsv = {
+    h: hue(oldHsv, i, light),
+    s: saturation(oldHsv, i, light),
+    v: value(oldHsv, i, light),
+    a: oldHsv.a
+  };
+  return colord(newHsv).toHex();
+}
+function hue(hsv, i, isLight) {
+  let hue2;
+  if (hsv.h >= 60 && hsv.h <= 240) {
+    hue2 = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+  } else {
+    hue2 = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+  }
+  if (hue2 < 0)
+    hue2 += 360;
+  else if (hue2 >= 360)
+    hue2 -= 360;
+  return hue2;
+}
+function saturation(hsv, i, isLight) {
+  let saturation2;
+  if (isLight)
+    saturation2 = hsv.s - saturationStep * i;
+  else if (i === darkColorCount)
+    saturation2 = hsv.s + saturationStep;
+  else
+    saturation2 = hsv.s + saturationStep2 * i;
+  if (saturation2 > 100)
+    saturation2 = 100;
+  if (isLight && i === lightColorCount && saturation2 > 10)
+    saturation2 = 10;
+  if (saturation2 < 6)
+    saturation2 = 6;
+  return saturation2;
+}
+function value(hsv, i, isLight) {
+  let value2;
+  value2 = isLight ? hsv.v + brightnessStep1 * i : hsv.v - brightnessStep2 * i;
+  if (value2 > 100)
+    value2 = 100;
+  return value2;
+}
+export {
+  blend,
+  brightness,
+  changeAlpha,
+  colorPalette,
+  hexToRgb,
+  hsvToRgb,
+  lighten,
+  luminance,
+  rgbToHex,
+  rgbToHsv,
+  textToRgb
+};

package/package.json

@@ -1,21 +1,27 @@
 {
   "name": "@hairy/palette",
-  "version": "0.3.2",
-  "main": "index.cjs.js",
+  "version": "0.3.4",
+  "license": "MIT",
+  "main": "./dist/index.cjs.js",
   "publishConfig": {
-    "jsdelivr": "./index.iife.min.js"
+    "jsdelivr": "./dist/index.iife.min.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "colord": "^2.9.3"
   },
-  "license": "MIT",
   "scripts": {
-    "build": "hairy build --esllpkg --type"
+    "build": "ptsup src/index.ts --dts"
   },
-  "types": "./index.d.ts",
-  "module": "./index.esm.js",
-  "unpkg": "./index.iife.min.js",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.esm.js",
+  "unpkg": "./dist/index.iife.min.js",
   "exports": {
     ".": {
-      "import": "./index.esm.js",
-      "require": "./index.cjs.js"
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
     },
     "./*": "./*"
   }

package/src/index.ts

@@ -0,0 +1,238 @@
+/* eslint-disable no-void */
+import type { AnyColor, HsvaColor, RgbaColor } from 'colord'
+import { colord, extend } from 'colord'
+import a11yPlugin from 'colord/plugins/a11y'
+import mixPlugin from 'colord/plugins/mix'
+
+extend([a11yPlugin, mixPlugin])
+export type RGBA = Record<'r' | 'g' | 'b' | 'a', number>
+export type RGB = Record<'r' | 'g' | 'b', number> & { a?: number }
+export type HexColor = string
+export type HSVA = Record<'h' | 's' | 'v' | 'a', number>
+
+export type RGBA_TEXT = string
+export type HEX_TEXT = string
+export type HSVA_TEXT = string
+export type COLOR = RGBA_TEXT | HEX_TEXT | HSVA_TEXT
+export type PALETTE_INDEXES = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
+
+/**
+ * Converts a RGB/A color
+ *
+ * Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`)
+ *
+ * to its HEX/A representation as a
+ *
+ * String (`#RRGGBB<AA>`).
+ *
+ * If Alpha channel is present in the original object it will be present also in the output.
+ */
+export function rgbToHex({ r, g, b, a }: RgbaColor): HexColor {
+  return colord({ r, g, b, a }).toHex()
+}
+
+/**
+ * Converts a HEX/A color
+ *
+ * String (`#RRGGBB<AA>`) or a RGB/A color String(`rgb(R, G, B<, A>)`)
+ *
+ * to its RGB/A representation as an
+ *
+ * Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`).
+ *
+ * If Alpha channel is present in the original object it will be present also in the output.
+ */
+export function hexToRgb(hex: HexColor): RgbaColor {
+  return colord(hex).toRgb()
+}
+
+/**
+ * Converts a HEX/A color
+ *
+ * String (`#RRGGBB<AA>`)
+ *
+ * to its RGB/A representation as an
+ *
+ * Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`) .
+ *
+ * If Alpha channel is present in the original object it will be present also in the output.
+ */
+export function hsvToRgb({ h, s, v, a }: HsvaColor): RgbaColor {
+  return colord({ h, s, v, a }).toRgb()
+}
+
+/**
+ * Converts a RGB/A color
+ *
+ * Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`)
+ *
+ * to its HSV/A representation as an
+ *
+ * Object (`{ h: [0-360], s: [0-100], v: [0-100}, a: [0-1]}`).
+ *
+ * If Alpha channel is present in the original object it will be present also in the output.
+ */
+export function rgbToHsv({ r, g, b, a }: RgbaColor): HsvaColor {
+  return colord({ r, b, g, a }).toHsv()
+}
+
+/**
+ * Converts a HEX/A color
+ *
+ * String (`#RRGGBB<AA>`) or a RGB/A color String(`rgb(R, G, B<, A>)`)
+ *
+ * to its RGB/A representation as an
+ *
+ * Object (`{ r: [0-255], g: [0-255], b: [0-255}<, a: [0-100]>}`).
+ *
+ * If Alpha channel is present in the original object it will be present also in the output.
+ */
+export function textToRgb(str: AnyColor): RgbaColor {
+  return colord(str).toRgb()
+}
+
+/**
+ * Lighten the `color` (if `percent` is positive) or darken it (if `percent` is negative).
+ *
+ * Accepts a HEX/A String or a RGB/A String as color and a percent (0 to 1 or -1 to 0) of lighten/darken to be applied to the   `color`. Returns a HEX String representation of the calculated `color`.
+ */
+export function lighten(color: AnyColor, percent: number) {
+  return colord(color).lighten(percent).toHex()
+}
+/**
+ * Calculates the [relative luminance](https://www.w3.org/TR/WCAG20/#relativeluminancedef) of the `color`.
+ *
+ * Accepts a HEX/A String, a RGB/A String or a RGB/A Object as `color`. Returns a value between 0 and 1.
+ */
+export function luminance(color: AnyColor) {
+  return colord(color).luminance()
+}
+/**
+ * Calculates the [color contrast](https://www.w3.org/TR/AERT/#color-contrast) of the `color`.
+ *
+ * Accepts a HEX/A String, a RGB/A String or a RGB/A Object as `color`. Returns a value between 0 and 1.
+ */
+export function brightness(color: AnyColor) {
+  return colord(color).brightness()
+}
+
+/**
+ * Calculates the [blend](https://www.w3.org/TR/compositing-1/#simplealphacompositing) of two colors.
+ *
+ * Accepts a HEX/A String or a RGB/A Object as `fgColor`/`bgColor`. If the alpha channel of the `fgColor` is completely opaque, then the result will be the `fgColor`. If the alpha channel of the `bgColor` is completely opaque, then the resulting blended color will also be opaque. Returns the same type as input for fgColor.
+ */
+export function blend(fgColor: AnyColor, bgColor: AnyColor) {
+  return colord(fgColor).mix(bgColor)
+}
+
+/**
+ * Change color transparency
+ */
+export function changeAlpha(color: COLOR, alpha: number) {
+  return colord(color).alpha(alpha).toHex()
+}
+
+const hueStep = 2
+const saturationStep = 16
+const saturationStep2 = 5
+const brightnessStep1 = 5
+const brightnessStep2 = 15
+const lightColorCount = 5
+const darkColorCount = 4
+
+/**
+ * 根据颜色获取调色板颜色(从左至右颜色从浅到深，6为主色号)
+ * @param color - 颜色
+ * @param index - 调色板的对应的色号(6为主色号)
+ * @description 算法实现从ant-design调色板算法中借鉴 https://github.com/ant-design/ant-design/blob/master/components/style/color/colorPalette.less
+ */
+export function colorPalette(color: string | RgbaColor, index: PALETTE_INDEXES) {
+  if (typeof color !== 'string' && (!color || color.r === void 0))
+    throw new TypeError('Expected a string or a {r, g, b} object as color')
+
+  const rgb = typeof color === 'string' ? textToRgb(color) : color
+  const oldHsv = colord(rgb).toHsv()
+
+  if (index === 6)
+    return rgbToHex(rgb)
+
+  const light = index < 6
+  const i = light ? lightColorCount + 1 - index : index - lightColorCount - 1
+  const newHsv = {
+    h: hue(oldHsv, i, light),
+    s: saturation(oldHsv, i, light),
+    v: value(oldHsv, i, light),
+    a: oldHsv.a,
+  }
+  return colord(newHsv).toHex()
+}
+
+/**
+ * 获取色相渐变
+ * @param hsv - hsv格式颜色值
+ * @param i - 与6的相对距离
+ * @param isLight - 是否是亮颜色
+ */
+function hue(hsv: HsvaColor, i: number, isLight: boolean) {
+  let hue: number
+  if (hsv.h >= 60 && hsv.h <= 240) {
+    // 冷色调
+    // 减淡变亮 色相顺时针旋转 更暖
+    // 加深变暗 色相逆时针旋转 更冷
+    hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i
+  }
+  else {
+    // 暖色调
+    // 减淡变亮 色相逆时针旋转 更暖
+    // 加深变暗 色相顺时针旋转 更冷
+    hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i
+  }
+  if (hue < 0)
+    hue += 360
+  else if (hue >= 360)
+    hue -= 360
+
+  return hue
+}
+
+/**
+ * 获取饱和度渐变
+ * @param hsv - hsv格式颜色值
+ * @param i - 与6的相对距离
+ * @param isLight - 是否是亮颜色
+ */
+function saturation(hsv: HsvaColor, i: number, isLight: boolean) {
+  let saturation: number
+  if (isLight)
+    saturation = hsv.s - saturationStep * i
+  else if (i === darkColorCount)
+    saturation = hsv.s + saturationStep
+  else saturation = hsv.s + saturationStep2 * i
+
+  if (saturation > 100)
+    saturation = 100
+
+  if (isLight && i === lightColorCount && saturation > 10)
+    saturation = 10
+
+  if (saturation < 6)
+    saturation = 6
+
+  return saturation
+}
+
+/**
+ * 获取明度渐变
+ * @param hsv - hsv格式颜色值
+ * @param i - 与6的相对距离
+ * @param isLight - 是否是亮颜色
+ */
+function value(hsv: HsvaColor, i: number, isLight: boolean) {
+  let value: number
+  value = isLight ? hsv.v + brightnessStep1 * i : hsv.v - brightnessStep2 * i
+
+  if (value > 100)
+    value = 100
+
+  return value
+}