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
.
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
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
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