metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Manipulate and transform colors and can create any color schemes. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Color module - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Color module</a></li> <li class="toc-entry"><a href="#_cm_about">About</a></li> <li class="toc-entry"><a href="#_cm_formats">Formats</a></li> <li class="toc-entry"><a href="#_cm_palettes">Palettes</a></li> <li class="toc-entry"><a href="#_cm_check-convert">Check & convert</a></li> <li class="toc-entry"><a href="#_cm-tone-functions">Tone functions</a></li> <li class="toc-entry"> <a href="#_cm_schemes">Schemes</a> <ul> <li class="toc-entry"><a href="#_cm_schemes_mono">Monochromatic</a></li> <li class="toc-entry"><a href="#_cm_schemes_complement">Complementary</a></li> <li class="toc-entry"><a href="#_cm_schemes_split">Split-complementary</a></li> <li class="toc-entry"><a href="#_cm_schemes_double">Double-complementary</a></li> <li class="toc-entry"><a href="#_cm_schemes_analog">Analogous</a></li> <li class="toc-entry"><a href="#_cm_schemes_triadic">Triadic</a></li> <li class="toc-entry"><a href="#_cm_schemes_tetra">Tetradic</a></li> <li class="toc-entry"><a href="#_cm_schemes_square">Square</a></li> </ul> </li> <li class="toc-entry"><a href="#_cm_websafe">Websafe colors</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Color module</h1> <p class="text-leader"> Metro 4 has a built-in module for working with colors. You can manipulate and transform colors and can create any color schemes. </p>  <h3 id="_cm_about">About</h3> <p> All routines for works with colors are in the object <code>Metro.colors</code>. Module works with formats: <code>rgb</code>, <code>rgba</code>, <code>hex</code>, <code>hsv</code>, <code>hsl</code> and <code>cmyk</code>. You can use color conversion functions, as well as functions for generating common color schemes <code>monochromatic</code>, <code>complementary</code>, <code>split-complementary</code>, <code>double-complementary</code>, <code>analogous</code>, <code>triadic</code>, <code>tetradic</code> and <code>square</code>. Also you can use special functions <code>grayscale</code>, <code>darken</code>, <code>lighten</code>. </p> <h3 id="_cm_formats">Formats</h3> <p> Module works with any formats: <code>rgb</code>, <code>rgba</code>, <code>hex</code>, <code>hsv</code>, <code>hsl</code> and <code>cmyk</code>. Each format is used as an <code>object</code>, exclude <code>hex</code> format. It stored as a <code>string</code>. </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Color</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>hex</code></td> <td> A <code>hex</code> color is specified with: <code>#RRGGBB</code>. RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color. For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00. </td> </tr> <tr> <td><code>rgb</code></td> <td> A <code>rgb</code> color is specified with: <code>{r, g, b}</code> object. An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255. For example, rgb(0, 0, 255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0. </td> </tr> <tr> <td><code>rgba</code></td> <td> A <code>rgba</code> color is specified with: <code>{r, g, b, a}</code> object. An RGBA color value is specified with: rgb(red, green, blue, alpha). Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255 and alpha specified opacity from 0 to 1. </tr> <tr> <td><code>hsv</code></td> <td> HSV stands for hue, saturation, and value. A <code>hsv</code> color is specified with: <code>{h, s, v}</code> object. </td> </tr> <tr> <td><code>hsl</code></td> <td> HSL stands for hue, saturation, and lightness. A <code>hsl</code> color is specified with: <code>{h, s, l}</code> object. </td> </tr> <tr> <td><code>cmyk</code></td> <td> CMYK colors is a combination of <code>CYAN</code>, <code>MAGENTA</code>, <code>YELLOW</code>, and <code>BLACK</code>. A <code>cmyk</code> color is specified with: <code>{c, m, y, k}</code> object. </td> </tr> </tbody> </table> <h3 id="_cm_palettes">Palettes</h3> <p> Module contains three color palettes: <code>metro</code> - 21 colors, <code>standard</code> - 140 colors and mix <code>metro</code> and <code>standard</code> with metro in priority. You can get color names with function <code>palette(name)</code> </p> <pre><code> var metro = Metro.colors.palette(Metro.colors.PALETTES.METRO); var standard = Metro.colors.palette(Metro.colors.PALETTES.STANDARD); var all = Metro.colors.palette(Metro.colors.PALETTES.ALL); ...result for metro [ "lime", "green", "emerald", "blue", "teal", "cyan", "cobalt", "indigo", "violet", "pink", "magenta", "crimson", "red", "orange", "amber", "yellow", "brown", "olive", "steel", "mauve", "taupe" ] </code></pre> <p> You can get color <code>hex</code> value with function <code>color(name, palette)</code>. </p> <pre><code> var col = Metro.colors.color("cyan", Metro.colors.PALETTES.METRO); ...value for col is #1ba1e2 </code></pre>  <h3 id="_cm_check-convert">Check & convert</h3> <p> Metro 4 contains functions for check color values and convert colors from onw to others. </p> <h4>Check functions</h4> <p> The following functions are used to check the color value: </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Function</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>isColor(val)</code></td> <td>Check if value is a metro 4 color value</td> </tr> <tr> <td><code>isHEX(val)</code></td> <td>Check if value is a hex color value</td> </tr> <tr> <td><code>isRGB(val)</code></td> <td>Check if value is a rgb color value</td> </tr> <tr> <td><code>isRGBA(val)</code></td> <td>Check if value is a rgba color value</td> </tr> <tr> <td><code>isHSV(val)</code></td> <td>Check if value is a hsv color value</td> </tr> <tr> <td><code>isHSL(val)</code></td> <td>Check if value is a hsl color value</td> </tr> <tr> <td><code>isHSLA(val)</code></td> <td>Check if value is a hsla color value</td> </tr> <tr> <td><code>isCMYK(val)</code></td> <td>Check if value is a hsl color value</td> </tr> <tr> <td><code>is(val)</code></td> <td>Return type of color value</td> </tr> <tr> <td><code>isLight(color)</code></td> <td>Return true if color is light</td> </tr> <tr> <td><code>isDark(color)</code></td> <td>Return true if color is dark</td> </tr> </tbody> </table> <h4>Convert functions</h4> <p> The following functions are used to convert a color value from one to others in Metro 4 color formats: </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Function</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>toHEX(val)</code></td> <td>Any type color value to hex: <code>#RRGGBB</code></td> </tr> <tr> <td><code>toRGB(val)</code></td> <td>Any type color value to rgb: <code>{r, g, b}</code></td> </tr> <tr> <td><code>toRGBA(val, alpha)</code></td> <td>Any type color value to rgba: <code>{r, g, b, a}</code></td> </tr> <tr> <td><code>toHSV(val)</code></td> <td>Any type color value to hsv: <code>{h, s, v}</code></td> </tr> <tr> <td><code>toHSL(val)</code></td> <td>Any type color value to hsl: <code>{h, s, l}</code></td> </tr> <tr> <td><code>toHSLA(val)</code></td> <td>Any type color value to hsla: <code>{h, s, l, a}</code></td> </tr> <tr> <td><code>toCMYK(val)</code></td> <td>Any type color value to hsl: <code>{c, m, y, k}</code></td> </tr> </tbody> </table> <pre><code> var cm = Metro.colors; var c = "#cc0000"; cm.toHEX(c); // #cc0000 cm.toRGB(c); // {r: 204, g: 0, b: 0} cm.toRGBA(c, .5); // {r: 204, g: 0, b: 0, a: 0.5} cm.toHSV(c); // {h: 0, s: 1, v: 0.8} cm.toHSL(c); // {h: 0, s: 1, l: 0.4} cm.toCMYK(c); // {c: 0, m: 100, y: 100, k: 20} </code></pre> <p> The following functions are used to convert a color value to string value: </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Function</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>toHexString(val)</code></td> <td>Return hexdecimal string for color: <code>#RRGGBB</code></td> </tr> <tr> <td><code>toRgbString(val)</code></td> <td>Return rgb string for color: <code>rgb(r, g, b)</code></td> </tr> <tr> <td><code>toRgbaString(val)</code></td> <td>Return rgba string for color: <code>rgba(r, g, b, a)</code></td> </tr> <tr> <td><code>toHsvString(val)</code></td> <td>Return hsv string for color: <code>hsv(h, s, v)</code></td> </tr> <tr> <td><code>toHslString(val)</code></td> <td>Return hsl string for color: <code>hsl(h, s, l)</code></td> </tr> <tr> <td><code>toHslaString(val)</code></td> <td>Return hsl string for color: <code>hsl(h, s, l)</code></td> </tr> <tr> <td><code>toCmykString(val)</code></td> <td>Return cmyk string for color: <code>cmyk(c, m, y, k)</code></td> </tr> <tr> <td><code>toString(val)</code></td> <td>Return string for color value</td> </tr> </tbody> </table> <pre><code> var cm = Metro.colors; var c = "#cc0000"; cm.toHexString(c); // #cc0000 cm.toRgbString(c); // rgb(204,0,0) cm.toRgbaString(c); // rgba(204,0,0,1) cm.toHsvString(c); // hsv(0,1,0.8) cm.toHslString(c); // hsl(0,1,0.4) cm.toCmykString(c); // cmyk(0,100,100,20) </code></pre> <h3 id="_cm-tone-functions">Tone functions</h3> <p> Metro 4 color module contains functions to change color tone: <code>grayscale</code>, <code>lighten</code> and <code>darken</code>. </p> <div class="example"> <div class="row text-center"> <div class="cell-md-3 p-4 fg-white" style="background: #2b2b2b">grayscale</div> <div class="cell-md-3 p-4 fg-white" style="background: #d60a0a">lighten</div> <div class="cell-md-3 p-4 fg-white" style="background: #cc0000">normal</div> <div class="cell-md-3 p-4 fg-white" style="background: #c20000">darken</div> </div> </div> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Function</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>grayscale(color)</code></td> <td>Calculate grayscale color for color value</td> </tr> <tr> <td><code>lighten(color, percent)</code></td> <td>Lighten color. Percent value must be from 0 to 100.</td> </tr> <tr> <td><code>darken(color, percent)</code></td> <td>Darken color. Percent value must be from 0 to 100.</td> </tr> </tbody> </table> <pre><code> var cm = Metro.colors; var c = "#cc0000"; cm.grayscale(c); // #2b2b2b cm.lighten(c, 10); // #d60a0a cm.darken(c, 10); // #c20000 </code></pre> <h3 id="_cm_schemes">Schemes</h3> <p> Metro 4 color module contains function <code>getScheme()</code>. This function generate any color schemes from base color: <code>monochromatic</code>, <code>complementary</code>, <code>split-complementary</code>, <code>double-complementary</code>, <code>analogous</code>, <code>triadic</code>, <code>tetradic</code> and <code>square</code>. </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Function</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>getScheme(color, name,<br class="d-block d-none-md"> format, options)</code></td> <td> Generate color scheme from base color. <code>color</code> - color in Metro 4 color module format, <code>name</code> - scheme name, <code>format</code> - format for return values (hex, rgb, rgba, hsv, hsl, cmyk), <code>options</code> - additional options. </td> </tr> </tbody> </table> <pre><code> var cm = Metro.colors; var colors = cm.getScheme("#cc0000", "mono", "hex", {algorithm: 1}); </code></pre> <h5>Options</h5> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Options</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>angle</code></td> <td>Angle for analogous and split-complementary schemes</td> </tr> <tr> <td><code>algorithm</code></td> <td>Algorithm for monochromatic schemes (1, 2, 3, 4)</td> </tr> <tr> <td><code>tint1, tint2</code></td> <td>This option use for monochromatic schemes 1 for create two left colors</td> </tr> <tr> <td><code>shade1, shade2</code></td> <td>This option use for monochromatic schemes 1 for create two right colors</td> </tr> <tr> <td><code>distance</code></td> <td>This option use for monochromatic schemes 2, 3 and determines how many colors will be generated</td> </tr> <tr> <td><code>step</code></td> <td>This option use for monochromatic schemes 2, 3, 4 and determines with what step the color will be generated. Default is <code>0.1</code>. Value must be in range from 0 to 1.</td> </tr> <tr> <td><code>alpha</code></td> <td>This option use for default alpha channel value for rgba colors. </tr> </tbody> </table> <p> Also you can set options with function <code>setup({...})</code>. </p> <pre><code> var cm = Metro.colors, colors; cm.setup({ alpha: .5, algorithm: 1 }) colors = cm.getScheme("#cc0000", "mono", "rgba"); </code></pre>  <h4 id="_cm_schemes_mono">Monochromatic</h4> <p> Monochromatic colors are all the colors (tones, tints and shades ) of a single hue. Monochromatic color schemes are derived from a single base hue and extended using its shades, tones and tints. Tints are achieved by adding white and shades and tones are achieved by adding a darker color, grey or black. Monochromatic color schemes provide opportunities in art and visual communications design as they allow for a greater range of contrasting tones that can be used to attract attention, create focus and support legibility. </p> <div class="example"> <div class="row flex-align-center"> <div class="cell-md-6 text-center"> <img src="images/monochromatic.jpg" style="height: 150px;"> </div> <div class="cell-md-6"> <div id="s-mono"></div> </div> </div> </div> <pre><code> var cm = Metro.colors, colors, color = "#ffff00"; colors = cm.getScheme(color, "mono", "hex"); </code></pre> <h4 id="_cm_schemes_analog">Analogous</h4> <p> Analogous (or adjacent colors) is a color scheme using one base color and two secondary colors placed symetrically around it on the color wheel. The base color is main, while the secondary colors should be used only for highlights and accents. It always looks very elegant and clear. There is no tension in the palette, and typically it’s uniformly all warm, or all cold. If a base color on the warm-cold border is chosen, the color with opposite “temperature” may be used for accenting the other two colors. </p> <div class="example"> <div class="row flex-align-center"> <div class="cell-md-6 text-center"> <img src="images/analog.jpg" style="height: 150px;"> </div> <div class="cell-md-6"> <div id="s-analog"></div> </div> </div> </div> <pre><code> var cm = Metro.colors, colors, color = "#ffff00"; colors = cm.getScheme(color, "analog", "hex"); </code></pre> <h4 id="_cm_schemes_complement">Complementary</h4> <p> Complementary is a color scheme using one base color and its complement, the color on the exact opposite side of the color wheel. The base color is main and dominant, while the complementary color is used only as an accent. </p> <div class="example"> <div class="row flex-align-center"> <div class="cell-md-6 text-center"> <img src="images/complementary.jpg" style="height: 150px;"> </div> <div class="cell-md-6"> <div id="s-complement"></div> </div> </div> </div> <pre><code> var cm = Metro.colors, colors, color = "#ffff00"; colors = cm.getScheme(color, "complement", "hex"); </code></pre> <h4 id="_cm_schemes_split">Split-complementary</h4> <p> Split-complementary is a color scheme using one base color and two secondary colors. Instead of using a complementary color, two colors placed symetrically around it on the color wheel are used. The base color is main, while the secondary colors should be used only for highlights and accents. </p> <div class="example"> <div class="row flex-align-center"> <div class="cell-md-6 text-center"> <img src="images/split-complementary.jpg" style="height: 150px;"> </div> <div class="cell-md-6"> <div id="s-split"></div> </div> </div> </div> <pre><code> var cm = Metro.colors, colors, color = "#ffff00"; colors = cm.getScheme(color, "split", "hex"); </code></pre> <h4 id="_cm_schemes_double">Double-complementary</h4> <p> Double-complementary is a color scheme using two sets of base color and their complements with next rules on wheel: 180 °, -30 °, 180 °. Both base colors are equivalent, cannot be decided which one should be the main color (though a designer could choose one). Less distance between two base colors causes less tension in the result. However, this scheme is always more "nervous” and “action” than other schemes. While working with it, we have to take care especially of relations between one color and the complement of its adjacent color. </p> <div class="example"> <div class="row flex-align-center"> <div class="cell-md-6 text-center"> <img src="images/double-complementary.jpg" style="height: 150px;"> </div> <div class="cell-md-6"> <div id="s-double"></div> </div> </div> </div> <pre><code> var cm = Metro.colors, colors, color = "#ffff00"; colors = cm.getScheme(color, "double", "hex"); </code></pre> <h4 id="_cm_schemes_tetra">Tetradic</h4> <p> Tetraqic is a color scheme using two sets of base color and their complements with next rules on wheel: 180 °, 30 °, 180 °. Both base colors are equivalent, cannot be decided which one should be the main color (though a designer could choose one). Less distance between two base colors causes less tension in the result. However, this scheme is always more "nervous” and “action” than other schemes. While working with it, we have to take care especially of relations between one color and the complement of its adjacent color. </p> <div class="example"> <div class="row flex-align-center"> <div class="cell-md-6 text-center"> <img src="images/tetradic.jpg" style="height: 150px;"> </div> <div class="cell-md-6"> <div id="s-tetradic"></div> </div> </div> </div> <pre><code> var cm = Metro.colors, colors, color = "#ffff00"; colors = cm.getScheme(color, "tetra", "hex"); </code></pre> <h4 id="_cm_schemes_square">Square</h4> <p> A square is a color scheme, a special variant of the dual color scheme, with the equal distance between all colors. All four colors are distributed evenly around the color wheel, causing there is no clear dominance of one color. The scheme is always vibrant, nervous and colorful, there is equal tension between all colors. Square is very aggressive color scheme, requiring very good planning and very sensitive approach to relations of these colors. </p> <div class="example"> <div class="row flex-align-center"> <div class="cell-md-6 text-center"> <img src="images/square.jpg" style="height: 150px;"> </div> <div class="cell-md-6"> <div id="s-square"></div> </div> </div> </div> <pre><code> var cm = Metro.colors, colors, color = "#ffff00"; colors = cm.getScheme(color, "square", "hex"); </code></pre> <h4 id="_cm_schemes_triadic">Triadic</h4> <p> A triad is a color scheme, a special variant of the split-complementary color scheme, with the equal distance between all colors. All three colors are distributed evenly around the color wheel, causing there is no clear dominance of one color. The scheme is always vibrant and colorful, designers should use it and balance very carefully to maintan the desired effects and color meaning. </p> <div class="example"> <div class="row flex-align-center"> <div class="cell-md-6 text-center"> <img src="images/triadic.jpg" style="height: 150px;"> </div> <div class="cell-md-6"> <div id="s-triadic"></div> </div> </div> </div> <pre><code> var cm = Metro.colors, colors, color = "#ffff00"; colors = cm.getScheme(color, "triadic", "hex"); </code></pre> <p class="remark info"> Additional examples: <a href="examples/colors/color-schemes.html" target="_blank">schemes 1</a>, <a href="examples/colors/color-schemes-2.html" target="_blank">schemes 2</a>, <a href="examples/colors/color-schemes-grayscale.html" target="_blank">grayscale</a>. </p> <h3 id="_cm_websafe">Websafe colors</h3> <p> You can get <code>websafe</code> color from any. To get it, use function <code>websafe(color)</code> or specific for color format <code>hex2websafe</code>, <code>rgb2websafe</code>, <code>rgba2websafe</code>, <code>hsv2websafe</code>, <code>hsl2websafe</code> and <code>cmyk2websafe</code>. </p> <div class="example"> <div class="row fg-white text-center"> <div class="cell-md-6 p-4" style="background-color: #9d4232">#9d4232 - not safe</div> <div class="cell-md-6 p-4" style="background-color: #993333">#993333 - websafe</div> </div> </div> <pre><code> var cm = Metro.colors, color = "#9d4232"; cm.websafe(color); // #993333 </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script> <script> var cm = Metro.colors, color = "#ffff00"; var colors, schemes = ['mono', 'complement', 'split', 'double', 'analog', 'triadic', 'tetradic', 'square']; $.each(schemes, function(){ var scheme_name = String(this); colors = cm.getScheme(color, scheme_name, "hex"); $.each(colors, function(){ var bg_color = this; var target = $("#s-"+scheme_name); $("<div>").addClass("p-4 cell text-center mb-2").html(bg_color).attr("style", "background-color:"+ bg_color).appendTo(target); }) }); console.log(cm.toHslaString("#9d4232")); </script>    </body> </html>