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.
buttonHoverOpacity : Basics.Float
Opacity value for hovering over a button
buttonFocusOpacity : Basics.Float
Opacity value for a focused button
buttonPressedOpacity : Basics.Float
Opacity value for a pressed button
buttonDisabledOpacity : Basics.Float
Opacity value for a disabled button
buttonSelectedOpacity : Basics.Float
Opacity value for a selected button
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
withShade : Color -> Basics.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 : Basics.Float -> Color -> Color
Multiply the opacity value by a given value
scaleOpacity (0.25 \* 2) ==
scaleOpacity 0.25 >> scaleOpacity 2
dark : Color
dark gray
toCIELCH : Color -> { l : Basics.Float, c : Basics.Float, h : Basics.Float }
Utility function to convert a color to CIELCH color space
fromCIELCH : { l : Basics.Float, c : Basics.Float, h : Basics.Float } -> Color
Utility function to convert CIELCH color space back to a color
shadow : Basics.Float -> { offset : ( Basics.Float, Basics.Float ), size : Basics.Float, blur : Basics.Float, color : Element.Color }
Returns a Material Design shadow
fromColor : Color -> Element.Color
Utility function to convert from Color to Element.Color
textAndBackground : Color -> List (Element.Attr decorative msg)
applies a color the background and ensures that the font color is accessible.
gray : Color
DEPRECATED use Material.gray instead.