[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"readme-html:EDM115\u002Fpalex:master":3},"\u003Ch1 id=\"palex\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"palex\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#palex\">palex\u003C\u002Fa>\u003C\u002Fh1>\n\u003Cp>\u003Cstrong>A javascript package to help you create and manage color palettes\u003C\u002Fstrong>\u003Cbr>\n\u003Cbr>\n\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fpalex\" alt=\"NPM Version\" loading=\"lazy\"> \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Fpalex\" alt=\"NPM Downloads\" loading=\"lazy\"> \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fjsdelivr\u002Fnpm\u002Fhm\u002Fpalex\" alt=\"jsDelivr hits (npm)\" loading=\"lazy\">\u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fmin\u002Fpalex\" alt=\"npm bundle size\" loading=\"lazy\"> \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Fpalex\" alt=\"npm bundle size (gzip)\" loading=\"lazy\">\u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Flibrariesio\u002Fsourcerank\u002Fnpm\u002Fpalex\" alt=\"Libraries.io SourceRank\" loading=\"lazy\"> \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Flibrariesio\u002Fdependent-repos\u002Fnpm\u002Fpalex\" alt=\"Dependent repos (via libraries.io)\" loading=\"lazy\"> \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Flibrariesio\u002Fdependents\u002Fnpm\u002Fpalex\" alt=\"Dependents (via libraries.io)\" loading=\"lazy\">\u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Flibrariesio\u002Frelease\u002Fnpm\u002Fpalex\" alt=\"Libraries.io dependency status for latest release\" loading=\"lazy\"> \u003Ca href=\"https:\u002F\u002Fapp.deepsource.com\u002Fgh\u002FEDM115\u002Fpalex\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cimg src=\"https:\u002F\u002Fapp.deepsource.com\u002Fgh\u002FEDM115\u002Fpalex.svg\u002F?label=active+issues&show_trend=true&token=xJS8bnp9wldi4n1Se07fkY5S\" alt=\"DeepSource\" loading=\"lazy\">\u003C\u002Fa>\u003Cbr>\n\u003Cbr>\n\u003C\u002Fp>\n\u003Cp>Did you ever wanted to create a \u003Cem>color palette\u003C\u002Fem> for your website or your app but you didn’t knew how to do it ? Did you had the idea to create a whole palette from a \u003Cem>single\u003C\u002Fem> color but thought it was too hard ? Or maybe you were wondering how to make a color palette \u003Cem>colorblind friendly\u003C\u002Fem> ?\u003Cbr>\nWell today is your lucky day because \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palex\u003C\u002Fspan>\u003C\u002Fcode> is here to help you with all of that !\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-note\">\n\u003Cp class=\"markdown-alert-title\">Note\u003C\u002Fp>\n\u003Cp>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palex\u003C\u002Fspan>\u003C\u002Fcode> was created when I was working on \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdata-fair\u002Fapp-charts\" target=\"_blank\" rel=\"noopener noreferrer\">@data-fair\u002Fapp-charts\u003C\u002Fa> and I needed to create color palettes for the charts. During this time I created several functions to help me with that, and some didn’t make it to the final version, so I decided to release \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palex\u003C\u002Fspan>\u003C\u002Fcode> as a standalone library to help anyone struggling with color palettes !\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"installation\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"installation\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#installation\">Installation\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>You can install \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palex\u003C\u002Fspan>\u003C\u002Fcode> using your favorite package manager, here are some examples :\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>bash\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs bash'>npm install palex\n\nyarn add palex\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Cp>Find the package on : \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fpalex\" target=\"_blank\" rel=\"noopener noreferrer\">NPM\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Fpalex\" target=\"_blank\" rel=\"noopener noreferrer\">jsDelivr\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch2 id=\"usage\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"usage\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#usage\">Usage\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>You can instanciate \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palex\u003C\u002Fspan>\u003C\u002Fcode> the CommonJS way :\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> palex = \u003Cspan class=\"hljs-built_in\">require\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>)\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(palex.\u003Cspan class=\"hljs-title function_\">palex\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'#FFB86C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'color'\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>, cbf = \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>, golden = \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>))\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Cp>Or the ESM way (used in the following documentation) :\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { palex } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">palex\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'#FFB86C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'color'\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>, cbf = \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>, golden = \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>))\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Cdiv class=\"markdown-alert markdown-alert-important\">\n\u003Cp class=\"markdown-alert-title\">Important\u003C\u002Fp>\n\u003Cp>If you’re using the ESM way, you’ll need to either use the \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-title\">.mjs\u003C\u002Fspan>\u003C\u002Fcode> extension or have a \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attr\">"type"\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">:\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">"module"\u003C\u002Fspan>\u003C\u002Fcode> in your \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-keyword\">package\u003C\u002Fspan>.json\u003C\u002Fcode> file.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"documentation\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"documentation\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#documentation\">Documentation\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>The following documentation will explain how to use \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palex\u003C\u002Fspan>\u003C\u002Fcode> and its functions. It tries to be as comprehensive as possible, but if you have any question, feel free to open an issue ! Pull requests are also welcome if you want to add a feature or fix a bug !\u003C\u002Fp>\n\u003Ch3 id=\"palex-input-type-num-colors-10-cbf-false-golden-false-grey-false\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"palex-input-type-num-colors-10-cbf-false-golden-false-grey-false\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#palex-input-type-num-colors-10-cbf-false-golden-false-grey-false\">\u003Ccode class=\"hljs\">palex\u003Cspan class=\"hljs-punctuation\">(\u003C\u002Fspan>\u003Cspan class=\"hljs-keyword\">input\u003C\u002Fspan>, \u003Cspan class=\"hljs-keyword\">type\u003C\u002Fspan>, numColors \u003Cspan class=\"hljs-punctuation\">=\u003C\u002Fspan> \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>, cbf \u003Cspan class=\"hljs-punctuation\">=\u003C\u002Fspan> \u003Cspan class=\"hljs-literal\">false\u003C\u002Fspan>, golden \u003Cspan class=\"hljs-punctuation\">=\u003C\u002Fspan> \u003Cspan class=\"hljs-literal\">false\u003C\u002Fspan>, grey \u003Cspan class=\"hljs-punctuation\">=\u003C\u002Fspan> \u003Cspan class=\"hljs-literal\">false\u003C\u002Fspan>\u003Cspan class=\"hljs-punctuation\">)\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>The main entrypoint of \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palex\u003C\u002Fspan>\u003C\u002Fcode>. It generates a color palette based on a given input and type.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-selector-tag\">input\u003C\u002Fspan>\u003C\u002Fcode> : The input color(s). It can be a palette string (brewer), a color(s) string (hex, rgb, or named color) or an array containing any of these.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-keyword\">type\u003C\u002Fspan>\u003C\u002Fcode> : The type of the input. It can be \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">brewer\u003C\u002Fspan>\u003C\u002Fcode>, \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">hues\u003C\u002Fspan>\u003C\u002Fcode>, \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">complementary\u003C\u002Fspan>\u003C\u002Fcode>, \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">color\u003C\u002Fspan>\u003C\u002Fcode> or \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">greyscale\u003C\u002Fspan>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">numColors\u003C\u002Fspan>\u003C\u002Fcode> : The number of colors to generate. It defaults to 10.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">cbf\u003C\u002Fspan>\u003C\u002Fcode> : If \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>\u003C\u002Fcode>, the palette will be colorblind friendly. It defaults to \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">false\u003C\u002Fspan>\u003C\u002Fcode>. Have no effect if the type is \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">brewer\u003C\u002Fspan>\u003C\u002Fcode> or \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">greyscale\u003C\u002Fspan>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">golden\u003C\u002Fspan>\u003C\u002Fcode> : If \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>\u003C\u002Fcode>, the palette will be based on the golden ratio. It defaults to \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">false\u003C\u002Fspan>\u003C\u002Fcode>. Not recommended to use along with \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">cbf\u003C\u002Fspan>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">grey\u003C\u002Fspan>\u003C\u002Fcode> : If \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>\u003C\u002Fcode>, a greyscale will be added to the generated palette if the number of colors is less than numColors. It defaults to \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">false\u003C\u002Fspan>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Returns an array of colors in hexadecimal format.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { palex } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">palex\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'#FFB86C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'color'\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>, cbf = \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>, golden = \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#df9220", "#2520df", "#dfb220", "#df3720", "#c6df20", "#df20a7", "#dfde20", "#2c20df", "#ccdf20", "#205fdf"]\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch3 id=\"sanitize-input-input\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"sanitize-input-input\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#sanitize-input-input\">\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">sanitizeInput\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">(input)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>Did you ever wanted to know how every function in \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palex\u003C\u002Fspan>\u003C\u002Fcode> can accept such a wide range of inputs ? Well, it’s because of \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">sanitizeInput\u003C\u002Fspan>\u003C\u002Fcode> ! I wanted to create something easy to use so \u003Cem>you\u003C\u002Fem> don’t have to worry about changing the input to fit the function.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-selector-tag\">input\u003C\u002Fspan>\u003C\u002Fcode> : The input to sanitize. It can be a palette string (brewer), a color(s) string (hex, rgb, or named color) or an array containing any of these.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Returns the sanitized input.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { sanitizeInput } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">sanitizeInput\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'#FFB86C'\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F "#ffb86c"\u003C\u002Fspan>\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">sanitizeInput\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'Set3'\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F "Set3"\u003C\u002Fspan>\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">sanitizeInput\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'rgb(255, 184, 108)'\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F "#ffb86c"\u003C\u002Fspan>\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">sanitizeInput\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'ff0, #abc, FFB86C, , ,, ,,, rgb(100, 200, 81)'\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#ffff00", "#aabbcc", "#ffb86c", "#64c851"]\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch3 id=\"generate-palette-from-brewer-input-num-colors\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"generate-palette-from-brewer-input-num-colors\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#generate-palette-from-brewer-input-num-colors\">\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">generatePaletteFromBrewer\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">(input, numColors)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>Generates a color palette from a brewer palette string.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title\">Tip\u003C\u002Fp>\n\u003Cp>You can find strings to use here : \u003Ca href=\"https:\u002F\u002Floading.io\u002Fcolor\u002Ffeature\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">https:\u002F\u002Floading.io\u002Fcolor\u002Ffeature\u002F\u003C\u002Fa>\u003Cbr>\nAll strings in the Diverging section are valid, all from Qualitative except HCL, and most from Gradient too :)\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-selector-tag\">input\u003C\u002Fspan>\u003C\u002Fcode> : The brewer palette string.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">numColors\u003C\u002Fspan>\u003C\u002Fcode> : The number of colors to generate. If not provided, it defaults to 2 and will return the 2 base colors of the palette.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Returns an array of colors in hexadecimal format.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { generatePaletteFromBrewer } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generatePaletteFromBrewer\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'Set3'\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#8dd3c7", "#ffe3b1", "#e19ec9", "#aaa1df", "#ffa778", "#d4d766", "#f1d1e1", "#caa8ca", "#dbd29f", "#ffed6f"]\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch3 id=\"get-golden-color-color\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"get-golden-color-color\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#get-golden-color-color\">\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">getGoldenColor\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">(color)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>Returns a color based on the golden ratio from a given color. The idea behind it stems from the very good \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FFooidge\u002FPleaseJS?tab=readme-ov-file#make_color-options\" target=\"_blank\" rel=\"noopener noreferrer\">PleaseJS\u003C\u002Fa> library.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">color\u003C\u002Fspan>\u003C\u002Fcode> : The color to base the new color on.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Returns a color in hexadecimal format.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { getGoldenColor } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">getGoldenColor\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'#FFB86C'\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F "#df8320"\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch3 id=\"generate-greyscale-start-end-steps\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"generate-greyscale-start-end-steps\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#generate-greyscale-start-end-steps\">\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">generateGreyscale\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">(start, end, steps)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>Generates a greyscale palette from a start point to an end point with a given number of steps.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">start\u003C\u002Fspan>\u003C\u002Fcode> : The start point of the greyscale, from 0 to 255.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-keyword\">end\u003C\u002Fspan>\u003C\u002Fcode> : The end point of the greyscale, from 0 to 255.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">steps\u003C\u002Fspan>\u003C\u002Fcode> : The number of steps to generate.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Returns an array of colors in hexadecimal format.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { generateGreyscale } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generateGreyscale\u003C\u002Fspan>(\u003Cspan class=\"hljs-number\">0\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">5\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F generates 11 colors, from black at 0 to white at 5, and values above steps and below end are white\u003C\u002Fspan>\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#000000", "#333333", "#666666", "#999999", "#cccccc", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"]\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generateGreyscale\u003C\u002Fspan>(\u003Cspan class=\"hljs-number\">6\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">6\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F generates 5 colors. they are all pure white\u003C\u002Fspan>\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff"]\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generateGreyscale\u003C\u002Fspan>(\u003Cspan class=\"hljs-number\">1\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">5\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F generates 5 colors. since steps is bigger than end - start, we will have a greyscale that avoids black and white\u003C\u002Fspan>\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#1a1a1a", "#333333", "#4d4d4d", "#666666", "#808080"]\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch3 id=\"generate-hues-palette-num-colors-cbf-false\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"generate-hues-palette-num-colors-cbf-false\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#generate-hues-palette-num-colors-cbf-false\">\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">generateHues\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">(palette, numColors, cbf = false)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>Generates a hue palette from a given color palette and a number of colors. It can also make the palette colorblind friendly.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palette\u003C\u002Fspan>\u003C\u002Fcode> : The palette to base the hue on.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">numColors\u003C\u002Fspan>\u003C\u002Fcode> : The number of colors to generate.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">cbf\u003C\u002Fspan>\u003C\u002Fcode> : If \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>\u003C\u002Fcode>, the palette will be colorblind friendly. It defaults to \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">false\u003C\u002Fspan>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Returns an array of colors in hexadecimal format.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { generateHues } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generateHues\u003C\u002Fspan>([\u003Cspan class=\"hljs-string\">'#BD93F9'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#F1FA8C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#6272A4'\u003C\u002Fspan>], \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#bd93f9", "#f1fa8c", "#6272a4", "#fdecff", "#faffc8", "#7997db", "#fff3ff", "#a6bcf5", "#cee3ff"]\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { generatePaletteFromBrewer } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generateHues\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generatePaletteFromBrewer\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'Set3'\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>), \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#8dd3c7", "#ffe3b1", "#e19ec9", "#aaa1df", "#ffa778", "#d4d766", "#f1d1e1", "#caa8ca", "#dbd29f", "#ffed6f"]\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch3 id=\"generate-hues-from-color-color-num-colors-cbf-false\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"generate-hues-from-color-color-num-colors-cbf-false\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#generate-hues-from-color-color-num-colors-cbf-false\">\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">generateHuesFromColor\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">(color, numColors, cbf = false)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>Generates a color palette hue from a given color and a number of colors. It can also make the palette colorblind friendly.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">color\u003C\u002Fspan>\u003C\u002Fcode> : The color to base the hue on.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">numColors\u003C\u002Fspan>\u003C\u002Fcode> : The number of colors to generate.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">cbf\u003C\u002Fspan>\u003C\u002Fcode> : If \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>\u003C\u002Fcode>, the palette will be colorblind friendly. It defaults to \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">false\u003C\u002Fspan>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Returns an array of colors in hexadecimal format.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { generateHuesFromColor } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generateHuesFromColor\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'#FFB86C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#ffb86c", "#ffc56e", "#ffd794", "#ffe9b7", "#fffadb", "#fff3ff", "#fff3ff", "#fff3ff", "#fff3ff", "#fff3ff"]\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch3 id=\"generate-complementary-palette-num-colors-cbf-false\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"generate-complementary-palette-num-colors-cbf-false\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#generate-complementary-palette-num-colors-cbf-false\">\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">generateComplementary\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">(palette, numColors, cbf = false)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>Generates a complementary palette from a given color palette and a number of colors. It can also make the palette colorblind friendly.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palette\u003C\u002Fspan>\u003C\u002Fcode> : The palette to base the complementary on.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">numColors\u003C\u002Fspan>\u003C\u002Fcode> : The number of colors to generate.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">cbf\u003C\u002Fspan>\u003C\u002Fcode> : If \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>\u003C\u002Fcode>, the palette will be colorblind friendly. It defaults to \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">false\u003C\u002Fspan>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Returns an array of colors in hexadecimal format.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { generateComplementary } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generateComplementary\u003C\u002Fspan>([\u003Cspan class=\"hljs-string\">'#BD93F9'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#F1FA8C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#6272A4'\u003C\u002Fspan>], \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#bd93f9", "#f1fa8c", "#6272a4", "#cff993", "#958cfa", "#a49462", "#f093f9", "#bafa8c", "#7362a4", "#939cf9"]\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { generatePaletteFromBrewer } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generateComplementary\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generatePaletteFromBrewer\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'Set3'\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>), \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#8dd3c7", "#ffe3b1", "#e19ec9", "#aaa1df", "#ffa778", "#d4d766", "#f1d1e1", "#caa8ca", "#dbd29f", "#ffed6f"]\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch3 id=\"generate-palette-from-color-color-num-colors-cbf-false\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"generate-palette-from-color-color-num-colors-cbf-false\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#generate-palette-from-color-color-num-colors-cbf-false\">\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">generatePaletteFromColor\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">(color, numColors, cbf = false)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>Generates a color palette from a given color and a number of colors. Starts by generating a complementary color, then generates a number of analogous colors. If the number of colors is not reached, it generates a number of triadic colors. It can also make the palette colorblind friendly.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">color\u003C\u002Fspan>\u003C\u002Fcode> : The color to base the palette on.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">numColors\u003C\u002Fspan>\u003C\u002Fcode> : The number of colors to generate.\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">cbf\u003C\u002Fspan>\u003C\u002Fcode> : If \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>\u003C\u002Fcode>, the palette will be colorblind friendly. It defaults to \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-literal\">false\u003C\u002Fspan>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Returns an array of colors in hexadecimal format.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { generatePaletteFromColor } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">generatePaletteFromColor\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'#FFB86C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-number\">10\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#ffb86c", "#6cb3ff", "#fcff6c", "#ff6f6c", "#b3ff6c", "#ff6cb3", "#6cff6f", "#ff6cfc", "#6cffb8", "#b86cff"]\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch3 id=\"adjust-for-color-blindness-palette\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"adjust-for-color-blindness-palette\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#adjust-for-color-blindness-palette\">\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">adjustForColorBlindness\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">(palette)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>Adjusts a given palette to make it colorblind friendly. It works by simulating the three types of color blindness (protanopia, deuteranopia, and tritanopia) using the \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">color\u003C\u002Fspan>-blind\u003C\u002Fcode> library. The function compares all the colors in each simulated palette and shifts one of them to a closer but not similar color if they are too similar. This process is repeated for each simulated palette until they are “fixed”. The function then computes the three fixed palettes into a single palette by selecting the best color for each index. This process can be recursively applied until the palette is fully adjusted.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palette\u003C\u002Fspan>\u003C\u002Fcode> : The palette to adjust.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Returns an array of colors in hexadecimal format.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { adjustForColorBlindness } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">adjustForColorBlindness\u003C\u002Fspan>([\u003Cspan class=\"hljs-string\">'#FFB86C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#6CB3FF'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#FCFF6C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#FF6F6C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#B3FF6C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#FF6CB3'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#6CFF6F'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#FF6CFC'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#6CFFB8'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#B86CFF'\u003C\u002Fspan>]))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#f3bc6a", "#8e8bff", "#fff7dd", "#ff8170", "#f1ff93", "#ab9aa6", "#fbfa68", "#9690ec", "#eef5af", "#548cff"]\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch3 id=\"simulate-color-blindness-color\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"simulate-color-blindness-color\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#simulate-color-blindness-color\">\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-title\">simulateColorBlindness\u003C\u002Fspan>\u003Cspan class=\"hljs-params\">(color)\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>Simulates color blindness on a given color using the \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">color\u003C\u002Fspan>-blind\u003C\u002Fcode> library. It works by simulating the 4 types of color blindness (protanopia, deuteranopia, tritanopia, and achromatopsia) and returns the base color + the simulated colors.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">color\u003C\u002Fspan>\u003C\u002Fcode> : The color to simulate color blindness on.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Returns an array containing the base color and the simulated colors in hexadecimal format.\u003C\u002Fp>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { simulateColorBlindness } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">simulateColorBlindness\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'#FFB86C'\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#ffb86c", "#d9c570", "#f3bc6a", "#ffb0bb", "#c2c2c2"]\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch3 id=\"re-exposure\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"re-exposure\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#re-exposure\">Re-exposure\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title\">Tip\u003C\u002Fp>\n\u003Cp>Since this package uses the libraries \u003Ccode class=\"hljs\">chroma\u003Cspan class=\"hljs-number\">.\u003C\u002Fspan>\u003Cspan class=\"hljs-keyword\">js\u003C\u002Fspan>\u003C\u002Fcode> and \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">color\u003C\u002Fspan>-blind\u003C\u002Fcode>, you can use them directly to create your own color palettes or to simulate color blindness.\u003Cbr>\n\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palex\u003C\u002Fspan>\u003C\u002Fcode> re-expose their object so you can directly use them without adding a line to your \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-keyword\">package\u003C\u002Fspan>.json\u003C\u002Fcode> file :)\u003Cbr>\nFind their documentation here : \u003Ca href=\"https:\u002F\u002Fwww.vis4.net\u002Fchromajs\" target=\"_blank\" rel=\"noopener noreferrer\">chroma.js\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fskratchdot\u002Fcolor-blind\" target=\"_blank\" rel=\"noopener noreferrer\">color-blind\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>js\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs js'>\u003Cspan class=\"hljs-keyword\">import\u003C\u002Fspan> { chroma, blinder } \u003Cspan class=\"hljs-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"hljs-string\">'palex'\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(chroma.\u003Cspan class=\"hljs-title function_\">bezier\u003C\u002Fspan>([\u003Cspan class=\"hljs-string\">'#FFB86C'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'#6CB3FF'\u003C\u002Fspan>]).\u003Cspan class=\"hljs-title function_\">scale\u003C\u002Fspan>().\u003Cspan class=\"hljs-title function_\">colors\u003C\u002Fspan>(\u003Cspan class=\"hljs-number\">5\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F ["#ffb86c", "#e8b693", "#ccb5b7", "#a7b4db", "#6cb3ff"]\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">log\u003C\u002Fspan>(blinder.\u003Cspan class=\"hljs-title function_\">protanopia\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'#FFB86C'\u003C\u002Fspan>))\n\u003Cspan class=\"hljs-comment\">\u002F\u002F "#d9c570"\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Ch2 id=\"contributing\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"contributing\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#contributing\">Contributing\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>Here’s a quick guide to contributing to \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palex\u003C\u002Fspan>\u003C\u002Fcode> :\u003C\u002Fp>\n\u003Col>\n\u003Cli>Fork the repository (and star it)\u003C\u002Fli>\n\u003Cli>Clone your fork\u003C\u002Fli>\n\u003C\u002Fol>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>bash\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs bash'>git \u003Cspan class=\"hljs-built_in\">clone\u003C\u002Fspan> https:\u002F\u002Fgithub.com\u002Fyour-username\u002Fpalex.git\n\u003Cspan class=\"hljs-built_in\">cd\u003C\u002Fspan> palex\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Col start=\"3\">\n\u003Cli>Do your changes\u003C\u002Fli>\n\u003Cli>Test your changes\u003Cbr>\nImport the function you wanna test in \u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-keyword\">test\u003C\u002Fspan>\u002F\u003Cspan class=\"hljs-keyword\">App\u003C\u002Fspan>.vue\u003C\u002Fcode> and instanciate it like the others are\u003C\u002Fli>\n\u003C\u002Fol>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>bash\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs bash'>npm run \u003Cspan class=\"hljs-built_in\">test\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Col start=\"5\">\n\u003Cli>Commit your changes\u003C\u002Fli>\n\u003C\u002Fol>\n\n          \u003Cdiv class='code-block'>\n            \u003Cdiv class='code-block-header'>\n              \u003Cspan class='code-block-lang'>bash\u003C\u002Fspan>\n              \u003Cbutton class='copy-code-button' type='button'>\n                Copy\n              \u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n            \u003Cpre>\u003Ccode class='hljs bash'>git add -A\ngit commit -m \u003Cspan class=\"hljs-string\">"Your changes"\u003C\u002Fspan>\ngit push\n\u003C\u002Fcode>\u003C\u002Fpre>\n          \u003C\u002Fdiv>\n        \u003Col start=\"6\">\n\u003Cli>Open a pull request\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2 id=\"donate\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"donate\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#donate\">Donate\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>I’m a small developer from France, and as I write this I’m still pursuing my studies. If you want to support me, here’s how you can do it :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Star this repository\u003C\u002Fli>\n\u003Cli>Follow me on \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FEDM115\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>Donate :\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fpaypal.me\u002F8EDM115\" target=\"_blank\" rel=\"noopener noreferrer\">PayPal\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsponsors\u002FEDM115\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub Sponsors\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.buymeacoffee.com\u002FEDM115\" target=\"_blank\" rel=\"noopener noreferrer\">BuyMeACoffee\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Ft.me\u002FEDM115bots\u002F698\" target=\"_blank\" rel=\"noopener noreferrer\">Donate on Telegram\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"license\" tabindex=\"-1\">\u003Cspan\n                class=\"header-copy-icon\"\n                role=\"button\"\n                data-slug=\"license\"\n              >\n                \u003Csvg>\u003Cpath fill=\"currentColor\" d=\"M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42\"\u002F>\u003C\u002Fsvg>\n              \u003C\u002Fspan>\u003Ca class=\"header-anchor\" href=\"#license\">License\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">palex\u003C\u002Fspan>\u003C\u002Fcode> is licensed under the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FEDM115\u002Fpalex\u002Fblob\u002Fmaster\u002FLICENSE\" target=\"_blank\" rel=\"noopener noreferrer\">MIT License\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">chroma\u003Cspan class=\"hljs-number\">.\u003C\u002Fspan>\u003Cspan class=\"hljs-keyword\">js\u003C\u002Fspan>\u003C\u002Fcode> is licensed under the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fgka\u002Fchroma.js\u002Fblob\u002Fmain\u002FLICENSE\" target=\"_blank\" rel=\"noopener noreferrer\">BSD License\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"hljs\">\u003Cspan class=\"hljs-attribute\">color\u003C\u002Fspan>-blind\u003C\u002Fcode> is licensed under the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fskratchdot\u002Fcolor-blind?tab=readme-ov-file#license\" target=\"_blank\" rel=\"noopener noreferrer\">MIT License + CC-BY-SA-4.0\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cdiv class=\"markdown-alert markdown-alert-note\">\n\u003Cp class=\"markdown-alert-title\">Note\u003C\u002Fp>\n\u003Cp>Sources that helped during development :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.vis4.net\u002Fchromajs\" target=\"_blank\" rel=\"noopener noreferrer\">vis4\u002Fchroma.js\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.vis4.net\u002Fpalettes\u002F#\u002F10%7Cd%7C00429d,96ffea,ffffe0%7Cffffe0,ff005e,93003a%7C1%7C1\" target=\"_blank\" rel=\"noopener noreferrer\">vis4\u002Fpalettes\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FFooidge\u002FPleaseJS?tab=readme-ov-file#make_color-options\" target=\"_blank\" rel=\"noopener noreferrer\">Fooidge\u002FPleaseJS#make_color-options\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Floading.io\u002Fcolor\u002Ffeature\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">loading.io\u002Fcolor\u002Ffeature\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fdiv>\n",1779532541095]