Color.Manipulate

A library for creating and manipulating colors.

Color adjustment


darken : Basics.Float -> Color.Color -> Color.Color

Decrease the lightning of a color


lighten : Basics.Float -> Color.Color -> Color.Color

Increase the lightning of a color


saturate : Basics.Float -> Color.Color -> Color.Color

Increase the saturation of a color


desaturate : Basics.Float -> Color.Color -> Color.Color

Decrease the saturation of a color


rotateHue : Basics.Float -> Color.Color -> Color.Color

Change the hue of a color. The angle value must be in degrees


fadeIn : Basics.Float -> Color.Color -> Color.Color

Increase the opacity of a color


fadeOut : Basics.Float -> Color.Color -> Color.Color

Decrease the opacity of a color


grayscale : Color.Color -> Color.Color

Convert the color to a greyscale version, aka set saturation to 0


scaleHsl : ( Basics.Float, Basics.Float, Basics.Float ) -> Color.Color -> Color.Color

Fluidly scale saturation, lightness and alpha channel.

That means that lightening an already-light color with scaleHsl won’t change the lightness much, but lightening a dark color by the same amount will change it more dramatically.

For example, the lightness of a color can be anywhere between 0 and 1.0. If scaleHsl (0, 0.4, 0) color is called, the resulting color’s lightness will be 40% of the way between its original lightness and 1.0. If scaleHsl (0, -0.4, 0) color is called instead, the lightness will be 40% of the way between the original and 0.

The values of the supplied tuple scale saturation, lightness, and opacity, respectively, and have a valid range of -1.0 to 1.0.

This function is inspired by the Sass function scale-color.


scaleRgb : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color.Color -> Color.Color

Fluidly scale red, green, blue, and alpha channels.

That means that reddening a already-red color with scaleRgb won’t change the redness much, but reddening a color with little or no red by the same amount will change it more dramatically.

For example, the redness of a color can be anywhere between 0 and 255. If scaleRgb 0.4 0 0 0 color is called, the resulting color’s redness will be 40% of the way between its original redness and 255. If scaleRgb -0.4 0 0 0 color is called instead, the redness will be 40% of the way between the original and 0.

The values of the supplied tuple scale red, green, blue, and alpha channels, respectively, and have a valid range of -1.0 to 1.0.

This function is inspired by the Sass function scale-color.


mix : Color.Color -> Color.Color -> Color.Color

Mixes two colors together. This is the same as calling weightedMix with a weight of 0.5.


weightedMix : Color.Color -> Color.Color -> Basics.Float -> Color.Color

Mixes two colors together.

This function takes the average of each of the RGB components, weighted by a provided value between 0 and 1.0. The opacity of the colors is also considered when weighting the components.

The weight specifies the amount of the first color that should be included in the returned color. For example, a weight of 0.5 means that half the first color and half the second color should be used. A weight of 0.25 means that a quarter of the first color and three quarters of the second color should be used.

This function uses the same algorithm as the mix function in Sass.