COLORSEA

Get and set value

color.red()

color.red() => number
color.red(amount: number) => Color
  • parameter amount?: number
    • When the amount is not passed in, get the value of the red channel of rgb, and the value range is [0, 255]
    • When the amount is passed in, modify the value of the red channel and return a new Color instance

Example 1: Get the red channel value

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

Example 2: Set the red channel to 200

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

color.green()

color.green() => number
color.green(amount: number) => Color
  • parameter amount?: number
    • When the amount is not passed in, get the value of the green channel of rgb, and the value range is [0, 255]
    • When the amount is passed in, modify the value of the green channel and return a new Color instance

Example 1: Get the green channel value

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

Example 2: Set the green channel to 100

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

color.blue()

color.blue() => number
color.blue(amount: number) => Color
  • parameter amount?: number
    • When the amount is not passed in, get the value of the blue channel of rgb, and the value range is [0, 255]
    • When the amount is passed in, it modifies the value of the blue channel and returns a new Color instance

Example 1: Get the blue channel value

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

Example 2: Set the blue channel to 255

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

color.hue()

color.hue() => number
color.hue(amount: number) => Color
  • parameter amount?: number
    • When the amount is not passed in, the hue value is obtained, and the range is [0, 360)
    • When the amount is passed in, the hue value is modified and a new Color instance is returned

Example 1: get hue

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

Example 2: Set hue to 120°

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

color.saturation()

color.saturation() => number
color.saturation(amount: number) => Color
  • parameter amount?: number
    • When the amount is not passed in, get the saturation value, the range is [0, 100]
    • When the amount is passed in, the saturation is modified and a new Color instance is returned

Example 1: Get Saturation

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

Example 2: Set saturation to 20%

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

color.lightness()

color.lightness() => number
color.lightness(amount: number) => Color
  • parameter amount?: number
    • When the amount is not passed in, get the lightness, the range is [0, 100]
    • When the amount is passed in, it is used to modify the lightness and return a new Color instance

Example 1: Get lightness

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

Example 2: Set lightness to 30% s

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

color.alpha()

color.alpha() => number
color.alpha(amount: number) => Color
  • parameter amount?: number
    • When the amount is not passed in, the value of the alpha channel is obtained, and the range is [0, 100]
    • When the amount is passed in, modify the value of the alpha channel and return a new Color instance

Example 1: Get Opacity

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

Example 2: Set the opacity to 30%

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

color.luma()

get luma

color.luma() => number

Example:

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

color.brightness()

get Brightness

range: [0, 100]

color.brightness() => number

Example:

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

color.visibility()

Check that one color is easily visible on another color, If false is returned, visibility is poor.

refer to: https://www.w3.org/TR/AERT/#color-contrast

/**
   * @param anotherColor color for contrast
   * @param setting Setting value judged as poor visibility,{b, c}. 
   * * b: brightness difference, the default value is 125, the range of brightness value is [0,255]
   * * c: color difference, the default value is 500
   */
  color.visibility(
    anotherColor: Color | string | CommonColoraTuple | CommonColorTuple,
    setting?: { b: number; c: number }
  ) => boolean

Example:

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

TIP

For methods such as color.red(),color.green(),color.blue(),color.hue(),color.saturation(),color.lightness(), color.alpha(),color.luma(), if the calculation result is a decimal, all decimal places will be returned, and the result will not be rounded or how many decimal places will be truncated.