tesk9/palette/2.0.0

NOTE: the latest version is 3.0.1

Color.Transparent

This module provides helpers for working with colors that are not fully opaque.

Why is Color.Transparent separate from Color? Why isn't Color simply modeled as an RGBA color value?

Transparency fundamentally involves stacking contexts on render; transparency is really a shortcut for saying "blend my color with whatever is behind it."

As soon as we know that our color may be transparent, we can no longer make claims about contrast or luminance. Black text on a white background provides high contrast, but transparent black text on a white background may not be high contrast.

Color.Transparent exists in order to try to keep functions like Color.luminance and Color.Accessibility.sufficientContrast safe and reliable, while also providing full-featured support for working with alpha channel values.

These docs assume that you're familiar with the color space you're looking at. If not, read more about each color space in Color.

Opacity

type alias Opacity =
Opacity
transparent : Opacity

Provided for convenience. Equivalent to doing:

Opacity.customOpacity 0
opaque : Opacity

Provided for convenience. Equivalent to doing:

Opacity.customOpacity 1.0
customOpacity : Float -> Opacity

Pass in a value in [0, 1.0]. The value passed in will be clamped within these bounds.

opacityToString : Opacity -> String
opacityToFloat : Opacity -> Float

Color

type Color
fromColor : Opacity -> Color -> Color

Specify the opacity for a color without opacity.

import Color
import Color.Transparent


myRed : Color.Color
myRed =
    Color.fromRGB ( 255, 0, 0 )


myOpacity : Color.Transparent.Opacity
myOpacity =
    Color.Transparent.Color.customOpacity 0.5


myTransparentRed : Color.Transparent.Color
myTransparentRed =
    Color.fromColor myOpacity myRed
{ red : Float
, green : Float
, blue : Float
, alpha : Opacity
}
-> Color
{ hue : Float
, saturation : Float
, lightness : Float
, alpha : Opacity
}
-> Color
fromHexA : String -> Result String Color

Build a new color from a hex string that might include transparencies. Supports lowercase and uppercase strings.

Use Colors

If you decide you don't care about the opacity anymore, you can drop this information.

toRGBAString : Color -> String
toHSLAString : Color -> String

Customize Colors

blacken : Float -> Color -> Color
whiten : Float -> Color -> Color
grayen : Float -> Color -> Color
rotateHue : Float -> Color -> Color
addSaturation : Float -> Color -> Color
addLightness : Float -> Color -> Color

Helpers

-> { red : Float
, green : Float
, blue : Float
, alpha : Opacity
}

Extract the red, green, blue, and alpha values from an existing Color.

-> { hue : Float
, saturation : Float
, lightness : Float
, alpha : Opacity
}

Extract the hue, saturation, lightness, and alpha values from an existing Color.

toHexA : Color -> String