Color used in animations.

Create a hex color from a string.

hex "#ff0000" -- Red


hex "#f00" -- Red (shorthand)


hex "ff0000" -- Red (without #)

Invalid hex strings will return Nothing.

Create an RGB color from individual components.

rgb 255 0 0 -- Red

Create an RGBA color from individual components.

rgba 255 0 0 0.5 -- Semi-transparent red

Create an HSL color from individual components.

• h (hue): 0-360 degrees
• s (saturation): 0-100 percent
• l (lightness): 0-100 percent

hsl 0 100 50 -- Red

Create an HSLA color from individual components.

• h (hue): 0-360 degrees
• s (saturation): 0-100 percent
• l (lightness): 0-100 percent
• a (alpha): 0-1

hsla 0 100 50 0.5 -- Semi-transparent red

Create a Color from an elm-color Color value.

elmColor Color.red

Create a color from a hex string.

fromHex "#ff0000" -- Just Red


fromHex "#f00" -- Just Red (shorthand)


fromHex "invalid" -- Nothing

Invalid hex strings will return Nothing.

Convert a Color to a hex string .

Create a Color from RGB components.

fromRgb { r = 255, g = 0, b = 0 } -- Red

Create a Color from RGBA components.

fromRgba { r = 255, g = 0, b = 0, a = 0.5 } -- Semi-transparent red

Convert a Color to an RGB color record.

Convert a Color to an RGBA color record.

Create a Color from HSL components.

• h (hue): 0-360 degrees
• s (saturation): 0-100 percent
• l (lightness): 0-100 percent

fromHsl { h = 0, s = 100, l = 50 } -- Red

Create a Color from HSLA components.

• h (hue): 0-360 degrees
• s (saturation): 0-100 percent
• l (lightness): 0-100 percent
• a (alpha): 0-1

fromHsla { h = 0, s = 100, l = 50, a = 0.5 } -- Semi-transparent red

Convert a Color to an HSL color record.

Convert a Color to an HSLA color record.

Create a Color from an elm-color Color value.

import Color


fromElmColor Color.red

Convert a Color to an elm-color Color value.

Parse a color from various string formats.

Supports:

• Hex: "#ff0000", "#f00", "ff0000", "f00"

• RGB: "rgb(255, 0, 0)"

• RGBA: "rgba(255, 0, 0, 0.5)"

• HSL: "hsl(0, 100%, 50%)"

• HSLA: "hsla(0, 100%, 50%, 0.5)"

fromString "#ff0000" -- Just red

fromString "rgb(255, 0, 0)" -- Just red

fromString "invalid" -- Nothing

Set the alpha (transparency) value of a color.

-- Semi-transparent red
setAlpha 0.5 <|
    fromRgb { r = 255, g = 0, b = 0 }

Increase the lightness of a color.

brighten 0.2 <|
    fromRgb { r = 100, g = 100, b = 100 } -- Lighter gray

Decrease the lightness of a color.

darken 0.2 <|
    fromRgb { r = 100, g = 100, b = 100 } -- Darker gray

Increase the saturation of a color.

saturate 0.2 <|
    fromHsl {h = 0, s = 50, l = 50} -- More saturated red

Decrease the saturation of a color.

desaturate 0.2 <|
    fromHsl {h = 0, s = 50, l = 50} -- Less saturated red

Fully transparent white.