[ { "name": "Color.Gradient", "comment": "\n# Gradient\n@docs GradientStop, Gradient, Palette, gradient, gradientFromStops\n", "unions": [], "aliases": [ { "name": "Gradient", "comment": " ", "args": [], "type": "List GradientStop" }, { "name": "GradientStop", "comment": " A color and a stop value that indicates where the color appears in a gradient.\n The stop value must be between `0` and `1`.\n", "args": [], "type": "( Float, Color )" }, { "name": "Palette", "comment": " Create a new gradient `Palette` from a given `Palette`, with a given size.\n", "args": [], "type": "List Color" } ], "values": [ { "name": "gradient", "comment": " Create a new `Palette` with gradient colors from a given `Palette`,\n with a given size.\n\n p1 : Palette\n p1 =\n [ rgb 200 0 200\n , rgb 0 100 100\n , rgb 100 0 0\n ]\n gradient RGB p1 5 -- [RGBA 200 0 200 1,RGBA 100 50 150 1,RGBA 0 100 100 1,RGBA 50 50 50 1,RGBA 100 0 0 1]\n", "type": "Space -> Palette -> Int -> Palette" }, { "name": "gradientFromStops", "comment": " Create a new `Palette` with gradient colors from a given `Gradient`,\n with a given size.\n\n g : Gradient\n g =\n [ (0, rgb 200 0 200)\n , (0.25, rgb 0 100 100)\n , (1, rgb 150 175 160)\n ]\n gradientFromStops RGB g 5 -- [RGBA 200 0 200 1,RGBA 0 100 100 1,RGBA 50 125 120 1,RGBA 100 150 140 1,RGBA 150 175 160 1]\n", "type": "Space -> Gradient -> Int -> Palette" } ], "binops": [] }, { "name": "Color.Interpolate", "comment": "\n# Interpolate\nInterpolate between two colors\n\n@docs Space, interpolate\n", "unions": [ { "name": "Space", "comment": " The color space that is used for the interpolation\n", "args": [], "cases": [ [ "RGB", [] ], [ "HSL", [] ], [ "LAB", [] ] ] } ], "aliases": [], "values": [ { "name": "interpolate", "comment": " Linear interpolation of two colors by a factor between `0` and `1`.\n", "type": "Space -> Color -> Color -> Float -> Color" } ], "binops": [] }, { "name": "Color.Manipulate", "comment": " A library for creating and manipulating colors.\n\n\n# Color adjustment\n@docs darken, lighten, saturate, desaturate, rotateHue, fadeIn, fadeOut, grayscale, scaleHsl, scaleRgb\n\n", "unions": [], "aliases": [], "values": [ { "name": "darken", "comment": " Decrease the lightning of a color\n", "type": "Float -> Color -> Color" }, { "name": "desaturate", "comment": " Decrease the saturation of a color\n", "type": "Float -> Color -> Color" }, { "name": "fadeIn", "comment": " Increase the opacity of a color\n", "type": "Float -> Color -> Color" }, { "name": "fadeOut", "comment": " Decrease the opacity of a color\n", "type": "Float -> Color -> Color" }, { "name": "grayscale", "comment": " Convert the color to a greyscale version, aka set saturation to 0\n", "type": "Color -> Color" }, { "name": "lighten", "comment": " Increase the lightning of a color\n", "type": "Float -> Color -> Color" }, { "name": "rotateHue", "comment": " Change the hue of a color. The angle value must be in degrees\n", "type": "Float -> Color -> Color" }, { "name": "saturate", "comment": " Increase the saturation of a color\n", "type": "Float -> Color -> Color" }, { "name": "scaleHsl", "comment": " Fluidly scale saturation, lightness and alpha channel.\n\n That means that lightening an already-light color with `scaleHsl` won’t change the lightness much, but lightening\n a dark color by the same amount will change it more dramatically.\n\n For example, the lightness of a color can be anywhere between 0 and 1.0. If `scaleHsl (0, 0.4, 0) color` is called,\n the resulting color’s lightness will be 40% of the way between its original lightness and 1.0. If\n `scaleHsl (0, -0.4, 0) color` is called instead, the lightness will be 40% of the way between the original\n and 0.\n\n The values of the supplied tuple scale saturation, lightness, and opacity, respectively, and have a valid range of\n -1.0 to 1.0.\n\n This function is inspired by the Sass function [scale-color](http://sass-lang.com/documentation/Sass/Script/Functions.html#scale_color-instance_method).\n", "type": "( Float, Float, Float ) -> Color -> Color" }, { "name": "scaleRgb", "comment": " Fluidly scale red, green, blue, and alpha channels.\n\n That means that reddening a already-red color with `scaleRgb` won’t change the redness much, but reddening a color\n with little or no red by the same amount will change it more dramatically.\n\n For example, the redness of a color can be anywhere between 0 and 255. If `scaleRgb (0.4, 0, 0, 0) color` is called,\n the resulting color’s redness will be 40% of the way between its original redness and 255. If\n `scaleRgb (-0.4, 0, 0, 0) color` is called instead, the redness will be 40% of the way between the original\n and 0.\n\n The values of the supplied tuple scale red, green, blue, and alpha channels, respectively, and have a valid range of\n -1.0 to 1.0.\n\n This function is inspired by the Sass function [scale-color](http://sass-lang.com/documentation/Sass/Script/Functions.html#scale_color-instance_method).\n", "type": "( Float, Float, Float, Float ) -> Color -> Color" } ], "binops": [] }, { "name": "Color.Convert", "comment": "\n#Convert\nConvert colors to differnt string formats and hexadecimal strings to colors.\n\n@docs colorToCssRgb, colorToCssRgba, colorToCssHsl, colorToCssHsla, colorToHex, hexToColor, colorToLab, labToColor\n", "unions": [], "aliases": [], "values": [ { "name": "colorToCssHsl", "comment": "\nConverts a color to an css hsl string.\n\n colorToCssRgb (hsl 1 1 0.5) -- \"hsl(1, 1, 0.5)\"\n", "type": "Color -> String" }, { "name": "colorToCssHsla", "comment": "\nConverts a color to an css hsla string.\n\n colorToCssRgb (hsla 1 1 0.5 1) -- \"hsla(56, 100%, 50%, 1)\"\n", "type": "Color -> String" }, { "name": "colorToCssRgb", "comment": "\nConverts a color to an css rgb string.\n\n colorToCssRgb (rgb 255 0 0 ) -- \"rgb(255, 0, 0)\"\n", "type": "Color -> String" }, { "name": "colorToCssRgba", "comment": "\nConverts a color to an css rgba string.\n\n colorToCssRgb (rgba 255 0 0 0.5) -- \"rgb(255, 0, 0, 0.5)\"\n", "type": "Color -> String" }, { "name": "colorToHex", "comment": "\nConverts a color to a hexadecimal string.\n\n hexToColor (rgb 255 0 0) -- \"#ff0000\"\n\n", "type": "Color -> String" }, { "name": "colorToLab", "comment": " Convert color to CIELAB- color space\n", "type": "Color -> { l : Float, a : Float, b : Float }" }, { "name": "hexToColor", "comment": "\nConverts a string to `Maybe` of color.\n\n hexToColor \"#ff0000\" -- \"Just RGB 255 0 0\"\n hexToColor \"ff0000\" -- \"Just RGB 255 0 0\"\n hexToColor \"1234\" -- \"Nothing\"\n\n", "type": "String -> Maybe Color" }, { "name": "labToColor", "comment": " Convert a color in CIELAB- color space to Elm `Color`\n", "type": "{ l : Float, a : Float, b : Float } -> Color" } ], "binops": [] }, { "name": "Color.Blending", "comment": "\n# Blending\nBased on the [Compositing and Blending Level 1](https://www.w3.org/TR/compositing-1/#blending)\n\n@docs multiply, screen, overlay, difference, exclusion, hardlight, softlight, colorBurn, colorDodge, lighten, darken\n", "unions": [], "aliases": [], "values": [ { "name": "colorBurn", "comment": "\nDarkens the backdrop color to reflect the source color.\nPainting with white produces no change.\n", "type": "Color -> Color -> Color" }, { "name": "colorDodge", "comment": "\nBrightens the backdrop color to reflect the source color.\nPainting with black produces no changes.\n", "type": "Color -> Color -> Color" }, { "name": "darken", "comment": "\nSelects the darker of the backdrop and source colors.\n", "type": "Color -> Color -> Color" }, { "name": "difference", "comment": "\nSubtracts the darker of the two constituent colors from the lighter color.\n", "type": "Color -> Color -> Color" }, { "name": "exclusion", "comment": "\nProduces an effect similar to that of the Difference mode but lower in contrast.\nPainting with white inverts the backdrop color; painting with black produces no change\n", "type": "Color -> Color -> Color" }, { "name": "hardlight", "comment": "\nMultiplies or screens the colors, depending on the source color value.\nThe effect is similar to shining a harsh spotlight on the backdrop.\n", "type": "Color -> Color -> Color" }, { "name": "lighten", "comment": "\nSelects the lighter of the backdrop and source colors.\n", "type": "Color -> Color -> Color" }, { "name": "multiply", "comment": "\nThe source color is multiplied by the destination color and replaces the destination.\n\nThe resultant color is always at least as dark as either the source or destination color.\nMultiplying any color with black results in black.\nMultiplying any color with white preserves the original color.\n", "type": "Color -> Color -> Color" }, { "name": "overlay", "comment": "\nMultiplies or screens the colors, depending on the backdrop color value.\n", "type": "Color -> Color -> Color" }, { "name": "screen", "comment": "\nMultiplies the complements of the backdrop and source color values,\n then complements the result.\n", "type": "Color -> Color -> Color" }, { "name": "softlight", "comment": "\nDarkens or lightens the colors, depending on the source color value.\nThe effect is similar to shining a diffused spotlight on the backdrop.\n", "type": "Color -> Color -> Color" } ], "binops": [] } ]