Manipulation

lighten

Increase the lightness of a color.

lighten(input: string, amount: number, format?: ColorType): string

Parameter	Description	Type
amount	Amount to lighten (0-100)	number
format	Optional output format	ColorType
input	Any CSS color string	string

import { lighten } from 'colorizr';

lighten('#ff0044', 10); // '#ff3369'
lighten('#ff0044', 20); // '#ff668f'
lighten('#ff0044', 30); // '#ff99b4'

Playground

#ff3369

darken

Decrease the lightness of a color.

darken(input: string, amount: number, format?: ColorType): string

Parameter	Description	Type
amount	Amount to darken (0-100)	number
format	Optional output format	ColorType
input	Any CSS color string	string

import { darken } from 'colorizr';

darken('#ff0044', 10); // '#cc0036'
darken('#ff0044', 20); // '#990029'
darken('#ff0044', 30); // '#66001b'

Playground

#cc0036

saturate

Increase the saturation of a color.

saturate(input: string, amount: number, format?: ColorType): string

Parameter	Description	Type
amount	Amount to saturate (0-100)	number
format	Optional output format	ColorType
input	Any CSS color string	string

import { saturate } from 'colorizr';

saturate('#bf4060', 20); // '#d82753'

Playground

#d82753

desaturate

Decrease the saturation of a color.

desaturate(input: string, amount: number, format?: ColorType): string

Parameter	Description	Type
amount	Amount to desaturate (0-100)	number
format	Optional output format	ColorType
input	Any CSS color string	string

import { desaturate } from 'colorizr';

desaturate('#ff0044', 20); // '#e61950'

Playground

#e61950

rotate

Rotate the hue of a color.

rotate(input: string, degrees: number, format?: ColorType): string

Parameter	Description	Type
degrees	Degrees to rotate (-360 to 360)	number
format	Optional output format	ColorType
input	Any CSS color string	string

import { rotate } from 'colorizr';

rotate('#ff0044', 30);  // '#ff3c00'
rotate('#ff0044', 180); // '#00ffbb'
rotate('#ff0044', -90); // '#3c00ff'

Playground

#ff3c00

invert

Invert a color by rotating its hue 180 degrees.

invert(input: string): string

import { invert } from 'colorizr';

invert('#ff0044'); // '#00ffbb'

Playground

#00ffbb

grayscale

Remove all saturation from a color.

grayscale(input: string, format?: ColorType): string

import { grayscale } from 'colorizr';

grayscale('#ff0044'); // '#8a8a8a'

Playground

#8a8a8a

opacify

Set the opacity of a color to a specific value.

opacify(input: string, alpha: number, format?: ColorType): string

Parameter	Description	Type
alpha	Target opacity (0-1)	number
format	Optional output format	ColorType
input	Any CSS color string	string

import { opacify } from 'colorizr';

opacify('#ff0044', 0.5);         // '#ff004480'
opacify('#ff0044', 0.8, 'rgb');  // 'rgb(255 0 68 / 80%)'

Playground

#ff004480

transparentize

Adjust the transparency of a color by a relative amount. Positive values decrease opacity, negative values increase it.

transparentize(input: string, alpha: number, format?: ColorType): string

Parameter	Description	Type
alpha	Amount to adjust (-1 to 1). Positive = more transparent.	number
format	Optional output format	ColorType
input	Any CSS color string	string

import { transparentize } from 'colorizr';

transparentize('#ff0044', 0.5);   // '#ff004480' (50% transparent)
transparentize('#ff004480', -0.3); // '#ff0044cc' (30% less transparent)

Playground

#ff0044cc