noahzgordon / elm-color-extra / Color.Manipulate

A library for creating and manipulating colors.

Color adjustment

darken : Basics.Float -> Color -> Color

Decrease the lightning of a color

lighten : Basics.Float -> Color -> Color

Increase the lightning of a color

saturate : Basics.Float -> Color -> Color

Increase the saturation of a color

desaturate : Basics.Float -> Color -> Color

Decrease the saturation of a color

rotateHue : Basics.Float -> Color -> Color

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

fadeIn : Basics.Float -> Color -> Color

Increase the opacity of a color

fadeOut : Basics.Float -> Color -> Color

Decrease the opacity of a color

grayscale : Color -> Color

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

scaleHsl : { saturationScale : Basics.Float, lightnessScale : Basics.Float, alphaScale : Basics.Float } -> 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 { saturationScale = 0, lightnessScale = 0.4, alphaScale = 0 } color is called, the resulting color’s lightness will be 40% of the way between its original lightness and 1.0. If scaleHsl { saturationScale = 0, lightnessScale = -0.4, alphaScale = 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 : { redScale : Basics.Float, greenScale : Basics.Float, blueScale : Basics.Float, alphaScale : Basics.Float } -> 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 { redScale = 0.4, greenScale = 0, blueScale = 0, alphaScale = 0 } color is called, the resulting color’s redness will be 40% of the way between its original redness and 255. If scaleRgb { redScale = -0.4, greenScale = 0, blueScale = 0, alphaScale = 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

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

weightedMix : Color -> Color -> Basics.Float -> 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.