2a:null 2b:["$","title",null,{"children":"CSS gradient generator | Durbar Bagerhat | Observable"}] 31:T604,{ const data = [ ...interpolations.map(({ points, name }) => ({ x: points.map((point) => point.oklab.a), y: points.map((point) => point.oklab.b), z: points.map((point) => point.oklab.l), // hovertext: points.map((point) => tooltip(point)), name, mode: "markers", type: "scatter3d", marker: { size: 10, color: points.map((point) => point.hex), opacity: 1 } })), { x: rgbGamutInOklab.map((point) => point.a), y: rgbGamutInOklab.map((point) => point.b), z: rgbGamutInOklab.map((point) => point.l), mode: "markers", name: "RGB gamut", type: "scatter3d", marker: { size: 5, color: rgbGamutInOklab.map((point) => point.hex), opacity: 0.1 } } ]; const layout = { margin: { l: 0, r: 0, b: 0, t: 0 }, height: 600, width: width, scene: { camera: { eye: { x: 1, y: -1, z: 1 } }, aspectmode: "manual", aspectratio: { x: 1, y: 1, z: 1 }, xaxis: { title: { text: "a" }, range: [-0.23, 0.28] }, yaxis: { title: { text: "b" }, range: [-0.311, 0.2] }, zaxis: { title: { text: "L" }, range: [0, 1] } } }; const div = DOM.element("div"); return Plotly.newPlot(div, data, layout); return div; }32:[] 2e:{"id":"47311434d628a370","slug":"css-gradient-generator","title":"CSS gradient generator","thumbnail":"c1f3c8dfedd1feb2fb0ccb54b288baa0f3fe20f6c2acf71d66d8780c913f15d1","access_level":"public","create_time":"$D2023-01-19T00:35:33.598Z","update_time":"$D2023-01-19T00:35:33.598Z","view_time":null,"first_public_time":"$D2023-01-19T00:35:33.598Z","fork":{"id":"d07fb341f3604ac4","slug":"css-gradient-generator","title":"CSS gradient generator","owner":{"id":"cc48459e4293f942","login":"mjbo","name":"Max Bo"}},"stars":1,"starred":false,"owner":{"type":"team","id":"3d6ada0e14d2c551","login":"faisalbsl21","name":"Durbar Bagerhat","avatar_url":"https://avatars-next.observableusercontent.com/9ccefa6ea0c7ba8759f0c579d234c9d330385e56002653d68b14f872da3c4300","tier":"starter_2024"},"version":1066,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bcd00632821167cc","login":"faisalbsl21","name":"Durbar Bagerhat","avatar_url":"https://avatars-next.observableusercontent.com/9ccefa6ea0c7ba8759f0c579d234c9d330385e56002653d68b14f872da3c4300","tier":null}],"members":[{"type":"individual","id":"bcd00632821167cc","login":"faisalbsl21","name":"Durbar Bagerhat","avatar_url":"https://avatars-next.observableusercontent.com/9ccefa6ea0c7ba8759f0c579d234c9d330385e56002653d68b14f872da3c4300","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"72d00f4a156671d1","slug":"bagerhat-portal","title":"Durbar Bagerhat","owner":{"id":"3d6ada0e14d2c551","login":"faisalbsl21","name":"Durbar Bagerhat"}},"type":"notebook","body":{"title":"CSS gradient generator","cells":[{"id":0,"value":"# CSS gradient generator\n## A shonky reimplementation of Josh Comeau's [*Gradient Generator*](https://www.joshwcomeau.com/gradient-generator/)","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"viewof stops = Inputs.range([0, 10], { label: \"Colors\", step: 1, value: 2 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"viewof substops = Inputs.range([0, 30], {\n label: \"Precision\",\n step: 1,\n value: 13\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"viewof picker = {\n const start = \"#2727c4\";\n const end = \"#ffd129\";\n const stopProgression = [...d3.range(0, 1, 1 / (stops - 1)), 1];\n\n const colors = stopProgression.map((x) =>\n culori.formatHex(culori.interpolate([start, end], \"oklab\")(x))\n );\n\n return Inputs.form(colors.map((value, i) => Inputs.color({ value })));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"*Click to see CSS:*","pinned":false,"hidden":false,"mode":"md"},{"id":253,"value":"htl.html`\n

\n${interpolations.map(\n (interpolation) => htl.html`\n

${interpolation.name}

\n ${cssInterpolation(interpolation)}\n

\n`\n)}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"---\n\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"Plotly = require(\"https://cdn.plot.ly/plotly-latest.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"culori = import(\"https://unpkg.com/culori@2.0.0/bundled/culori.min.mjs?module\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"R = require(\"ramda\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {\n rgbGamutInOklab,\n rgbMaxLInOklabMark,\n rgbMaxCInOklchMark\n} from \"@mjbo/hello-mixbox\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"### Interpolation","pinned":false,"hidden":false,"mode":"md"},{"id":611,"value":"palette = picker.length === 1 ? [startHex, ..._.tail(picker), endHex] : picker","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"interpolateStopsWithSubstops = (stops, mode) => {\n return [\n ...R.aperture(2, stops).flatMap(([a, b]) => {\n const interpolator = culori.interpolate([a, b], mode);\n\n return d3.range(0, 1, 1 / (substops + 1)).map((i) => interpolator(i));\n }),\n _.last(stops)\n ].map((color) => {\n // Convert from hex if hex\n color = culori.parse(color) ? culori.parse(color) : color;\n\n return {\n oklab: culori.converter(\"oklab\")(color),\n oklch: culori.converter(\"oklch\")(color),\n rgb: culori.converter(\"rgb\")(color),\n hex: culori.formatHex(color)\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"From the modes available (https://culorijs.org/color-spaces/) we should select those that are available in CSS (https://www.w3.org/TR/css-color-4/#color-type)","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"interpolateStopsWithAllModes = (stops) => [\n { name: \"RGB\", points: interpolateStopsWithSubstops(stops, \"rgb\") },\n { name: \"Lab\", points: interpolateStopsWithSubstops(stops, \"lab\") },\n { name: \"Oklab\", points: interpolateStopsWithSubstops(stops, \"oklab\") },\n { name: \"HSL\", points: interpolateStopsWithSubstops(stops, \"hsl\") },\n { name: \"Okhsl\", points: interpolateStopsWithSubstops(stops, \"okhsl\") },\n { name: \"HSV\", points: interpolateStopsWithSubstops(stops, \"hsv\") },\n { name: \"Okhsv\", points: interpolateStopsWithSubstops(stops, \"okhsv\") }\n // { name: \"LCH\", points: interpolateStopsWithSubstops(stops,\"lch\") },\n // { name: \"Oklch\", points: interpolateStopsWithSubstops(stops,oklch\") }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"interpolations = interpolateStopsWithAllModes(palette)","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"cssInterpolation = (interpolation) => `\nbackground-image: linear-gradient(to right,\n ${interpolation.points.map((d) => d.hex).join(\",\\n\")}\n);\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":479,"value":"### Gradient synthesis","pinned":false,"hidden":false,"mode":"md"},{"id":526,"value":"Can we craft a nice looking gradient from *1* color? Given a start color `${startHex}`, we'll put it in cylindrical form","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"startOklch = culori.oklch(startHex)","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"and rotate around our desired hue angle","pinned":false,"hidden":false,"mode":"md"},{"id":520,"value":"rotatedHueOklch = ({\n ...startOklch,\n h: (startOklch.h + hueRotation) % 360\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":855,"value":"lighten and saturate it for good measure","pinned":false,"hidden":false,"mode":"md"},{"id":565,"value":"lightenedOklch = ({\n ...rotatedHueOklch,\n l: rotatedHueOklch.l + lightenCoefficient / rotatedHueOklch.l\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1020,"value":"lightenedAndSaturatedOklch = ({\n ...lightenedOklch,\n c: lightenedOklch.c + saturateMagnitude\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":903,"value":"endHex = culori.formatHex(lightenedAndSaturatedOklch)","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"Let's generate all the gradients again with out new endpoint:","pinned":false,"hidden":false,"mode":"md"},{"id":937,"value":"synthesizedInterpolations = interpolateStopsWithAllModes([\n startHex,\n endHex\n]).flatMap(({ name, points }) => points.map((point) => ({ ...point, name })))","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"vectors = [\n {\n text: \"Rotate\",\n h1: startOklch.h,\n l1: startOklch.l,\n a1: culori.oklab(startOklch).a,\n b1: culori.oklab(startOklch).b,\n //\n h2: rotatedHueOklch.h,\n l2: rotatedHueOklch.l,\n a2: culori.oklab(rotatedHueOklch).a,\n b2: culori.oklab(rotatedHueOklch).b\n },\n {\n text: \"Lighten\",\n h1: rotatedHueOklch.h,\n l1: rotatedHueOklch.l,\n a1: culori.oklab(rotatedHueOklch).a,\n b1: culori.oklab(rotatedHueOklch).b,\n //\n h2: lightenedOklch.h,\n l2: lightenedOklch.l,\n a2: culori.oklab(lightenedOklch).a,\n b2: culori.oklab(lightenedOklch).b\n },\n {\n text: \"Saturate\",\n h1: lightenedOklch.h,\n l1: lightenedOklch.l,\n a1: culori.oklab(lightenedOklch).a,\n b1: culori.oklab(lightenedOklch).b,\n //\n h2: lightenedAndSaturatedOklch.h,\n l2: lightenedAndSaturatedOklch.l,\n a2: culori.oklab(lightenedAndSaturatedOklch).a,\n b2: culori.oklab(lightenedAndSaturatedOklch).b\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"_If you want to derive the CSS from 1 color, set Colors: 1 at the top of the page_.","pinned":false,"hidden":false,"mode":"md"},{"id":954,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":585,"value":"viewof startHex = Inputs.color({ label: \"Start\", value: picker[0] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"viewof hueRotation = Inputs.range([0, 360], {\n label: \"Hue rotation\",\n value: 60,\n step: 15\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"viewof lightenCoefficient = Inputs.range([0, 0.5], {\n label: \"Lighten coefficient\",\n value: 0.07,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"viewof saturateMagnitude = Inputs.range(culori.modeOklch.ranges.c, {\n label: \"Saturation magnitude\",\n value: 0.05,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"Plot.plot({\n x: {\n label: \"h →\",\n domain: [0, 360]\n },\n y: {\n label: \"↑ L\",\n domain: [0, 1]\n },\n marks: [\n rgbMaxCInOklchMark,\n Plot.dot(synthesizedInterpolations, {\n title: \"name\",\n x: (d) => d.oklch.h,\n y: (d) => d.oklch.l,\n fill: \"hex\"\n }),\n Plot.arrow(vectors, {\n x1: \"h1\",\n y1: \"l1\",\n x2: \"h2\",\n y2: \"l2\"\n }),\n Plot.text(\n vectors,\n midpoint({\n x1: \"h1\",\n y1: \"l1\",\n x2: \"h2\",\n y2: \"l2\",\n text: \"text\",\n fill: \"black\",\n stroke: \"white\"\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"Plot.plot({\n width: 600,\n height: 600,\n x: {\n label: \"a →\",\n domain: [-0.23, 0.28]\n },\n y: {\n label: \"↑ b\",\n domain: [-0.311, 0.2]\n },\n marks: [\n rgbMaxLInOklabMark,\n Plot.dot(synthesizedInterpolations, {\n title: \"name\",\n x: (d) => d.oklab.a,\n y: (d) => d.oklab.b,\n fill: \"hex\"\n }),\n Plot.arrow(vectors, {\n x1: \"a1\",\n y1: \"b1\",\n x2: \"a2\",\n y2: \"b2\"\n }),\n Plot.text(\n vectors,\n midpoint({\n x1: \"a1\",\n y1: \"b1\",\n x2: \"a2\",\n y2: \"b2\",\n text: \"text\",\n fill: \"black\",\n stroke: \"white\"\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"import { midpoint } from \"@recifs/midpoint-transform\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"