30:[] 2e:{"title":"Generate a Contrasting Random Color","cells":[{"id":0,"value":"# Generate a Contrasting Random Color","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"Uses [Culori](https://culorijs.org/) to generate colors.","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"cover = {\n const height = Math.ceil((width * 400) / 640);\n const rows = 3;\n const cols = 5;\n const cellWidth = width / cols;\n const cellHeight = height / rows;\n const r = Math.min(cellWidth, cellHeight) / 4;\n\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"## Usage\n\nImport into you notebook using:\n```js\nimport {getRandomColor, getRandomContrastColor} from \"@saneef/random-colors\"\n```\n\nUse the functions in your code:\n```js\n// Example\nconsole.log(getRandomColor()); // \"#f92911\" \n```","pinned":false,"hidden":false,"mode":"md"},{"id":244,"value":"## Source","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"/**\n * Gets the random color.\n *\n * @param {number | [number, number]} [lightness=1] The lightness should be between a number between 0 and 1.0 or an interval [0, 1.0]\n * @returns {string} Hex Code\n */\nfunction getRandomColor(lightness) {\n let l = (lightness = lightness === undefined ? [0, 1] : lightness);\n\n if (Array.isArray(l)) {\n let [min, max] = l;\n max = clamp(0, max, 1);\n min = clamp(0, min, 1);\n\n l = [min, max];\n } else {\n l = clamp(0, l, 1);\n }\n\n return culori.formatHex(\n culori.random(\"oklch\", {\n l\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"/**\n * Gets a random contrasting color.\n *\n * @param {string | Culori Color object} color The color to compare\n * @param {number} [minContrast=4.5] The minimum WCAG contrast\n * @param {number} [maxTries=200] The maximum tries\n * @returns {string} Hex Code\n */\nfunction getRandomContrastColor(color, minContrast = 4.5, maxTries = 200) {\n if (maxTries <= 0) return;\n\n const randomColor = culori.random(\"oklch\");\n const contrast = culori.wcagContrast(color, randomColor);\n\n if (contrast >= minContrast) return culori.formatHex(randomColor);\n\n return getRandomContrastColor(color, minContrast, maxTries - 1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"clamp = (min, value, max) => Math.max(min, Math.min(value, max))","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"## Tests","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"viewof randomize = Inputs.button(\"🔀 Randomize\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"color1 = {\n randomize;\n return getRandomColor();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"html`\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"color2 = getRandomContrastColor(color1, 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"html`\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"culori = import(\"https://unpkg.com/culori@0.18.2/build/culori.js?module\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}