Color manipulation
Example
Example1：Darken the color by 20%
colorsea('#ff0000').darken(20) // #cc0000
Example2：
You can perform continuous operations: Rotate hue 180 degrees -> Example1：Darken 30% -> Reduce saturation 10%
colorsea('#ff0000').spin(180).darken(30).desaturate(10) // Color: #0ac2c2
TIP
Each operation will return a new Color instance object
color.lighten()
Increase lightness
/**
* Increase lightness
* @param amount Lightness increase percentage, the default is 5, which means 5%
* @param method If you fill in 'relative', it means that the parameter amount is a relative value
* @returns Color
*/
color.lighten(amount: number = 5, method?: string) => Color
Example: Increase lightness by 10%
colorsea('#338800').lighten(10) // Color: #46bb00
color.darken()
Reduce lightness
/**
* Reduce lightness
* @param amount The percentage of lightness reduction, the default is 5, which means 5%
* @param method If you fill in 'relative', it means that the parameter amount is a relative value
* @returns Color
*/
color.darken(amount: number = 5, method?: string) => Color
Example: Reduce lightness by 10%
colorsea('#338800').darken(10) // Color: #205500
color.saturate()
Increase saturation
/**
* Increase saturation
* @param amount How much to increase the saturation, the default is 5, which means 5%
* @param method If you fill in 'relative', it means that the parameter amount is a relative value
* @returns new Color
*/
color.saturate(amount: number = 5, method?: string) => Color
Example: Increase saturation by 30%
colorsea('#E5B7A1').saturate(30) // Color: #f7b18f
color.desaturate()
Reduce saturation
/**
* Reduce saturation
* @param amount The percentage of saturation reduction, the default is 5, which means 5%
* @param method If you fill in 'relative', it means that the parameter amount is a relative value
* @returns new Color
*/
color.desaturate(amount: number = 5, method?: string) => Color
Example: Reduce saturation by 50%
colorsea('#00ff00').desaturate(50) // Color: #40bf40
color.spin()
Rotate hue
/**
* Rotate hue
* @param angle rotation angle
*/
color.spin(angle: number) => Color
Example: Rotate hue 90 degrees clockwise
colorsea('#00ff00').spin(90) // Color: #007fff
color.adjustHue()
color.adjustHue is an alias of color.spin, the usage is consistent with color.spin
color.complement()
Get the complementary color, equivalent to color.spin(180)
Example:
colorsea('#00ff00').complement() // Color: #0f00ff
color.invert()
reverse color
Example:
colorsea('#ff3366').invert() // Color: #00cc99
colorsea('#cccccc').invert() // Color: #333333
color.mix()
color mixing
/**
* color mixing
* @param color Another color, which can be a Color instance, a hexadecimal color string, or an [r, g, b] color tuple
* @param weight The mixing ratio of another color, the default value is 50 or 50%
* @returns Color
*/
color.mix(color: Color, weight: number = 50) => Color
Example 1: rgb(30, 177, 250) mixed with 60% hsl(0, 100%, 20%)
colorsea([30, 177, 250]).mix(colorsea.hsl(0, 100, 20), 60) // Color #494764
Example 2: Mix of #CE9FFC and #EA5455, 50% each
const color1 = colorsea('#CE9FFC')
const color2 = colorsea('#EA5455')
color1.mix(color2) // Color #dc7aa9
// or color2 can not create a Color instance, directly use the hex string
color1.mix('#EA5455') // Color #dc7aa9
// or color2 is passed directly to the [r, g, b] tuple
color1.mix([234, 84, 85]) // Color #dc7aa9
Example 3: Continuous Mixing
colorsea('#0396FF').mix('#7367F0', 33).mix('#EA5455', 50) // #896da8
color.fadeIn()
Increase opacity
/**
* Increase opacity
* @param amount The value of opacity increase, the default is 10, which means 10%
* @param method If you fill in 'relative', it means that the parameter amount is a relative value
* @returns new Color
*/
color.fadeIn(amount: number = 10, method?: string) => Color
Example:
colorsea('#ff0000', 10).fadeIn(30) // #ff000066
color.fadeOut()
Reduce opacity
/**
* Reduce opacity
* @param amount The value of opacity reduction, the default is 10, which means 10%
* @param method If you fill in 'relative', it means that the parameter amount is a relative value
* @returns new Color
*/
color.fadeOut(amount: number = 10, method?: string) => Color
Example:
colorsea('#ff0000', 100).fadeOut(50) // #ff000080
color.opacify()
color.opacify is an alias of color.fadeIn, the usage is consistent with color.fadeIn
color.transparentize()
color.transparentize is an alias of color.fadeOut, the usage is consistent with color.fadeOut