Widget.Style.Material.Color

This module contains functions to adapt color in various ways.

We use the CIELCH color space, while the material design on chrome uses sRGB. CIELCH colors ensure that the result of mixing colors looks natural, where as sRGB is optimized to mix images together.

In practice this means that in edge-cases our package will produce better results, then the javascript material design implementation.

Opacity Constants for Buttons

buttonHoverOpacity : Float

Opacity value for hovering over a button

buttonFocusOpacity : Float

Opacity value for a focused button

buttonPressedOpacity : Float

Opacity value for a pressed button

buttonDisabledOpacity : Float

Opacity value for a disabled button

buttonSelectedOpacity : Float

Opacity value for a selected button

Accessibility

accessibleTextColor : Color -> Color

Returns either Black or White, depending of the input color.

accessibleWithTextColor : Color -> Color -> Color

Returns the first color, adapted to ensure accessibility rules.

accessibleTextColor bgColor
    = accessibleWithTextColor (Color.rgb255 255 255 255) bgColor

Shades

withShade : Color -> Float -> Color -> Color

Simulates adding a color in front (subtractive color mixing).

--Darkens the color by 50%
withShade (Color.rgb255 255 255 255) 0.5

--Makes the color 50% more red
withShade (Color.rgb255 255 0 0) 0.5

scaleOpacity : Float -> Color -> Color

Multiply the opacity value by a given value

scaleOpacity (0.25 \* 2) ==
  scaleOpacity 0.25 >> scaleOpacity 2

Predefined Colors

dark : Color

dark gray

gray : Color

gray

Utility Functions

toCIELCH :

Color

-> { l : Float

, c : Float

, h : Float

}

Utility function to convert a color to CIELCH color space

fromCIELCH :

{ l : Float

, c : Float

, h : Float

}

-> Color

Utility function to convert CIELCH color space back to a color

shadow :

Float

-> { offset : ( Float, Float )

, size : Float

, blur : Float

, color : Color

}

Returns a Material Design shadow

Orasund/elm-ui-widgets/2.2.0