This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
README Heatmap

Heatmap.Gradient

Gradient definitions for heatmaps.

Definition

type alias Gradient = Color.Gradient.Gradient

Re-exposed Gradient definition from the elm-color-extra package.

A Gradient is a list of Color and stop values. The stop value must be between 0 and 1.

sunrise =
    [ ( 0, Color.rgb 255 0 0 )
    , ( 0.66, Color.rgb 255 255 0 )
    , ( 1, Color.rgb 255 255 255 )
    ]

The gradient is used to colorize the intensity of the values in the heatmap, from lowest to highest.

Useful gradients

As seen in https://msdn.microsoft.com/en-us/library/mt712854.aspx

blackAquaWhite : Gradient
 
blueRed : Gradient
 
colorSpectrum : Gradient
 
deepSea : Gradient
 
heatedMetal : Gradient
 
incandescent : Gradient
 
steppedColors : Gradient
 
sunrise : Gradient
 
visibleSpectrum : Gradient
 
module Heatmap.Gradient
    exposing
        ( Gradient
        , blackAquaWhite
        , blueRed
        , colorSpectrum
        , deepSea
        , incandescent
        , heatedMetal
        , steppedColors
        , sunrise
        , visibleSpectrum
        )

{-| Gradient definitions for heatmaps.

## Definition

@docs Gradient

## Useful gradients

As seen in <https://msdn.microsoft.com/en-us/library/mt712854.aspx>

@docs blackAquaWhite, blueRed, colorSpectrum, deepSea, heatedMetal, incandescent, steppedColors, sunrise, visibleSpectrum
-}

import Color
import Color.Gradient


{-| Re-exposed [`Gradient`](http://package.elm-lang.org/packages/eskimoblood/elm-color-extra/5.0.0/Color-Gradient#Gradient) definition from the [elm-color-extra](http://package.elm-lang.org/packages/eskimoblood/elm-color-extra/5.0.0/) package.

A `Gradient` is a list of [Color](http://package.elm-lang.org/packages/elm-lang/core/5.1.1/Color#Color) and stop values. The stop value must be between `0` and `1`.

    sunrise =
        [ ( 0, Color.rgb 255 0 0 )
        , ( 0.66, Color.rgb 255 255 0 )
        , ( 1, Color.rgb 255 255 255 )
        ]

The gradient is used to colorize the intensity of the values in the heatmap, from lowest to highest.
-}
type alias Gradient =
    Color.Gradient.Gradient


{-| <div style="background: linear-gradient(to right, rgb(0,0,0), rgb(0,255,255) 60%, rgb(255,255,255))">&nbsp;</div>
-}
blackAquaWhite : Gradient
blackAquaWhite =
    [ ( 0, Color.rgb 0 0 0 )
    , ( 0.6, Color.rgb 0 255 255 )
    , ( 1, Color.rgb 255 255 255 )
    ]


{-| <div style="background: linear-gradient(to right, rgb(0,0,255), rgb(255,0,0))">&nbsp;</div>
-}
blueRed : Gradient
blueRed =
    [ ( 0, Color.rgb 0 0 255 )
    , ( 1, Color.rgb 255 0 0 )
    ]


{-| <div style="background: linear-gradient(to right, rgb(0,0,128), rgb(0,0,255) 25%, rgb(0,128,0) 50%, rgb(255,255,0) 75%, rgb(255,0,0)">&nbsp;</div>
-}
colorSpectrum : Gradient
colorSpectrum =
    [ ( 0, Color.rgb 0 0 128 )
    , ( 0.25, Color.rgb 0 0 255 )
    , ( 0.5, Color.rgb 0 128 0 )
    , ( 0.75, Color.rgb 255 255 0 )
    , ( 1, Color.rgb 255 0 0 )
    ]


{-| <div style="background: linear-gradient(to right, rgb(0,0,0), rgb(24,53,103) 60%, rgb(46,100,158) 75%, rgb(23,173,201) 90%, rgb(0,250,250)">&nbsp;</div>
-}
deepSea : Gradient
deepSea =
    [ ( 0, Color.rgb 0 0 0 )
    , ( 0.6, Color.rgb 24 53 103 )
    , ( 0.75, Color.rgb 46 100 158 )
    , ( 0.9, Color.rgb 23 173 201 )
    , ( 1, Color.rgb 0 250 250 )
    ]


{-| <div style="background: linear-gradient(to right, rgb(0,0,0), rgb(0,0,255) 33%, rgb(139,0,0) 66%, rgb(255,255,255)">&nbsp;</div>
-}
incandescent : Gradient
incandescent =
    [ ( 0, Color.rgb 0 0 0 )
    , ( 0.33, Color.rgb 0 0 255 )
    , ( 0.66, Color.rgb 139 0 0 )
    , ( 1, Color.rgb 255 255 255 )
    ]


{-| <div style="background: linear-gradient(to right, rgb(0,0,0), rgb(128,0,128) 40%, rgb(255,0,0) 60%, rgb(255,255,0) 80%, rgb(255,255,255)">&nbsp;</div>
-}
heatedMetal : Gradient
heatedMetal =
    [ ( 0, Color.rgb 0 0 0 )
    , ( 0.4, Color.rgb 128 0 128 )
    , ( 0.6, Color.rgb 255 0 0 )
    , ( 0.8, Color.rgb 255 255 0 )
    , ( 1, Color.rgb 255 255 255 )
    ]


{-| <div style="background: linear-gradient(to right, rgb(0,0,128), rgb(0,0,128) 25%, rgb(0,128,0) 26%, rgb(0,128,0) 50%, rgb(255,255,0) 51%, rgb(255,255,0) 75%, rgb(255,0,0) 76%, rgb(255,0,0)">&nbsp;</div>
-}
steppedColors : Gradient
steppedColors =
    [ ( 0, Color.rgb 0 0 128 )
    , ( 0.25, Color.rgb 0 0 128 )
    , ( 0.26, Color.rgb 0 128 0 )
    , ( 0.5, Color.rgb 0 128 0 )
    , ( 0.51, Color.rgb 255 255 0 )
    , ( 0.75, Color.rgb 255 255 0 )
    , ( 0.76, Color.rgb 255 0 0 )
    , ( 1, Color.rgb 255 0 0 )
    ]


{-| <div style="background: linear-gradient(to right, rgb(255,0,0), rgb(255,255,0) 66%, rgb(255,255,255)">&nbsp;</div>
-}
sunrise : Gradient
sunrise =
    [ ( 0, Color.rgb 255 0 0 )
    , ( 0.66, Color.rgb 255 255 0 )
    , ( 1, Color.rgb 255 255 255 )
    ]


{-| <div style="background: linear-gradient(to right, rgb(255,0,255), rgb(0,0,255) 25%, rgb(0,255,0) 50%, rgb(255,255,0) 75%, rgb(255,0,0)">&nbsp;</div>
-}
visibleSpectrum : Gradient
visibleSpectrum =
    [ ( 0, Color.rgb 255 0 255 )
    , ( 0.25, Color.rgb 0 0 255 )
    , ( 0.5, Color.rgb 0 255 0 )
    , ( 0.75, Color.rgb 255 255 0 )
    , ( 1, Color.rgb 255 0 0 )
    ]