COLORSEA

颜色取值和改值

color.red()

color.red() => number
color.red(amount: number) => Color
  • 参数 amount?: number
    • 当不传入amount时，取得rgb的红色通道的值，范围为[0, 255]
    • 当传入amount时，为修改红色通度的值，并返回一个新的Color实例

例1：取得红色通道值

colorsea('#ffcc22').red() // 255

例2：设置红色通道为200

colorsea('#ffcc22').red(200) // Color #c8cc22
#ffcc22
->
#c8cc22

color.green()

color.green() => number
color.green(amount: number) => Color
  • 参数 amount?: number
    • 当不传入amount时，取得rgb的绿色通道的值，范围为[0, 255]
    • 当传入amount时，为修改绿色通度的值，并返回一个新的Color实例

例1：取得绿色通道值

colorsea('#ffcc22').green() // 204

例2：设置绿色通道为100

colorsea('#ffcc22').green(100) // Color #ff6422
#ffcc22
->
#ff6422

color.blue()

color.blue() => number
color.blue(amount: number) => Color
  • 参数 amount?: number
    • 当不传入amount时，取得rgb的蓝色通道的，值范围为[0, 255]
    • 当传入amount时，为修改蓝色通度的值，并返回一个新的Color实例

例1：取得蓝色通道值

colorsea('#ffcc22').blue() // 34

例2：设置蓝色通道为255

colorsea('#ffcc22').blue(255) // Color #ffccff
#ffcc22
->
#ffccff

color.hue()

color.hue() => number
color.hue(amount: number) => Color
  • 参数 amount?: number
    • 当不传入amount时，取得色相值，范围为[0, 360)
    • 当传入amount时，为修改色相值，并返回一个新的Color实例

例1：取得色相

colorsea('#ffcc22').hue() // 46

例2：设置色相为120°

colorsea('#ffcc22').hue(120) // Color #24ff24
#ffcc22
->
#24ff24

color.saturation()

color.saturation() => number
color.saturation(amount: number) => Color
  • 参数 amount?: number
    • 当不传入amount时，取得饱和度值，范围为[0, 100]
    • 当传入amount时，为修改饱和度，并返回一个新的Color实例

例1：取得饱和度

colorsea('#ffcc22').saturation() // 100

例2：设置饱和度为20%

colorsea('#ffcc22').saturation(20) // Color #a79d7b
#ffcc22
->
#a79d7b

color.lightness()

color.lightness() => number
color.lightness(amount: number) => Color
  • 参数 amount?: number
    • 当不传入amount时，取得光亮度，范围为[0, 100]
    • 当传入amount时，为修改光亮度，并返回一个新的Color实例

例1：取得光亮度

colorsea('#ffcc22').lightness() // 57

例2：设置光亮度为30%

colorsea('#ffcc22').lightness(30) // Color #664e00
#ffcc22
->
#664e00

color.alpha()

color.alpha() => number
color.alpha(amount: number) => Color
  • 参数 amount?: number
    • 当不传入amount时，取得alpha通道的值，范围为[0, 100]
    • 当传入amount时，为修改alpha通道的值，并返回一个新的Color实例

例1：取得不透明度

colorsea('#22994a', 90).alpha() // 90

例2：设置不透明度为30%

colorsea('#22994a', 90).alpha(30) // Color #22994a33
#22994a
->
#22994a33

color.luma()

取得感知亮度

color.luma() => number

例

colorsea('#22994a').luma() // 0.23616959154733871

color.brightness()

取得明度Brightness

range: [0, 100]

color.brightness() => number

例:

colorsea('#FFFFFF').brightness() // 100

color.visibility()

检查一个颜色在另一个颜色上是否易于可见, 如果返回false, 则为可见性比较差。

refer to: https://www.w3.org/TR/AERT/#color-contrastopen in new window

/**
   * @param anotherColor 另一个用于对比的颜色
   * @param setting 用于判定可见性好坏的阈值设置,{b, c}. 
   * * b: brightness差值, 默认值为125, 小于或等于此值说明可见性差。颜色brightness值的范围取[0,255]
   * * c: rgb差值, 默认值为500，小于或等于此值说明可见性差
   */
  color.visibility(
    anotherColor: Color | string | CommonColoraTuple | CommonColorTuple,
    setting?: { b: number; c: number }
  ) => boolean

例:

colorsea('red').visibility(colorsea('#ee6666')) // false
colorsea('#ffff00').visibility('#000000') // true
#ff0000, #ee6666, return false
,
#ffff00, #000000, return true

TIP

color.red(),color.green(),color.blue(),color.hue(),color.saturation(),color.lightness(), color.alpha(),color.luma()等方法的取值，如果其计算结果为小数，将会返会所有小数位数，并不会将结果进行取整或截取多少位小数。