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.
Provided for convenience. Equivalent to doing:
Opacity.customOpacity 0Provided for convenience. Equivalent to doing:
Opacity.customOpacity 1.0Pass in a value in [0, 1.0]. The value passed in will be clamped within these bounds.
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) myRedIf you decide you don't care about the opacity anymore, you can drop this information.
Extract the red, green, blue, and alpha values from an existing Color.
Extract the hue, saturation, lightness, and alpha values from an existing Color.
Build a new color from a hex string that might include transparencies. Supports lowercase and uppercase strings.