tesk9 / palette / TransparentColor

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

Why is TransparentColor separate from SolidColor? Why isn't SolidColor 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.

TransparentColor exists in order to try to keep functions like SolidColor.luminance and SolidColor.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 SolidColor.

Ellie example


type TransparentColor

Opacity


type alias Opacity =
Internal.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 : Basics.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 -> Basics.Float

Conversions

fromColor : Opacity -> SolidColor -> TransparentColor

Specify the opacity for a color without opacity.

import SolidColor exposing (SolidColor)
import TransparentColor exposing (TransparentColor, customOpacity)

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

myTransparentRed : TransparentColor
myTransparentRed =
    TransparentColor.fromColor (customOpacity 0.5) myRed

toColor : TransparentColor -> SolidColor

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

fromRGBA : { red : Basics.Float, green : Basics.Float, blue : Basics.Float, alpha : Opacity } -> TransparentColor

toRGBA : TransparentColor -> { red : Basics.Float, green : Basics.Float, blue : Basics.Float, alpha : Opacity }

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

toRGBAString : TransparentColor -> String

fromHSLA : { hue : Basics.Float, saturation : Basics.Float, lightness : Basics.Float, alpha : Opacity } -> TransparentColor

toHSLA : TransparentColor -> { hue : Basics.Float, saturation : Basics.Float, lightness : Basics.Float, alpha : Opacity }

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

toHSLAString : TransparentColor -> String

fromHexA : String -> Result String TransparentColor

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

toHexA : TransparentColor -> String

Customize Colors

invert : TransparentColor -> TransparentColor

blacken : Basics.Float -> TransparentColor -> TransparentColor

whiten : Basics.Float -> TransparentColor -> TransparentColor

grayen : Basics.Float -> TransparentColor -> TransparentColor

rotateHue : Basics.Float -> TransparentColor -> TransparentColor

addSaturation : Basics.Float -> TransparentColor -> TransparentColor

addLightness : Basics.Float -> TransparentColor -> TransparentColor