TransparentColor

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

Why is TransparentColor 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.

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

type TransparentColor

fromColor : Opacity -> Color -> TransparentColor

Specify the opacity for a color without opacity.

import Color exposing (Color)
import Opacity
import TransparentColor exposing (TransparentColor)


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


myTransparentRed : TransparentColor
myTransparentRed =
    TransparentColor.fromColor (Opacity.custom 0.5) myRed

toColor : TransparentColor -> Color

If you decide you don't care about the transparency anymore, you can drop this information and work with just the color values.

getOpacity : TransparentColor -> Opacity

Extract just the opacity from the color.

mapColor : (Color -> Color) -> TransparentColor -> TransparentColor

import Color.Generator exposing (rotate)
import TransparentColor exposing (TransparentColor)


nextColor : TransparentColor -> TransparentColor
nextColor color =
    TransparentColor.mapColor (rotate 10) color

mapOpacity : (Opacity -> Opacity) -> TransparentColor -> TransparentColor

import Opacity exposing (Opacity)
import SomeCustomStylesheet exposing (red)
import TransparentColor exposing (TransparentColor)


myTransparentRed : TransparentColor
myTransparentRed =
    TransparentColor.mapOpacity halveOpacity red


halveOpacity : Opacity -> Opacity
halveOpacity =
    Opacity.map (\current -> current / 2)

map :

(Opacity -> Opacity)

-> (Color -> Color)

-> TransparentColor

import Color.Generator exposing (rotate)
import Opacity
import TransparentColor exposing (TransparentColor)


rotateAndMakeMoreTransparent : TransparentColor -> TransparentColor
rotateAndMakeMoreTransparent =
    TransparentColor.map
        (Opacity.map (\num -> num - 0.1))
        (rotate 10)

equals : TransparentColor -> TransparentColor -> Bool

Check two colors for equality.