[{"name":"Color","comment":"\n\n@docs Color\n\n\n## Working with `Color`s\n\n\n### HSL values\n\nHSL is short for hue, saturation, and lightness (or luminosity, or random other\nL words depending on who you ask. Think \"brightness\", and you'll be on the right track).\n\nYou may be intuitively familiar with HSL color modeling if you've worked with a\ncolor wheel before. It also may be a great place to start working with color if\nyou enjoyed playing with unit circles and polar coordinates in trigonometry.\n\n![Representation of HSL values on a cylinder](https://upload.wikimedia.org/wikipedia/commons/6/6b/HSL_color_solid_cylinder_saturation_gray.png)\n(Image can be seen in context on the [HSL and HSV arcticle on Wikipedia](https://en.wikipedia.org/wiki/HSL_and_HSV). By HSL\\_color\\_solid\\_cylinder.png: SharkDderivative work: SharkD  Talk - HSL\\_color\\_solid\\_cylinder.png, CC BY-SA 3.0, <https://commons.wikimedia.org/w/index.php?curid=9801661>)\n\nHSL models hues as values on a circle. We can pick a hue by providing a degree.\nWe start at red -- meaning that we can get to red by saying that our hue is 0 degrees or\nby saying that our hue is at 360 degrees. Green is at 90, teal is at 180, and\nthere's a lovely purple is at 270.\n\nSaturation is how much of the hue is present. If the saturation is 100% (and the lightness is\na middling value) then you'll recognize the hue immediately. When you see a hue of 0 degrees,\na saturation of 100%, and lightness of 50%, your reaction is going to be \"Schnickeys! that's red!\"\nIf the saturation where to change to 0%, you'd see gray.\n\nLightness is brightness -- 100% is white and 0% is black, no matter the hue or saturation.\n\n@docs fromHSL, toHSL, toHSLString\n\n\n### RGB values\n\nRGB is short for red-green-blue. This representation of color specifies how much\nred, green, and blue are in the color.\n\n@docs fromRGB, toRGB, toRGBString\n\n\n## Color properties\n\n@docs luminance\n\n","unions":[{"name":"Color","comment":" ","args":[],"cases":[]}],"aliases":[],"values":[{"name":"fromHSL","comment":" Build a new color based on HSL values.\n\n    import Color exposing (Color)\n\n    red : Color\n    red =\n        Color.fromHSL ( 0, 100, 50 )\n\nThe hue is specified in degrees, and uses modular arithmetic such that whether you\npass in `0`, `360`, or `-360`, you'll still end up with a red hue.\n\nSaturation is a percentage value. It's clamped between 0 and 100 (inclusive).\nLightness is a percentage value. It's clamped between 0 and 100 (inclusive).\n\n","type":"( Basics.Float, Basics.Float, Basics.Float ) -> Color.Color"},{"name":"fromRGB","comment":" Build a new color based on RGB values.\n\n    import Color exposing (Color)\n\n    red : Color\n    red =\n        Color.fromRGB ( 255, 0, 0 )\n\n    green : Color\n    green =\n        Color.fromRGB ( 0, 255, 0 )\n\n    blue : Color\n    blue =\n        Color.fromRGB ( 0, 0, 255 )\n\nThis function clamps each rgb value between 0 and 255 (inclusive).\n\n","type":"( Basics.Float, Basics.Float, Basics.Float ) -> Color.Color"},{"name":"luminance","comment":" Luminance calculation adopted from <https://www.w3.org/TR/WCAG20-TECHS/G17.html>\n","type":"Color.Color -> Basics.Float"},{"name":"toHSL","comment":" Extract the hue, saturation, and lightness values from an existing Color.\n","type":"Color.Color -> ( Basics.Float, Basics.Float, Basics.Float )"},{"name":"toHSLString","comment":" Get the HSL representation of a color as a `String`.\n","type":"Color.Color -> String.String"},{"name":"toRGB","comment":" Extract the red, green, blue values from an existing Color.\n","type":"Color.Color -> ( Basics.Float, Basics.Float, Basics.Float )"},{"name":"toRGBString","comment":" Get the RGB representation of a color as a `String`.\n","type":"Color.Color -> String.String"}],"binops":[]},{"name":"Color.Blend","comment":"\n\n@docs add, subtract, multiply, divide\n\n","unions":[],"aliases":[],"values":[{"name":"add","comment":" Blends two colors together by adding the values in each channel.\n\nThat is, rgb(10, 20, 30) + rgb(10, 10, 10) = rgb(20, 30, 40).\n\n","type":"Color.Color -> Color.Color -> Color.Color"},{"name":"divide","comment":" Blend two colors together.\n\nUse this function to strip out tones & change them to white.\n\n","type":"Color.Color -> Color.Color -> Color.Color"},{"name":"multiply","comment":" Blend two colors together.\n\nAny color multiplied by black will result in black.\nAny color multiplied by white will result in the color.\nrgb(255, 0, 0) will keep reds and remove any greens and blues.\n\n","type":"Color.Color -> Color.Color -> Color.Color"},{"name":"subtract","comment":" Blends two colors together by subtracting the second color's channel values from\nthe first color's channel values.\n\nThat is, rgb(10, 20, 30) - rgb(10, 10, 10) = rgb(0, 10, 20).\n\n","type":"Color.Color -> Color.Color -> Color.Color"}],"binops":[]},{"name":"Color.Contrast","comment":" Use this module to determine whether colors may be used together.\n\n@docs WCAGLevel, sufficientContrast, contrast\n\n","unions":[{"name":"WCAGLevel","comment":" Read more about levels of conformance at [WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-levels-head).\n","args":[],"cases":[["AA",[]],["AAA",[]]]}],"aliases":[],"values":[{"name":"contrast","comment":" Calculate the contrast between two colors.\n","type":"Color.Color -> Color.Color -> Basics.Float"},{"name":"sufficientContrast","comment":" For a given WCAG level, calculate whether two colors have enough contrast\nwith each other to be used together (e.g., as a background and text color combination).\n\nTo meet AA level sufficiently, [follow these standards](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=143%2C146#contrast-minimum).\nTo meet AAA level sufficiently, [follow these standards](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=143%2C146#contrast-enhanced).\n\nTODO (consider this a headsup on likely API changes!):\n\n  - Use named fontweights rather than numbers\n  - Wrap fontsize with some constructors\n  - Cassowary constraint solving..?\n\n","type":"Color.Contrast.WCAGLevel -> { fontSize : Basics.Float, fontWeight : Basics.Int } -> Color.Color -> Color.Color -> Basics.Bool"}],"binops":[]},{"name":"Color.Generator","comment":"\n\n\n## Palette\n\nGenerate a palette based on a starting color.\n\n@docs complementary, triadic, splitComplementary, square, tetratic, monochromatic\n@docs highContrast\n\n\n## Modify a Color\n\n@docs shade, tint, tone\n@docs grayscale, invert\n@docs rotate, adjustSaturation\n@docs adjustLightness\n\n","unions":[],"aliases":[],"values":[{"name":"adjustLightness","comment":" Modify the lightness of a color (see notes on HSL color space).\n","type":"Basics.Float -> Color.Color -> Color.Color"},{"name":"adjustSaturation","comment":" Modify the saturation of a color (see notes on HSL color space).\n","type":"Basics.Float -> Color.Color -> Color.Color"},{"name":"complementary","comment":" Find the color opposite the color you pass in on the color wheel.\n\nE.g., if you pass in a reddish color, you should expect to get back a tealish color.\n\n","type":"Color.Color -> Color.Color"},{"name":"grayscale","comment":" Convert the color you pass in to a grayscale version. Essentially this uses the\nluminance of the color you pass in to make a corresponding white <-> black value.\n","type":"Color.Color -> Color.Color"},{"name":"highContrast","comment":" Find the highest contrast color to use in concert with the passed-in color.\n\n<http://www.worqx.com/color/itten.htm>\n\n","type":"Color.Color -> Color.Color"},{"name":"invert","comment":" Use this function to invert a color. E.g., black inverted is white, white inverted is black....\n","type":"Color.Color -> Color.Color"},{"name":"monochromatic","comment":" Create a monochromatic palette. The `Float` argument is size of the Lightness\nsteps that you'd like in the palette.\n\nIf you wanted a grayscale palette, and you wanted it to have five colors, you could do\nsomething like this:\n\n    grayscalePalette =\n        monochromatic 20 black\n\nColors will be arranged from darkest to lightest.\n\n","type":"Basics.Float -> Color.Color -> List.List Color.Color"},{"name":"rotate","comment":" Rotate a color by degrees [0, 360).\n","type":"Basics.Float -> Color.Color -> Color.Color"},{"name":"shade","comment":" Use this function to produce a new shade of the Color.\nNote: shades will be darker than the starting color. If you want a lighter color,\nplease see `tint`.\n\nPass in the percentage value by which you want to darken the color.\n\n","type":"Basics.Float -> Color.Color -> Color.Color"},{"name":"splitComplementary","comment":" Build a three-color scheme by rotating the same amount from the initial color\nin both directions.\n\n`triadic`, the evenly-spaced 3-color scheme, can be defined in terms of this function:\n\n    triadic color =\n        splitComplementary 120 color\n\nInitial rotation is clamped between 0 and 180.\n\n","type":"Basics.Float -> Color.Color -> ( Color.Color, Color.Color )"},{"name":"square","comment":" Find four equally-spaced colors along the color wheel starting from the passed-in color.\n","type":"Color.Color -> ( Color.Color, Color.Color, Color.Color )"},{"name":"tetratic","comment":" Find four colors along the color wheel starting from the passed-in color.\n\nThis differs from the `square` helper in that our values aren't equally spaced --\nwe are selecting colors on the color wheel with a rectangle. We can actually define\n`square` in terms of this function as follows:\n\n    square color =\n        tetratic 60 color\n\nWe'll rotate the number of degrees passed in along the color wheel to find our first\ncolor. Then we'll rotate the \"length\" of the rectangle -- as much as we need to in order\nto make it all the way around.\n\nInitial rotation is clamped between 0 and 180.\n\n","type":"Basics.Float -> Color.Color -> ( Color.Color, Color.Color, Color.Color )"},{"name":"tint","comment":" Use this function to produce a new tint of the Color.\nNote: tints will be lighter than the starting color. If you want a darker color,\nplease see `shade`.\n\nPass in the percentage value by which you want to lighten the color.\n\n","type":"Basics.Float -> Color.Color -> Color.Color"},{"name":"tone","comment":" Use this function to produce a new tone of the Color.\n\nEssentially this means adding grays to the color you pass in. It's implemented,\nthough, by adjusting the saturation of the color. You can pass in a positive or\nnegative percentage value.\n\n","type":"Basics.Float -> Color.Color -> Color.Color"},{"name":"triadic","comment":" Find the other two colors in the triadic scheme defined by the color passed in.\n\nTriadic color schemes are evenly-spaced, so each of the three colors is 120 degrees\nfrom the others.\n\nThe internet says this scheme will be vibrant, and that you should\nmostly use one of the three colors and only use the other two for accents.\n\n","type":"Color.Color -> ( Color.Color, Color.Color )"}],"binops":[]},{"name":"Palette.X11","comment":"\n\n\n## Pinks\n\n@docs pink, lightPink, hotPink, deepPink, paleVioletRed, mediumVioletRed\n\n\n## Reds\n\n@docs lightSalmon, salmon, darkSalmon, lightCoral, indianRed, crimson, firebrick, darkRed, red\n\n\n## Orange-Reds\n\n@docs orangeRed, tomato, coral, darkOrange, orange\n\n\n## Yellows\n\n@docs yellow, lightYellow, lemonChiffon, lightGoldenrodYellow, papayaWhip, moccasin, peachPuff, paleGoldenrod, khaki, darkKhaki, gold\n\n\n## Browns\n\n@docs cornsilk, blanchedAlmond, bisque, navajoWhite, wheat, burlywood, tan, rosyBrown, sandyBrown, goldenrod, darkGoldenrod, peru, chocolate, saddleBrown, sienna, brown, maroon\n\n\n## Greens\n\n@docs darkOliveGreen, olive, oliveDrab, yellowGreen, limeGreen, lime, lawnGreen, chartreuse, greenYellow, springGreen, mediumSpringGreen, lightGreen, paleGreen, darkSeaGreen, mediumAquamarine, mediumSeaGreen, seaGreen, forestGreen, green, darkGreen\n\n\n## Cyans\n\n@docs aqua, cyan, lightCyan, paleTurquoise, aquamarine, turquoise, mediumTurquoise, darkTurquoise, lightSeaGreen, cadetBlue, darkCyan, teal\n\n\n## Blues\n\n@docs lightSteelBlue, powderBlue, lightBlue, skyBlue, lightSkyBlue, deepSkyBlue, dodgerBlue, cornflowerBlue, steelBlue, royalBlue, blue, mediumBlue, darkBlue, navy, midnightBlue\n\n\n## Purples\n\n@docs lavender, thistle, plum, violet, orchid, fuchsia, magenta, mediumOrchid, mediumPurple, blueViolet, darkViolet, darkOrchid, darkMagenta, purple, indigo, darkSlateBlue, slateBlue, mediumSlateBlue\n\n\n## Whites\n\n@docs white, snow, honeydew, mintCream, azure, aliceBlue, ghostWhite, whiteSmoke, seashell, beige, oldLace, floralWhite, ivory, antiqueWhite, linen, lavenderBlush, mistyRose\n\n\n## Blacks and Grays\n\n@docs gainsboro, lightGray, silver, darkGray, gray, dimGray, lightSlateGray, slateGray, darkSlateGray, black\n\n","unions":[],"aliases":[],"values":[{"name":"aliceBlue","comment":" ","type":"Color.Color"},{"name":"antiqueWhite","comment":" ","type":"Color.Color"},{"name":"aqua","comment":" ","type":"Color.Color"},{"name":"aquamarine","comment":" ","type":"Color.Color"},{"name":"azure","comment":" ","type":"Color.Color"},{"name":"beige","comment":" ","type":"Color.Color"},{"name":"bisque","comment":" ","type":"Color.Color"},{"name":"black","comment":" ","type":"Color.Color"},{"name":"blanchedAlmond","comment":" ","type":"Color.Color"},{"name":"blue","comment":" ","type":"Color.Color"},{"name":"blueViolet","comment":" ","type":"Color.Color"},{"name":"brown","comment":" ","type":"Color.Color"},{"name":"burlywood","comment":" ","type":"Color.Color"},{"name":"cadetBlue","comment":" ","type":"Color.Color"},{"name":"chartreuse","comment":" ","type":"Color.Color"},{"name":"chocolate","comment":" ","type":"Color.Color"},{"name":"coral","comment":" ","type":"Color.Color"},{"name":"cornflowerBlue","comment":" ","type":"Color.Color"},{"name":"cornsilk","comment":" ","type":"Color.Color"},{"name":"crimson","comment":" ","type":"Color.Color"},{"name":"cyan","comment":" ","type":"Color.Color"},{"name":"darkBlue","comment":" ","type":"Color.Color"},{"name":"darkCyan","comment":" ","type":"Color.Color"},{"name":"darkGoldenrod","comment":" ","type":"Color.Color"},{"name":"darkGray","comment":" ","type":"Color.Color"},{"name":"darkGreen","comment":" ","type":"Color.Color"},{"name":"darkKhaki","comment":" ","type":"Color.Color"},{"name":"darkMagenta","comment":" ","type":"Color.Color"},{"name":"darkOliveGreen","comment":" ","type":"Color.Color"},{"name":"darkOrange","comment":" ","type":"Color.Color"},{"name":"darkOrchid","comment":" ","type":"Color.Color"},{"name":"darkRed","comment":" ","type":"Color.Color"},{"name":"darkSalmon","comment":" ","type":"Color.Color"},{"name":"darkSeaGreen","comment":" ","type":"Color.Color"},{"name":"darkSlateBlue","comment":" ","type":"Color.Color"},{"name":"darkSlateGray","comment":" ","type":"Color.Color"},{"name":"darkTurquoise","comment":" ","type":"Color.Color"},{"name":"darkViolet","comment":" ","type":"Color.Color"},{"name":"deepPink","comment":" ","type":"Color.Color"},{"name":"deepSkyBlue","comment":" ","type":"Color.Color"},{"name":"dimGray","comment":" ","type":"Color.Color"},{"name":"dodgerBlue","comment":" ","type":"Color.Color"},{"name":"firebrick","comment":" ","type":"Color.Color"},{"name":"floralWhite","comment":" ","type":"Color.Color"},{"name":"forestGreen","comment":" ","type":"Color.Color"},{"name":"fuchsia","comment":" ","type":"Color.Color"},{"name":"gainsboro","comment":" ","type":"Color.Color"},{"name":"ghostWhite","comment":" ","type":"Color.Color"},{"name":"gold","comment":" ","type":"Color.Color"},{"name":"goldenrod","comment":" ","type":"Color.Color"},{"name":"gray","comment":" ","type":"Color.Color"},{"name":"green","comment":" ","type":"Color.Color"},{"name":"greenYellow","comment":" ","type":"Color.Color"},{"name":"honeydew","comment":" ","type":"Color.Color"},{"name":"hotPink","comment":" ","type":"Color.Color"},{"name":"indianRed","comment":" ","type":"Color.Color"},{"name":"indigo","comment":" ","type":"Color.Color"},{"name":"ivory","comment":" ","type":"Color.Color"},{"name":"khaki","comment":" ","type":"Color.Color"},{"name":"lavender","comment":" ","type":"Color.Color"},{"name":"lavenderBlush","comment":" ","type":"Color.Color"},{"name":"lawnGreen","comment":" ","type":"Color.Color"},{"name":"lemonChiffon","comment":" ","type":"Color.Color"},{"name":"lightBlue","comment":" ","type":"Color.Color"},{"name":"lightCoral","comment":" ","type":"Color.Color"},{"name":"lightCyan","comment":" ","type":"Color.Color"},{"name":"lightGoldenrodYellow","comment":" ","type":"Color.Color"},{"name":"lightGray","comment":" ","type":"Color.Color"},{"name":"lightGreen","comment":" ","type":"Color.Color"},{"name":"lightPink","comment":" ","type":"Color.Color"},{"name":"lightSalmon","comment":" ","type":"Color.Color"},{"name":"lightSeaGreen","comment":" ","type":"Color.Color"},{"name":"lightSkyBlue","comment":" ","type":"Color.Color"},{"name":"lightSlateGray","comment":" ","type":"Color.Color"},{"name":"lightSteelBlue","comment":" ","type":"Color.Color"},{"name":"lightYellow","comment":" ","type":"Color.Color"},{"name":"lime","comment":" ","type":"Color.Color"},{"name":"limeGreen","comment":" ","type":"Color.Color"},{"name":"linen","comment":" ","type":"Color.Color"},{"name":"magenta","comment":" ","type":"Color.Color"},{"name":"maroon","comment":" ","type":"Color.Color"},{"name":"mediumAquamarine","comment":" ","type":"Color.Color"},{"name":"mediumBlue","comment":" ","type":"Color.Color"},{"name":"mediumOrchid","comment":" ","type":"Color.Color"},{"name":"mediumPurple","comment":" ","type":"Color.Color"},{"name":"mediumSeaGreen","comment":" ","type":"Color.Color"},{"name":"mediumSlateBlue","comment":" ","type":"Color.Color"},{"name":"mediumSpringGreen","comment":" ","type":"Color.Color"},{"name":"mediumTurquoise","comment":" ","type":"Color.Color"},{"name":"mediumVioletRed","comment":" ","type":"Color.Color"},{"name":"midnightBlue","comment":" ","type":"Color.Color"},{"name":"mintCream","comment":" ","type":"Color.Color"},{"name":"mistyRose","comment":" ","type":"Color.Color"},{"name":"moccasin","comment":" ","type":"Color.Color"},{"name":"navajoWhite","comment":" ","type":"Color.Color"},{"name":"navy","comment":" ","type":"Color.Color"},{"name":"oldLace","comment":" ","type":"Color.Color"},{"name":"olive","comment":" ","type":"Color.Color"},{"name":"oliveDrab","comment":" ","type":"Color.Color"},{"name":"orange","comment":" ","type":"Color.Color"},{"name":"orangeRed","comment":" ","type":"Color.Color"},{"name":"orchid","comment":" ","type":"Color.Color"},{"name":"paleGoldenrod","comment":" ","type":"Color.Color"},{"name":"paleGreen","comment":" ","type":"Color.Color"},{"name":"paleTurquoise","comment":" ","type":"Color.Color"},{"name":"paleVioletRed","comment":" ","type":"Color.Color"},{"name":"papayaWhip","comment":" ","type":"Color.Color"},{"name":"peachPuff","comment":" ","type":"Color.Color"},{"name":"peru","comment":" ","type":"Color.Color"},{"name":"pink","comment":" ","type":"Color.Color"},{"name":"plum","comment":" ","type":"Color.Color"},{"name":"powderBlue","comment":" ","type":"Color.Color"},{"name":"purple","comment":" ","type":"Color.Color"},{"name":"red","comment":" ","type":"Color.Color"},{"name":"rosyBrown","comment":" ","type":"Color.Color"},{"name":"royalBlue","comment":" ","type":"Color.Color"},{"name":"saddleBrown","comment":" ","type":"Color.Color"},{"name":"salmon","comment":" ","type":"Color.Color"},{"name":"sandyBrown","comment":" ","type":"Color.Color"},{"name":"seaGreen","comment":" ","type":"Color.Color"},{"name":"seashell","comment":" ","type":"Color.Color"},{"name":"sienna","comment":" ","type":"Color.Color"},{"name":"silver","comment":" ","type":"Color.Color"},{"name":"skyBlue","comment":" ","type":"Color.Color"},{"name":"slateBlue","comment":" ","type":"Color.Color"},{"name":"slateGray","comment":" ","type":"Color.Color"},{"name":"snow","comment":" ","type":"Color.Color"},{"name":"springGreen","comment":" ","type":"Color.Color"},{"name":"steelBlue","comment":" ","type":"Color.Color"},{"name":"tan","comment":" ","type":"Color.Color"},{"name":"teal","comment":" ","type":"Color.Color"},{"name":"thistle","comment":" ","type":"Color.Color"},{"name":"tomato","comment":" ","type":"Color.Color"},{"name":"turquoise","comment":" ","type":"Color.Color"},{"name":"violet","comment":" ","type":"Color.Color"},{"name":"wheat","comment":" ","type":"Color.Color"},{"name":"white","comment":" ","type":"Color.Color"},{"name":"whiteSmoke","comment":" ","type":"Color.Color"},{"name":"yellow","comment":" ","type":"Color.Color"},{"name":"yellowGreen","comment":" ","type":"Color.Color"}],"binops":[]}]