[ { "name": "Color.Gradient", "comment": "\n# Gradient\n@docs GradientStop, Gradient, Palette, linearGradient, linearGradientFromStops, CosineGradientSetting, cosineGradient\n", "unions": [], "aliases": [ { "name": "CosineGradientSetting", "comment": "\n parameters for calculate RGB values for cosine gradients\n", "args": [], "type": "( Float, Float, Float )" }, { "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": "cosineGradient", "comment": "\n Create a gradient based on the on an [idea by Iñigo Quílez](http://www.iquilezles.org/www/articles/palettes/palettes.htm)\n For an interactive example have a look at Karsten Schmidt's example from his [thi.ng library](http://dev.thi.ng/gradients/)\n", "type": "CosineGradientSetting -> CosineGradientSetting -> CosineGradientSetting -> CosineGradientSetting -> Int -> Palette" }, { "name": "linearGradient", "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": "linearGradientFromStops", "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, mix, weightedMix\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": "mix", "comment": " Mixes two colors together. This is the same as calling `weightedMix` with a weight of 0.5.\n", "type": "Color -> 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\nThat means that lightening an already-light color with `scaleHsl` won’t change the lightness much, but lightening\na dark color by the same amount will change it more dramatically.\n\nFor example, the lightness of a color can be anywhere between 0 and 1.0. If `scaleHsl (0, 0.4, 0) color` is called,\nthe 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\nand 0.\n\nThe values of the supplied tuple scale saturation, lightness, and opacity, respectively, and have a valid range of\n-1.0 to 1.0.\n\nThis 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\nThat means that reddening a already-red color with `scaleRgb` won’t change the redness much, but reddening a color\nwith little or no red by the same amount will change it more dramatically.\n\nFor example, the redness of a color can be anywhere between 0 and 255. If `scaleRgb (0.4, 0, 0, 0) color` is called,\nthe 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\nand 0.\n\nThe 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\nThis 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" }, { "name": "weightedMix", "comment": " Mixes two colors together.\n\nThis function takes the average of each of the RGB components, weighted by a provided value between 0 and 1.0. The\nopacity of the colors is also considered when weighting the components.\n\nThe weight specifies the amount of the first color that should be included in the returned color. For example, a weight\nof 0.5 means that half the first color and half the second color should be used. A weight of 0.25 means that a quarter\nof the first color and three quarters of the second color should be used.\n\nThis function uses the same algorithm as the [mix](http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method) function in Sass.\n", "type": "Color -> Color -> Float -> 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\n@docs hexToColor, colorToLab, labToColor\n", "unions": [], "aliases": [], "values": [ { "name": "colorToCssHsl", "comment": "\nConverts a color to an css hsl string.\n\n colorToCssHsl (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 colorToCssHsla (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 colorToCssRgba (rgba 255 0 0 0.5) -- \"rgba(255, 0, 0, 0.5)\"\n", "type": "Color -> String" }, { "name": "colorToHex", "comment": "\nConverts a color to a hexadecimal string.\n\n colorToHex (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\" -- \"Ok (RGB 255 0 0)\"\n hexToColor \"#f00\" -- \"Ok (RGB 255 0 0)\"\n hexToColor \"ff0000\" -- \"Ok (RGB 255 0 0)\"\n hexToColor \"f00\" -- \"Ok (RGB 255 0 0)\"\n hexToColor \"1234\" -- \"Err \\\"Parsing hex regex failed\\\"\"\n\n", "type": "String -> Result String 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": [] }, { "name": "Color.Accessibility", "comment": "\n# Accessibility\nFunctions to measure and maximize accessibility.\n\n@docs contrastRatio, luminance, maximumContrast\n", "unions": [], "aliases": [], "values": [ { "name": "contrastRatio", "comment": "\nGet the contrast ratio of two colors represented as a Float.\n\nFormula based on:\nhttps://www.w3.org/TR/WCAG20/#contrast-ratiodef\n\n contrastRatio Color.black Color.white -- 21.0\n contrastRatio Color.blue Color.blue -- 1.0\n", "type": "Color -> Color -> Float" }, { "name": "luminance", "comment": "\nGet the relative luminance of a color represented as a Float.\n\nFormula based on:\nhttps://www.w3.org/TR/WCAG20/#relativeluminancedef\n\n luminance Color.black -- 0.0\n luminance Color.white -- 1.0\n", "type": "Color -> Float" }, { "name": "maximumContrast", "comment": "\nReturns the color with the highest contrast to the base color.\n\n bgColor = Color.darkBlue\n textOptions = [ Color.white, Color.purple, Color.black ]\n\n maximumContrast bgColor textOptions -- Just Color.white\n", "type": "Color -> List Color -> Maybe Color" } ], "binops": [] } ]