COLORSEA

颜色操作

示例

示例1： 加深颜色 20%

colorsea('#ff0000').darken(20) // #cc0000
#ff0000
->
#990000

示例2：

你可以进行连续操作: 旋转色相 180度 -> 加深30% -> 减少饱和度 10%

colorsea('#ff0000').spin(180).darken(30).desaturate(10) // Color: #0ac2c2
#ff0000
->
#056161

TIP

每次操作都会返会一个新的Color实例对象

color.lighten()

增加亮度

/**
  * Increase lightness
  * 增加亮度
  * @param amount 光亮度增加百分多少, 默认为5，代表5%
  * @param method 如果填入relative则表示参数amount为相对值
  * @returns Color
  */
color.lighten(amount: number = 5, method?: string) => Color

例：增加亮度10%

colorsea('#338800').lighten(10) // Color: #46bb00
#338800
->
#46bb00

color.darken()

减少光亮度

 /**
   * Reduce lightness
   * 减少光亮度
   * @param amount 光亮度减少百分多少, 默认为5，代表5%
   * @param method 如果填入relative则表示参数amount为相对值
   * @returns Color
   */
color.darken(amount: number = 5, method?: string) => Color

例：减少光亮度10%

colorsea('#338800').darken(10) // Color: #205500
#338800
->
#205500

color.saturate()

增加饱和度

 /**
   * Increase saturation
   * 增加饱和度
   * @param amount 饱和度增加百分多少, 默认为5，代表5%
   * @param method 如果填入relative则表示参数amount为相对值
   * @returns new Color
   */
color.saturate(amount: number = 5, method?: string) => Color

例：增加饱和度30%

colorsea('#E5B7A1').saturate(30) // Color: #f7b18f
#E5B7A1
->
#f7b18f

color.desaturate()

降低饱和度

 /**
   * Reduce saturation
   * 降低饱和度
   * @param amount 饱和度减少百分多少, 默认为5，代表5%
   * @param method 如果填入relative则表示参数amount为相对值
   * @returns new Color
   */
color.desaturate(amount: number = 5, method?: string) => Color

例：降低饱和度50%

colorsea('#00ff00').desaturate(50) // Color: #40bf40
#00ff00
->
#40bf40

color.spin()

旋转色相

/**
  * Rotating hue
  * 旋转色相
  * @param angle rotation angle 旋转角度
  */
color.spin(angle: number) => Color

例：顺时针旋转色相90度

colorsea('#00ff00').spin(90) // Color: #007fff
#00ff00
->
#007fff

color.adjustHue()

color.adjustHue为color.spin的别名，用法与color.spin一致

color.complement()

取得补色，相当于 color.spin(180)

例：

colorsea('#00ff00').complement() // Color: #0f00ff
#00ff00
->
#0f00ff

color.invert()

反色

例：

colorsea('#ff3366').invert() // Color: #00cc99
#ff3366
->
#00cc99
colorsea('#cccccc').invert() // Color: #333333
#cccccc
->
#333333

color.mix()

颜色混合

/**
  * mix color
  * 颜色混合
  * @param color 另一个颜色, 可以是Color实例，也可以是16进制颜色字符串，或者rgb颜色数组
  * @param weight 另一颜色的混合比例，默认值为50即50%
  * @returns Color
  */
color.mix(color: Color, weight: number = 50) => Color

例1：rgb(30, 177, 250)混合60%的hsl(0, 100%, 20%)

colorsea([30, 177, 250]).mix(colorsea.hsl(0, 100, 20), 60) // Color #494764
rgb(30, 177, 250)
.mix(
hsl(0 100% 20%)
, 60) ==
rgb(73, 71, 100)

例2：#CE9FFC 和 #EA5455 混合，各占50%

const color1 = colorsea('#CE9FFC')
const color2 = colorsea('#EA5455')
color1.mix(color2) // Color #dc7aa9
// or color2可以不创建Color实例，直接使用hex字符串
color1.mix('#EA5455') // Color #dc7aa9
// or color2直接传入RGB数组
color1.mix([234, 84, 85]) // Color #dc7aa9
#CE9FFC
.mix(
#EA5455
, 50) ==
#dc7aa9

例3：连续mix

colorsea('#0396FF').mix('#7367F0', 33).mix('#EA5455', 50) // #896da8
#0396FF
.mix(
#7367F0
, 33).mix(
#EA5455
, 50) ==
#896da8

color.fadeIn()

增加不透明度

 /**
   * Increase opacity
   * 增加不透明度
   * @param amount 不透明度增加的数值, 默认为10，代表10%
   * @param method 如果填入relative则表示参数amount为相对值
   * @returns new Color
   */
color.fadeIn(amount: number = 10, method?: string) => Color

例：

colorsea('#ff0000', 10).fadeIn(30) // #ff000066
#ff00001a
->
#ff000066

color.fadeOut()

减少不透明度

 /**
   * Reduce opacity
   * 减少不透明度
   * @param amount 不透明度减少的数值, 默认为10，代表10%
   * @param method 如果填入relative则表示参数amount为相对值
   * @returns new Color
   */
color.fadeOut(amount: number = 10, method?: string) => Color

例：

colorsea('#ff0000', 100).fadeOut(50) // #ff000080
#ff0000
->
#ff000080

color.opacify()

color.opacify 为 color.fadeIn 别名，用法与 color.fadeIn 一致

color.transparentize()

color.transparentize 为 color.fadeOut 别名，用法与 color.fadeOut 一致