44:["$","title",null,{"children":"Color Palette Generator | Prathyush | Observable"}] 4c:[] 48:{"id":"916a156360491a12","slug":"color-palette-generator","title":"Color Palette Generator","thumbnail":"6f1b4567124a9492ed8c7049e52f43320a6245eefb1932ff624a8bf0a27efdef","access_level":"public","create_time":"$D2022-01-01T12:58:55.970Z","update_time":"$D2022-01-27T22:06:46.595Z","view_time":null,"first_public_time":"$D2022-01-01T13:30:22.392Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"f33b22c086eea27f","login":"prathyvsh","name":"Prathyush","avatar_url":"https://avatars-next.observableusercontent.com/209a242aa240743240b9c0771686a44ba1950fce32c6180ced0d42027f5ab246","tier":"starter_2024","bio":"Software Designer","followed_by_you":false,"follows_you":false},"version":814,"publish_version":814,"role":null,"authored":false,"authors":[{"type":"individual","id":"3b0d270e1b775ddf","login":"prathyvsh","name":"Prathyush","avatar_url":"https://avatars-next.observableusercontent.com/209a242aa240743240b9c0771686a44ba1950fce32c6180ced0d42027f5ab246","tier":null,"bio":"Software Designer","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3b0d270e1b775ddf","login":"prathyvsh","name":"Prathyush","avatar_url":"https://avatars-next.observableusercontent.com/209a242aa240743240b9c0771686a44ba1950fce32c6180ced0d42027f5ab246","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Color Palette Generator","cells":[{"id":0,"value":"# Color Palette Generator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"md`This is a simple color palette generation tool for use in some of my projects.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"colors = swatches(interpolate(startColor, endColor, divs).map(([h, s, l]) => color(h + colorShift, s, l)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"md`### Start color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"viewof start = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"### End color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":594,"value":"viewof end = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`### Color shift`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof colorShift = html``;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`### Swatch count`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof divs = html``;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"rgbToHSL = ([r, g, b]) => {\n\n // Normalized Values\n let nR = r/255;\n let nG = g/255;\n let nB = b/255;\n\n let min = Math.min(nR, nG, nB);\n let max = Math.max(nR, nG, nB);\n\n let value = max;\n let chroma = max - min;\n let lightness = (min + max)/2;\n\n let hue = max == 0 ? 0 :\n max == nR ? (nG - nB) / chroma :\n max == nG ? 2 + (nB - nR) / chroma:\n max == nB ? 4 + (nR - nG) / chroma : 0;\n\n let sat = max == 0 ? 0 :\n lightness < 0.5 ? chroma/value : chroma/(2 - 2 * lightness);\n\n return [60 * hue, sat * 100, lightness * 100];\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"endColor = rgbToHSL([parseInt(end[1] + end[2], 16), parseInt(end[3] + end[4], 16), parseInt(end[5] + end[6], 16)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"startColor = rgbToHSL([parseInt(start[1] + start[2], 16), parseInt(start[3] + start[4], 16), parseInt(start[5] + start[6], 16)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"interpolate = (startColor, endColor, divs = 1) => {\n \n let hs = subdivs(startColor[0], endColor[0], divs);\n let ss = subdivs(startColor[1], endColor[1], divs);\n let ls = subdivs(startColor[2], endColor[2], divs);\n\n return hs.map((h, idx) => [h, ss[idx], ls[idx]]);\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"color = (h, s = 50, l = 50) => [h, s, l];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"subdivs = (start, end, divs) => [...new Array(divs + 1)].map((_, idx) => start + (idx * ((end - start) / divs)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"swatch = ([h, s, l]) => html`

HSL${Math.floor(h)}, ${Math.floor(s)}%, ${Math.floor(l)}%

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"swatches = (colors) => {\n let parent = document.createElement(\"div\");\n parent.classList = \"swatches\";\n for(let color of colors) {\n parent.appendChild(swatch(color));\n }\n return parent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"html`