escherlies / elm-color / Color

An Elm package to work with web colors.

Example usage

colors : List Color
colors =
    [ hsl 194 0.49 0.14
    , fromHexUnsafe "#06A77D"
    , rgb 0.96 0.976 0.996
    , rgb255 122 137 194
    ]

colorPalette : List Color
colorPalette =
    fromPalette "https://coolors.co/40f99b-61707d"

green : Color
green =
    hsl 164 0.93 0.34

fontColor : Color
fontColor =
    if isLight green then
        black

    else
        white

viewHtml : Html msg
viewHtml =
    Html.div
        [ style "background-color" (Color.toCssString green)
        , style "color" (Color.toCssString fontColor)
        ]
        [ Html.text (toCssString green) ]

Types


type alias Color =
Internal.Color

The Color type representing a color in rgba space

Creating colors

Standard way

rgb : Basics.Float -> Basics.Float -> Basics.Float -> Color

Provide the red, green, and blue channels for the color.

Each channel takes a value between 0 and 1.

hsl : Basics.Float -> Basics.Float -> Basics.Float -> Color

Provide the hue, saturation and lightness channels for the color.

Hue takes a value between 0 and 360.

Saturation and lightness take a value between 0 and 1.

gray : Basics.Float -> Color

Create a gray color. I.e. for a 50% gray: gray 0.5

From strings

fromHex : String -> Maybe Color

Parse a hex string to a color

Can handle different formats:

fromHex "#000"

fromHex "#F0F0F0"

fromHex "0xA0A0A0"

fromHex "8F8F8F"

fromHex "#C6C6C680"

fromPalette : String -> List Color

Parses different palette formats

fromPalette "https://huemint.com/website-monochrome/#palette=fffffc-00eb80"
--> List.filterMap Color.fromHex [ "fffffc", "00eb80" ] : List Color

fromPalette """
            fffffc
            00eb80
            000000
            """
--> List.filterMap Color.fromHex [ "fffffc", "00eb80", "000000" ] : List Color

fromPalette "https://coolors.co/40f99b-61707d"
--> List.filterMap Color.fromHex [ "40f99b", "61707d" ] : List Color

-- Infact, it works with everything that has 6 digits hex values
fromPalette "xxxxfffffc-00eb80x000000---"
--> List.filterMap Color.fromHex [ "fffffc", "00eb80", "000000" ] : List Color

fromHexUnsafe : String -> Color

Like fromHex, but uses transparent (rgba 0 0 0 0) as default value.

Convert

toCssString : Color -> String

Convert a color to an hex string. Use toHexString to omit the #-prefix.

toHexString (rgb 0.5 0.5 0.5) --> "#808080"

toRgba : Color -> { red : Basics.Float, green : Basics.Float, blue : Basics.Float, alpha : Basics.Float }

Deconstruct a Color into its rgba channels.

toHsla : Color -> { hue : Basics.Float, saturation : Basics.Float, lightness : Basics.Float, alpha : Basics.Float }

Deconstruct a Color into its hsla channels.

toHexString : Color -> String

Convert a color to an hex string. Use toCssString if you want a #-prefixed hex value.

toHexString (rgb 0.5 0.5 0.5) --> "808080"

toRgba255 : Color -> { red : Basics.Int, green : Basics.Int, blue : Basics.Int, alpha : Basics.Int }

Deconstruct a Color into its rgba255 channels.

Manipulate

invertRgb : Color -> Color

Invert a color by flipping its r g b values

setAlpha : Basics.Float -> Color -> Color

Set the alpha of the color

Lightness

isLight : Color -> Basics.Bool

Determine if a color is light, that is, if the lightness is over 50% (L* > 0.5). Using the L* CIELAB color space for human percieved lightness.

Useful for example if you want to change font color based on the lightness of the color.

lightness : Color -> Basics.Float

Lightness is the visual perception of the luminance L of an object. It is the L* component of a color in the CIELAB and CIELUV space.

For more information on this, take a look at the implementation details!

Transform

Rgb

mapRgb : (Basics.Float -> Basics.Float) -> Color -> Color

Map over rgb channels

invertRgb : Color -> Color
invertRgb =
    mapRgb (\c -> 1 - c)

mapRed : (Basics.Float -> Basics.Float) -> Color -> Color

mapGreen : (Basics.Float -> Basics.Float) -> Color -> Color

mapBlue : (Basics.Float -> Basics.Float) -> Color -> Color

mapAlpha : (Basics.Float -> Basics.Float) -> Color -> Color

HSL

mapHue : (Basics.Float -> Basics.Float) -> Color -> Color

Map the hue of the color in HSL space

mapLightness : (Basics.Float -> Basics.Float) -> Color -> Color

Map the lightness in the HSL space

darken : Color -> Color
darken =
    mapLightness ((*) 0.95)

mapSaturation : (Basics.Float -> Basics.Float) -> Color -> Color

Map the saturation of the color in HSL space

Variants

More constructors

rgb255 : Basics.Int -> Basics.Int -> Basics.Int -> Color

Provide the red, green, and blue channels for the color.

Each channel takes a value between 0 and 255.

rgba : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color

Provide the red, green, blue, and alpha channels for the color.

Each channel takes a value between 0 and 1.

hsla : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color

Provide the hue, saturation, lightness, and alpha channels for the color.

Hue takes a value between 0 and 360.

Saturation, lightness, and alpha take a value between 0 and 1.

rgba255 : Basics.Int -> Basics.Int -> Basics.Int -> Basics.Int -> Color

Provide the red, green, blue and alpha channels for the color.

Each channel takes a value between 0 and 255.

fromRgb : { red : Basics.Float, green : Basics.Float, blue : Basics.Float } -> Color

Create a color from an rgb record. Each channel takes a value between 0 and 1.

fromRgba : { red : Basics.Float, green : Basics.Float, blue : Basics.Float, alpha : Basics.Float } -> Color

Create a color from an rgba record. Each channel takes a value between 0 and 1.

fromHsla : { hue : Basics.Float, saturation : Basics.Float, lightness : Basics.Float, alpha : Basics.Float } -> Color

Create a color from an HSL(a) record

Hue takes a value between 0 and 360.

Saturation, lightness, and alpha take a value between 0 and 1.

fromRgb255 : { red : Basics.Int, green : Basics.Int, blue : Basics.Int } -> Color

Create a color from an rgb record. Each channel takes a value between 0 and 255.

fromHsl : { hue : Basics.Float, saturation : Basics.Float, lightness : Basics.Float } -> Color

Create a color from an HSL record

Hue takes a value between 0 and 360.

Saturation and lightness take a value between 0 and 1.

Helper colors

black : Color

#000000

white : Color

#FFFFFF