2e:null 2f:["$","title",null,{"children":"Color Utilities | Ian Lyttle | Observable"}] 34:T453,### Munsell This color space is constructed using the [munsell](https://github.com/privet-kitty/munsell.js) library; it offers conversion to and from sRGB for the Munsell renotation data interpolated into a continuous space in a polar coordinate system: - `h`: hue `[0, 100)` - `v`: value `[0, 10]`, same concept as luminance - `c`: chroma `[0, Infinity)` The Munsell space, as defined here, is an abstraction from this `hvc` space; it uses Cartesian coordinates: - `L`: luminance `[0, 10)` - `a`: green-magenta `(-Infinity, Infinity)` - `b`: blue-yellow `(-Infinity, Infinity)` The "100" scaling is used to compare different spaces on a similar scale: - `L`: luminance `[0, 100)` - `a`: green-magenta `(-Infinity, Infinity)` - `b`: blue-yellow `(-Infinity, Infinity)` It multiplies the luminance by ten, and the other coordinates by five. This is because my understanding of the Munsell renotation data is that adjacent cards are meant to have the same amount of perceptual difference. In the Munsell data, value increments by one while chroma increments by two. Hence the different scaling factors.35:T41d,I have not been able to find an explicit reference about the relative scaling of chroma and luminance in the Munsell system. More precisely, if we want to create a perceptually-uniform color space, we need to decide what change in chroma is "equivalent" to a change in luminance. In the Munsell renotation data, luminance is numbered from zero to ten, but chroma increments by twos. The layout of the cards might suggest that a unit-change in luminance is equivalent to a change of two units in chroma. To address this, I thought to use the OKLab color space. One of its design goals is to be perceptually uniform across luminance and chroma. Given the Munsell renotation colors, within the RGB gamut, I could compute an RMS chroma - in essence the moment of inertia of the set of Munsell renotation colors around the neutral axis. For a given color space, I could form the ratio of RMS chroma to the extent of the luminance domain (black-to-white). I could then rescale the continuous Munsell space to have the same chroma-luminance ratio as OKLab.36:T4f4,## `colorUtils` object This is an object with properties: - `munsellRenotation`: Munsell renotation data, array of objects, includes neutrals (greys) and out-of-sRGB-gamut colors. Each `Object` has: - `munsell`: `Object` with elements `h`, `V`, `C`, `string` - `sRgb`: `Array` SRGB values Also "method" properties: - `mapColorSpaces()`: `Object -> Map` takes a `colorSpaces` object, returns a map of labels and names - `inRgbGamut()`: `Number[3] -> Boolean` - `d3StringFromSRgb()`: `Number[3] -> String`, returned from `d3.interpolate()`, e.g. `"rgb(102, 51, 153)"` - `d3StringToSRgb()`: `String -> Number[3]` - `hexFromSRgb()`: `Number[3] -> String`, e.g. `"#663399"` - `hexToSRgb()`: `String -> Number[3]` The remaining method properties have signature `Number[3] -> Number[3]`: - `clampRgbGamut()`: limits each element to `[0, 1]` - `toPolar()`: hue expressed as degrees `[0, 360)` - `fromPolar()` - `linearRgbFromSRgb()`: linear RGB is used for CVD simulations - `linearRgbToSRgb()` Note that `munsellSRgb` includes values outside the sRGB gamut, so you may want to `filter()` using `inRgbGamut()`. As well, the greys are provided as a separate element: `munsellGreySRgb`. `mapColorSpace` can be useful to build a radio input to select a color space.37:T57b,class ColorSpace { constructor({ label = "", fromSRgb = _.identity, toSRgb = _.identity } = {}) { this.label = label; // TODO: validate that these are functions this.fromSRgb = fromSRgb; this.toSRgb = toSRgb; this.scale = { luminance: scaleLuminance(this.fromSRgb), chroma: scaleChroma(this.fromSRgb), maxChroma: scaleMaxChroma(this.fromSRgb) }; const scale100 = 100 / this.scale.luminance; this.from100 = (x) => math.divide(x, scale100); this.to100 = (x) => math.multiply(x, scale100); this.scale.maxChroma100 = this.to100(this.scale.maxChroma); } maxChroma = (luminance, hue) => { // short-circuit if white, black, or beyond if (luminance <= 0 || luminance >= this.scale.luminance) return 0; const toSRgb = this.toSRgb; const fy = function (chroma) { return _.flow(fromPolar, toSRgb, distGamut)([luminance, chroma, hue]); }; return findRoot(fy, 0, this.scale.maxChroma); }; maxChroma100 = (luminance100, hue) => { const luminance = this.from100(luminance100); return this.to100(this.maxChroma(luminance, hue)); }; clampChromaSRgb = (x) => { if (inRgbGamut(x)) { return x; } const [luminance, , hue] = _.flow(this.fromSRgb, toPolar)(x); const chroma = this.maxChroma(luminance, hue); return _.flow(fromPolar, this.toSRgb)([luminance, chroma, hue]); }; }38:T6ed,## `ColorSurface` class A `ColorSurface` is defined by a `ColorSpace` and a function that, given luminance, returns a hue. If this function returns a constant, this is a "straight" slice of the color space. If the function returns a value responsive to luminance, this is a "curved" slice through the color space. Within a given surface, color is defined by luminance and chroma. In addition (and perhaps preferable to) the constructor, we can build a `ColorSurface` using static methods: - `fromHue()`: `String, Object -> ColorSurface`, given `hue` and options: - `lum100`: `Number` (default `50`) 100-based luminance at `hue` - `dHue100`: `Number` (default `0`) derivative of hue by 100-based luminance - `space`: `ColorSpace` (default `colorSpaces.munsell`) - `fromHex()`: `Number, Object -> ColorSurface`, given `hex` and options: - `dHue100`: `Number` (default `0`) derivative of hue by 100-based luminance - `space`: `ColorSpace` (default `colorSpaces.munsell`) - `fromHexHex()`: `String, String, Object -> ColorSurface`, given two `hex` values and options: - `short`: `boolean` (default `true`), use short way around the hue-circle - `space`: `ColorSpace` (default `colorSpaces.munsell`) - A `ColorSurface` has two properties: - `fnSurface()`: `Number -> Number` given a 100-scaled luminance, return hue - `space`: `ColorSpace` used for the surface It has a number of methods: - `raster100()`: `Number, Number -> String` raster function (used in Plot), given 100-based `chroma` and `luminance`, returns a hex-string for the color. - `plotMarks100()`: `Object -> Object[]`, returns array of Plot marks, given an object of options: - `negateChroma`: `Boolean` (default `false`), indicates to negate chroma values (used for diverging scales) 39:Tabb,class ColorSurface { constructor(fnSurface, space) { this.fnSurface = fnSurface; this.space = space; } get raster100() { const fnSurface = this.fnSurface; const toSrgb = _.flow([ colorUtils.fromPolar, this.space.from100, this.space.toSRgb ]); return function (chroma, luminance) { try { const hue = fnSurface(luminance); const sRgb = toSrgb([luminance, chroma, hue]); const hex = colorUtils.inRgbGamut(sRgb) ? colorUtils.hexFromSRgb(sRgb) : undefined; return hex; } catch (error) { throw `${error} for {luminance: ${luminance}, chroma: ${chroma}}`; } }; } plotMarks100 = ({ negateChroma = false } = {}) => { return [ Plot.raster({ fill: negateChroma ? (x, y) => this.raster100(-x, y) : this.raster100, x1: 0, x2: negateChroma ? -this.space.scale.maxChroma100 : this.space.scale.maxChroma100, y1: 0, y2: 100 }) ]; }; // todo: serialize to object, create from object static fromHue = function ( hue, { lum100 = 50, dHue100 = 0, space = colorSpaces.munsell } = {} ) { if (!(typeof hue === "number")) { throw "hue is not a number"; } const fnSurface = function (luminance) { return hue + dHue100 * (luminance - lum100); }; return new ColorSurface(fnSurface, space); }; static fromHex = function ( hex, { dHue100 = 0, space = colorSpaces.munsell } = {} ) { if (!(typeof hex === "string")) { throw "hex is not a string"; } const [lum100, , hue] = _.flow( colorUtils.hexToSRgb, space.fromSRgb, space.to100, colorUtils.toPolar )(hex); return this.fromHue(hue, { lum100: lum100, dHue100: dHue100, space: space }); }; static fromHexHex = function ( hex1, hex2, { short = true, space = colorSpaces.munsell } = {} ) { if (!(typeof hex1 === "string")) { throw "hex1 is not a string"; } if (!(typeof hex2 === "string")) { throw "hex2 is not a string"; } const toPolar = _.flow( colorUtils.hexToSRgb, space.fromSRgb, space.to100, colorUtils.toPolar ); const [lum100_1, , hue1] = toPolar(hex1); const [lum100_2, , hue2] = toPolar(hex2); const dHue100 = deltaHue(hue1, hue2, { short: short }) / (lum100_2 - lum100_1); return this.fromHue(hue1, { lum100: lum100_1, dHue100: dHue100, space: space }); }; static fromHexArray(arrHex, { space = colorSpaces.jzazbz }) { // idea: spline hue = f(luminance) // need to assure monotonicity throw "not implemented"; } }3a:T4d8,## `ColorTrajectory` class A `ColorTrajectory` consists of: - a set of `controlPoints`, array of objects with elements `luminance`, `chroma` - a `spline()` function that operates `[0, 1]` and returns an object with elements `luminance`, `chroma` You can build a `ColorScaleSequential` by combining a `ColorSurface` with a `ColorTrajectory`. The `constructor()` takes a set of `controlPoints`, from which it builds the `spline()`. The methods are all related to Plot marks, each has signature `Object -> Object[]`: - `plotMarks100ControlPoints()` marks (⨉ and +) for control points, with options: - `negateChroma`: `Boolean` (default `false`), indicates to negate chroma values (used for diverging scales) - `rControlPoints`: `Number` (default `10`), radius of marks - `plotMarks100Spline()` marks for spline, with options: - `negateChroma`: `Boolean` (default `false`), indicates to negate chroma values (used for diverging scales) - `nStepSpline`: `Number` (default `100`) number of points used in the spline, snaps to nearest multiple of `2` or `5` - `strokeSpline`: `String` (default `#777777`) number of - `plotMarks100()` combines `plotMarks100ControlPoints()` and `plotMarks100Spline()`, uses union of options 3b:T819,class ColorTrajectory { constructor(controlPoints) { // array of objects with luminance, chroma if (!Array.isArray(controlPoints)) { throw "controlPoints must be an array"; } const hasForm = controlPoints.map((x) => { return typeof x.luminance == "number" && typeof x.chroma == "number"; }); if (hasForm.length == 0 || !_.every(hasForm)) { throw "Each element of controlPoints must have a `luminance` and `chroma`, both numbers"; } this.controlPoints = controlPoints; this.spline = (x) => ({ luminance: d3.interpolateBasis(controlPoints.map((x) => x.luminance))(x), chroma: d3.interpolateBasis(controlPoints.map((x) => x.chroma))(x) }); } plotMarks100ControlPoints = ({ negateChroma = false, rControlPoints = 10 } = {}) => { const controlPoints = this.controlPoints.map(negChroma(negateChroma)); return [ Plot.dot(controlPoints, { x: "chroma", y: "luminance", stroke: "black", strokeWidth: 1, r: rControlPoints, symbol: "times" }), Plot.dot(controlPoints, { x: "chroma", y: "luminance", stroke: "white", strokeWidth: 1, r: rControlPoints, symbol: "plus" }) ]; }; // TODO: serialize, de-serialize plotMarks100Spline = ({ negateChroma = false, nStepSpline = 100, // approximate, as d3.ticks clamps to multiples of 2 and 5 strokeSpline = "#777777" } = {}) => { const samples = d3 .ticks(0, 1, nStepSpline) .map(this.spline) .map(negChroma(negateChroma)); return [ Plot.line(samples, { x: "chroma", y: "luminance", stroke: strokeSpline }) ]; }; plotMarks100 = ({ negateChroma = false, nStepSpline = 100, strokeSpline = "#777777", rControlPoints = 10 } = {}) => { return [ ...this.plotMarks100ControlPoints({ negateChroma, rControlPoints }), ...this.plotMarks100Spline({ negateChroma, nStepSpline, strokeSpline }) ]; }; }3c:T633,## `ColorScaleSequential` class A `ColorScaleSequential` consists of a `ColorTrajectory` and a `ColorSurface`. Its purpose is to return a color given an input `[0, 1]`; the scale is designed to be perceptually uniform, it rescales the trajectory so that the Euclidean distance in the color space increases uniformly according to the input. The `constructor()` takes a `ColorTrajectory` and a `ColorSurface`; it also accepts an option `nStep`, the number of steps taken in the rescaling calculation. It has elements: - `surface` - `trajectory` - `distance`, the total Euclidean distance covered by the scale. It has methods: - `sRgbInterp()`: `Number -> Number[3]`, given input `[0, 1]`, returns SRGB array - `hexInterp()`: `Number -> String`, given input `[0, 1]`, returns hex string - `data100()`: `Number -> Object`, given input `[0, 1]`, returns object with `x`, `luminance`, `chroma`, `hue`, `hex` - `data100Points()`: `Number -> Object[]` given number of steps, return array of `data100()` objects - `plotMarks100Points()`: `Object -> Object[]` return array of point-marks, given options: - `negateChroma`: `Boolean` (default `false`), indicates to negate chroma values (used for diverging scales) - `nStepPoints`: `Number` (default `10`), indicates how steps to take in scale - `strokePoints`: `String` (default `#777777`) stroke color for outline - `rPoints`: `Number` (default `10`) radius of points - `plotMarks100()`: `Object -> Object[]` includes the point-marks as well as the trajectory-marks and the surface-marks, options are a union of options 3d:Tbf0,class ColorScaleSequential { constructor(surface, trajectory, { nStep = 100, scale = 1 } = {}) { if (!(surface instanceof ColorSurface)) { throw "surface must be a ColorSurface"; } if (!(trajectory instanceof ColorTrajectory)) { throw "trajectory must be a ColorTrajectory"; } this.surface = surface; this.trajectory = trajectory; this.nStep = nStep; // calculate length100 const indices = d3.ticks(0, 1, nStep); const distances = indices .map(this.trajectory.spline) // get luminance, chroma .map((x) => [x.luminance, x.chroma, this.surface.fnSurface(x.luminance)]) // get hue, put in array .map(colorUtils.fromPolar) // into Cartesian .map((x, i, arr) => { return i == 0 ? 0 : math.distance(x, arr[i - 1]); // distance from previous point }); const cumulativeDistances = math.cumsum(distances); this.distance = cumulativeDistances.slice(-1)[0]; const normalizedDistances = cumulativeDistances.map( (x) => x / this.distance ); const rescaleFunction = (x) => scale * x; const transferFunction = NaturalCubicSpline(normalizedDistances, indices); this.sRgbInterp = _.flow([ rescaleFunction, transferFunction, this.trajectory.spline, (x) => [x.luminance, x.chroma, this.surface.fnSurface(x.luminance)], fromPolar, this.surface.space.from100, this.surface.space.toSRgb, this.surface.space.clampChromaSRgb ]); this.hexInterp = _.flow([this.sRgbInterp, colorUtils.hexFromSRgb]); } // use arrow notation to preserve "this" data100 = (x) => { const sRgb = this.sRgbInterp(x); const lab = _.flow([this.surface.space.fromSRgb, this.surface.space.to100])( sRgb ); const lch = toPolar(lab); return { x: x, luminance: lch[0], chroma: lch[1], hue: lch[2], a: lab[1], b: lab[2], hex: hexFromSRgb(sRgb) }; }; data100Points = (nStepPoints) => { return d3 .range(0, 1, 1 / nStepPoints) .concat(1) .map(this.data100); }; plotMarks100Points = ({ negateChroma: negateChroma, nStepPoints = 10, strokePoints = "#777777", rPoints = 10 } = {}) => { const data = this.data100Points(nStepPoints).map(negChroma(negateChroma)); return [ Plot.dot(data, { x: "chroma", y: "luminance", r: rPoints, fill: "hex", stroke: strokePoints }) ]; }; plotMarks100 = ({ negateChroma: negateChroma, nStepSpline = 100, strokeSpline = "#777777", rControlPoints = 10, nStepPoints = 10, strokePoints = "#777777", rPoints = 10 } = {}) => { return [ ...this.surface.plotMarks100({ negateChroma }), ...this.trajectory.plotMarks100({ negateChroma, nStepSpline, strokeSpline, rControlPoints }), ...this.plotMarks100Points({ negateChroma, nStepPoints, strokePoints, rPoints }) ]; }; }3e:T403,## `ColorScaleDiverging` class A `ColorScaleDiverging` is constructed using two `ColorScaleSequential`s, preferably with a common color at `x = 0`. It offers a similar set of methods: - `sRgbInterp()`: `Number -> Number[3]`, given input `[0, 1]`, returns SRGB array - `hexInterp()`: `Number -> String`, given input `[0, 1]`, returns hex string - `data100()`: `Number -> Object`, given input `[0, 1]`, returns object with `x`, `luminance`, `chroma`, `hue`, `hex` - `data100Points()`: `Number -> Object[]` given number of steps, return array of `data100()` objects - `plotMarks100Points()`: `Object -> Object[]` return array of point-marks, given options: - `nStepPoints`: `Number` (default `10`), indicates how steps to take in scale - `strokePoints`: `String` (default `#777777`) stroke color for outline - `rPoints`: `Number` (default `10`) radius of points - `plotMarks100()`: `Object -> Object[]` includes the point-marks as well as the trajectory-marks and the surface-marks, options are a union of options3f:Tb26,class ColorScaleDiverging { constructor(colorScaleSeqA, colorScaleSeqB, { scale = 1 } = {}) { if (!(colorScaleSeqA instanceof ColorScaleSequential)) { throw "colorScaleSeqA must be a ColorScaleSequential"; } if (!(colorScaleSeqB instanceof ColorScaleSequential)) { throw "colorScaleSeqB must be a ColorScaleSequential"; } // TODO: verify that scales meet at t = 0 console.log(scale); this.colorScaleSeqA = new ColorScaleSequential( colorScaleSeqA.surface, colorScaleSeqA.trajectory, { nStep: colorScaleSeqA.nStep, scale: scale } ); this.colorScaleSeqB = new ColorScaleSequential( colorScaleSeqB.surface, colorScaleSeqB.trajectory, { nStep: colorScaleSeqB.nStep, scale: scale } ); this.distance = this.colorScaleSeqA.distance + this.colorScaleSeqB.distance; } reflect(x, fnA, fnB) { return x < 0.5 ? fnA(1 - 2 * x) : fnB(2 * x - 1); } sRgbInterp = (x) => { return this.reflect( x, this.colorScaleSeqA.sRgbInterp, this.colorScaleSeqB.sRgbInterp ); }; hexInterp = _.flow([this.sRgbInterp, colorUtils.hexFromSRgb]); data100 = (x) => { return this.reflect( x, this.colorScaleSeqA.data100, this.colorScaleSeqB.data100 ); }; data100Points = (nStepPoints) => { return [ ...this.colorScaleSeqA .data100Points(nStepPoints / 2) .map((a) => ({ ...a, x: 0.5 - 0.5 * a.x })) .reverse() .slice(0, -1), // avoid repeating the midpoint ...this.colorScaleSeqB .data100Points(nStepPoints / 2) .map((a) => ({ ...a, x: 0.5 + 0.5 * a.x })) ]; }; plotMarks100Points = ({ nStepPoints = 10, strokePoints = "#777777", rPoints = 10 } = {}) => { const data = this.data100Points(nStepPoints).map((a) => a.x < 0.5 ? { ...a, chroma: -a.chroma } : a ); return [ Plot.dot(data, { x: "chroma", y: "luminance", r: rPoints, fill: "hex", stroke: strokePoints }) ]; }; plotMarks100 = ({ nStepSpline = 100, strokeSpline = "#777777", rControlPoints = 10, nStepPoints = 10, strokePoints = "#777777", rPoints = 10 } = {}) => { return [ ...this.colorScaleSeqA.surface.plotMarks100({ negateChroma: true }), ...this.colorScaleSeqA.trajectory.plotMarks100({ negateChroma: true, nStepSpline, strokeSpline, rControlPoints }), ...this.colorScaleSeqB.surface.plotMarks100({ negateChroma: false }), ...this.colorScaleSeqB.trajectory.plotMarks100({ negateChroma: false, nStepSpline, strokeSpline, rControlPoints }), ...this.plotMarks100Points({ nStepPoints, strokePoints, rPoints }) ]; }; }40:T1105,changeTable([ { date: new Date("2023-08-04"), change: [ "- add optional argument `scale` to `ColorScaleSequential` and `ColorScaleDiverging` constructors, so as not to use the full range" ].join("\n") }, { date: new Date("2023-07-31"), change: [ "- rescale chroma for `colorSpaces.munsell` using all the renotation colors in gamut" ].join("\n") }, { date: new Date("2023-07-28"), change: [ "- check types of `hue` and `hex` arguments in `ColorSurface` constructors", "- add `maxChroma100()` as method of `ColorSpace`" ].join("\n") }, { date: new Date("2023-07-27"), change: [ "- fix `ColorUtils.mapColorSpaces()` so that default value works correctly" ].join("\n") }, { date: new Date("2023-07-22"), change: [ "- add classes `ColorSurface`, `ColorTrajectory`, `ColorScaleSequential`, `ColorScaleDiverging`", "- add `plotMarks()` method to `ColorSurface`, takes optional argument `negateChroma`", "- update documentation", "- remove `colorSpace`, `colorUtil`: the non-pluralized versions (see 2023-06-28)" ].join("\n") }, { date: new Date("2023-07-14"), change: [ "- add `maxChroma`, `maxChroma100` to `ColorSpace.scale`, maximum chroma in RGB gamut", "- add `findMaxChroma()` to `ColorSpace`, maximum chroma in RGB gamut for given `luminance`, `hue`" ].join("\n") }, { date: new Date("2023-07-13"), change: [ "- clip very small values of hue (< 1.e-7) in `mhvcFromPolar()`, remove `x % 360` from `fromPolar()`" ].join("\n") }, { date: new Date("2023-07-12"), change: [ "- hot fix for bug (transposing coordinates) in `mhvcFromPolar()`", "- hot fix to use `x % 360` for hue in `fromPolar()`" ].join("\n") }, { date: new Date("2023-07-05"), change: [ "- hot fix for Munsell greys (neutrals) to clamp to RGB gamut" ].join("\n") }, { date: new Date("2023-07-04"), change: [ "- remove `to100()`, `from100()` from `ColorSpace` constructor, built automatically now", "- remove deprecated elements from `ColorUtils`: `mapColorSpace`, `munsellSRgb`, `munsellGreySRgb`" ].join("\n") }, { date: new Date("2023-07-03"), change: [ "- add Jzazbz to `colorSpaces`", "- add `scale` object (with elements `luminance`, `chroma`) to `ColorSpace`", "- rescale chroma for Munsell space to have similar chroma-luminance ratio as OKLab" ].join("\n") }, { date: new Date("2023-06-30"), change: [ "- patch numerical problem for CIELuv when luminance is exactly zero" ].join("\n") }, { date: new Date("2023-06-29"), change: [ "- add `colorUtils.mapColorSpaces()` in anticpation of replacing `colorUtils.mapColorSpace`; takes `colorSpaces` as default" ].join("\n") }, { date: new Date("2023-06-28"), change: [ "- add `colorSpaces` and `colorUtils` in anticpation of replacing `colorSpace` and `colorUtil`" ].join("\n") }, { date: new Date("2023-06-26"), change: [ "- add `munsellRenotation` to `ColorUtil` in anticipation of replacing `munsellSRgb` and `munsellGreySRgb`" ].join("\n") }, { date: new Date("2023-06-24"), change: ["- add `oklab` `ColorSpace`"].join("\n") }, { date: new Date("2023-06-23"), change: [ "- remove `multiplyMatrixVectorThree()` from `colorUtil`, cleaner to use [mathjs](https://mathjs.org/index.html)", "- add `label` property to `ColorSpace`", "- add `cieluv` `ColorSpace`", "- add `mapColorSpace` to `colorUtil`: can be useful for creating an input to select color-space" ].join("\n") }, { date: new Date("2023-06-19"), change: [ "- add `munsell` `ColorSpace`", "- add Munsell sRGB arrays to `colorUtil`", "- add `multiplyMatrixVectorThree()` to `colorUtil`: given a matrix, returns a function that multiplies that matrix by a vector", "- add `hexFromSRgb()`, `hexToSRgb()` to `colorUtil`: conversion to and from hex strings" ].join("\n") }, { date: new Date("2023-06-18"), change: [ "- document structure of objects to be exported: `colorSpace`, `colorUtil`, and `ColorSpace` class", "- begin populating `colorUtil` with components" ].join("\n") } ])41:[{"id":"dc76fcf881f028e6393415a773e9a708de4ee9be494f79cdf2c073abcd412e985ef034ef27e2d2e18478333e3c47289fa781de09ff7b6b1dda2b010212673717","href":"https://static.observableusercontent.com/files/dc76fcf881f028e6393415a773e9a708de4ee9be494f79cdf2c073abcd412e985ef034ef27e2d2e18478333e3c47289fa781de09ff7b6b1dda2b010212673717","name":"munsell-renotation.txt","type":"text/plain","lastModified":1688385748294.535,"size":92988}] 32:{"id":"337ad46fff07887e","slug":"color-utilities","title":"Color Utilities","thumbnail":"a7c22b1f4ad6e8a8a0ce2f317976e8ca26d6a1c7206dbf4dc56cedebea2f8878","access_level":"public","create_time":"$D2023-07-03T12:02:28.294Z","update_time":"$D2023-08-05T00:08:42.960Z","view_time":null,"first_public_time":"$D2023-07-03T12:02:28.294Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"5c34077dfed9632a","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":"starter_2024"},"version":1270,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"522327b52a854639","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":null}],"members":[{"type":"individual","id":"522327b52a854639","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"a606fb025c1e70ce","slug":"color","title":"Computing on color","owner":{"id":"5c34077dfed9632a","login":"ijlyttle","name":"Ian Lyttle"}},"type":"notebook","body":{"title":"Color Utilities","cells":[{"id":0,"value":"# Color Utilities\n\nThis notebook includes yet another treatment of color spaces. There is no shortage of JavaScript libraries on the topic, nor any shortage of R or Python packages. This work uses the JavaScript libraries: [munsell](https://github.com/privet-kitty/munsell.js) and [culori](https://github.com/Evercoder/culori), and is inspired by R's [colorspace package](https://hclwizard.org/r-colorspace/) and the formerly open-source [coloria package](https://pypi.org/project/coloria/) in Python (previously known as \"colorio\").\n\nOne reason for the conceit of \"yet another treatment\" is that I want to compare color spaces, so I abuse most of these color spaces by scaling them to a common reference.\n\nThis notebook also offers some ideas I had seen in R's [colorspace package](https://hclwizard.org/r-colorspace/), but treated a little differently here: color surfaces and trajectories.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":332,"value":"## Components\n\nThis notebook provides some objects:\n\n- **`colorSpaces`**: instances of `ColorSpace`, e.g. Munsell, OKLab \n- **`colorUtils`**: collection of utilities, e.g. `hexFromSRgb()`, `hexToSRgb()` \n\nIt also provides some classes:\n \n- **`ColorSpace`**: mapping between Euclidean space and SRGB coordinates\n- **`ColorSurface`**: slice of a color space, on which hue is a function of luminance\n- **`ColorTrajectory`**: parametric spline describing a path in luminance and chroma \n- **`ColorScaleSequential`**: combination of a `ColorSurface` with a `ColorTrajectory`, provides color-scale function: given a input [0, 1], returns a color\n- **`ColorScaleDiverging`**: combination of two `ColorScaleSequentials`, each with a (hopefully common, neutral) starting point\n\nThese components can be used to design, and help plot, color scales.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"## `colorSpaces` object","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":419,"value":"colorSpaces = ({\n munsell: munsellSpace,\n oklab: oklabSpace,\n cieluv: cieluvSpace,\n jzazbz: jzazbzSpace\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":264,"value":"munsellSpace = new ColorSpace({\n label: \"Munsell\",\n fromSRgb: _.flow([(x) => munsell.rgbToMhvc(...x), mhvcToPolar, fromPolar]),\n toSRgb: _.flow([toPolar, mhvcFromPolar, (x) => munsell.mhvcToRgb(...x)])\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":899,"value":"// Munsell luminance: 10\nchromaScale = oklabSpace.scale.chroma /\n oklabSpace.scale.luminance /\n (munsellUnscaledChromaRms / 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"oklabSpace.scale.chroma","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"munsellSpace.scale.chroma","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1261,"value":"// use this to make comparison with OKLab\nmunsellUnscaledFromSRgb = _.flow([\n (x) => munsell.rgbToMhvc(...x),\n (x) => [x[1], x[2], x[0] * 3.6], // LCh\n fromPolar\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"munsellUnscaledChromaRms = scaleChroma(munsellUnscaledFromSRgb, {\n colors: munsellGamutSRgb\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"// Number[3] -> Number[3]\nmhvcToPolar = function (x) {\n const [h, v, c] = x;\n\n // scale chroma to OKLab, hue to 360 degrees\n return [v, c * chromaScale, h * 3.6];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"mhvcFromPolar = function (x) {\n const [L, C, hue] = x;\n\n // munsell library seems not to like hue values near, but not, zero\n const H = math.abs(hue) < 1e-7 ? 0 : hue;\n\n // scale chroma from OKLab, hue to 100\n return [H / 3.6, L, C / chromaScale];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"### CIELuv\n\nThis is the space used in R's colorspace package.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":604,"value":"cieluvSpace = new ColorSpace({\n label: \"CIELuv\",\n fromSRgb: makeFromSRgb(\"luv\", [\"l\", \"u\", \"v\"]),\n toSRgb: (x) => (x[0] == 0 ? [0, 0, 0] : makeToSRgb(\"luv\", [\"l\", \"u\", \"v\"])(x))\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"There appears a numerical problem if luminance is exactly zero; we patch it here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":778,"value":"cieluvSpace.toSRgb([0, 0, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"### OKLab","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":709,"value":"oklabSpace = new ColorSpace({\n label: \"OKLab\",\n fromSRgb: makeFromSRgb(\"oklab\", [\"l\", \"a\", \"b\"]),\n toSRgb: makeToSRgb(\"oklab\", [\"l\", \"a\", \"b\"])\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"oklabSample = _.flow(oklabSpace.fromSRgb, oklabSpace.to100)([0.5, 0.5, 0.5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"_.flow(oklabSpace.from100, oklabSpace.toSRgb)(oklabSample)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"_.flow(oklabSpace.fromSRgb, oklabSpace.to100)([0.4, 0.2, 0.6])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"_.flow(oklabSpace.fromSRgb)([0.5, 0, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"// to confirm\ntoOKlab = function (x) {\n {\n const l = 0.4122214708 * x[0] + 0.5363325363 * x[1] + 0.0514459929 * x[2];\n const m = 0.2119034982 * x[0] + 0.6806995451 * x[1] + 0.1073969566 * x[2];\n const s = 0.0883024619 * x[0] + 0.2817188376 * x[1] + 0.6299787005 * x[2];\n\n const l_ = Math.cbrt(l);\n const m_ = Math.cbrt(m);\n const s_ = Math.cbrt(s);\n\n return [\n 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,\n 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,\n 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_\n ];\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"_.flow([linearRgbFromSRgb, toOKlab])([0.5, 0, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"### Jzazbz","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":866,"value":"scaleJzazbz = {\n const conv = culori.converter(\"jab\");\n const jabBlack = conv({ mode: \"rgb\", r: 1, g: 1, b: 1 });\n\n return jabBlack.j;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"jzazbzSpace = new ColorSpace({\n label: \"Jzazbz\",\n fromSRgb: makeFromSRgb(\"jab\", [\"j\", \"a\", \"b\"]),\n toSRgb: makeToSRgb(\"jab\", [\"j\", \"a\", \"b\"])\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"_.flow([jzazbzSpace.fromSRgb, jzazbzSpace.to100])([0.4, 0.2, 0.6])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"// String, String[] -> (Number[] -> Number[])\nmakeToSRgb = function (space, index) {\n const converter = culori.converter(\"rgb\");\n return function (x) {\n const objSpace = {\n mode: space,\n [index[0]]: x[0],\n [index[1]]: x[1],\n [index[2]]: x[2]\n };\n const objRGB = converter(objSpace);\n return [\"r\", \"g\", \"b\"].map((x) => objRGB[x]);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"// String, String[] -> (Number[] -> Number[])\nmakeFromSRgb = function (space, index) {\n const converter = culori.converter(space);\n return function (x) {\n const objRgb = {\n mode: \"rgb\",\n r: x[0],\n g: x[1],\n b: x[2]\n };\n const objSpace = converter(objRgb);\n return index.map((x) => objSpace[x]);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"spaceNew = makeFromSRgb(\"oklab\", [\"l\", \"a\", \"b\"])([0.5, 0.5, 0.5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"makeToSRgb(\"oklab\", [\"l\", \"a\", \"b\"])(spaceNew)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"colorUtils = ({\n munsellRenotation,\n mapColorSpaces,\n inRgbGamut,\n hexFromSRgb,\n hexToSRgb,\n d3StringFromSRgb,\n d3StringToSRgb,\n clampRgbGamut,\n toPolar,\n fromPolar,\n linearRgbFromSRgb,\n linearRgbToSRgb\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"### Components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1226,"value":"mapColorSpaces()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"mapColorSpaces = {\n const defColorSpaces = colorSpaces;\n return function ({ colorSpaces = defColorSpaces } = {}) {\n const names = Object.keys(colorSpaces);\n const arr = names.map((x) => [colorSpaces[x].label, x]);\n return new Map(arr);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"// Number -> Boolean\ninGamut = function (x) {\n return x >= 0 && x <= 1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"// Number[] -> Boolean\ninRgbGamut = function (x) {\n return _.every(x.map(inGamut));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"inRgbGamut([-0.5, 0.5, 1.5]) // [false, true, false]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"// Number -> Number\nclampGamut = function (x) {\n return x < 0 ? 0 : x > 1 ? 1 : x;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"// Number[] -> Number[]\nclampRgbGamut = function (x) {\n return x.map(clampGamut);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"clampRgbGamut([-0.5, 0.5, 1.5]) // [0, 0.5, 1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"// Number[3] -> Number[3]\ntoPolar = function (x) {\n const [L, a, b] = x;\n return [L, Math.sqrt(a ** 2 + b ** 2), (Math.atan2(b, a) * 180) / Math.PI];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"polar = toPolar([50, 86.60254, 50])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"// Number[3] -> Number[3]\nfromPolar = function (x) {\n // h expressed as degrees\n const [L, c, h] = x;\n const theta = (Math.PI / 180) * h;\n return [L, c * Math.cos(theta), c * Math.sin(theta)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"fromPolar(polar)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"// Number -> Number\nlinearFromS = function (x) {\n return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"// Number[3] -> Number[3]\nlinearToS = function (x) {\n return x <= 0.03928 / 12.92\n ? 12.92 * x\n : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"arrZeroToOne = d3.ticks(0, 1, 5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"lin = arrZeroToOne.map(linearFromS)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"lin.map(linearToS)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"// Number -> Number\nlinearRgbFromSRgb = function (x) {\n return x.map(linearFromS);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"linRGB = linearRgbFromSRgb([0.5, 0.5, 0.5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"// Number[3] -> Number[3]\nlinearRgbToSRgb = function (x) {\n return x.map(linearToS);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"linearRgbToSRgb(linRGB)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"// Number[3] -> String\nhexFromSRgb = function (x) {\n const color = { r: x[0], g: x[1], b: x[2], mode: \"rgb\" };\n return culori.formatHex(color);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"hexFromSRgb([0.4, 0.2, 0.6]) // \"#663399\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"// String -> Number[3]\nhexToSRgb = function (x) {\n const color = culori.parseHex(x);\n return [color.r, color.g, color.b];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"hexToSRgb(\"#663399\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"// String -> Number[3]\nd3StringToSRgb = function (x) {\n const regex = /\\d+/g;\n return x.match(regex).map((x) => +x / 255);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"d3StringToSRgb(d3.interpolateBlues(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"// Number[3] -> String\nd3StringFromSRgb = function (x) {\n const format = d3.format(\".0f\");\n return `rgb(${x.map((x) => format(x * 255)).join(\", \")})`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"d3StringFromSRgb([1.23, 4.56, 5.78])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"// adapted from https://observablehq.com/@d3/color-schemes\nfunction swatches(colors) {\n const n = colors.length;\n const dark = d3.lab(colors[0]).l < 50;\n const canvas = svg`

${canvas}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"## `ColorSpace` class\n\nA `ColorSpace` has properties:\n\n- `label`: better-spelled name for the color space\n- `scale`: object with four elements, describing the color-space:\n - `luminance`: difference in luminance between `#000000` and `#FFFFFF`\n - `chroma`: RMS chroma of Munsell Renotation colors: `{value: 5, chroma: 8}`\n - `maxChroma`: maximum chroma within RGB gamut\n - `maxChroma100`: maximum chroma (100-based scaling) within RGB gamut\n \nEach of these methods has signature `Number[3] -> Number[3]`:\n- `fromSRgb()`: from sRGB to this color space\n- `toSRgb()`: from this color space to sRGB\n- `from100()`: from this color space to 100-based scaling, using `[L, a , b]`\n- `to100()`: from 100-based scaling to this color space\n- `clampChromaSRgb()`: given sRGB, if outside RGB gamut, return sRGB with maximum chroma, holding luminance and hue constant, otherwise no-op.\n \nOther methods:\n- `maxChroma()`: `Number, Number -> Number`, given `luminance` and `hue`, return numeric value for maximum chroma\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"munsellSpace.maxChroma(9, -180)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"_.flow([fromPolar, munsellSpace.toSRgb, distGamut])([5, 2.5689, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"testSpace = munsellSpace","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1203,"value":"testChroma = [1.01, -0.01, 0.4]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"_.flow(testSpace.fromSRgb, toPolar)(testChroma)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"testChromaClamp = testSpace.clampChromaSRgb(testChroma)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"_.flow(testSpace.fromSRgb, toPolar)(testChromaClamp)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1199,"value":"testSpace.clampChromaSRgb([0.5, 1, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":892,"value":"// (Number[3] -> Number[3]) -> Number\nscaleLuminance = function (fromSRgb) {\n // given a function that translates from SRgb to a colorspace\n // return the difference in luminance between \"black\" and \"white\"\n const black = fromSRgb([0, 0, 0]);\n const white = fromSRgb([1, 1, 1]);\n\n return white[0] - black[0];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"// (Number[3] -> Number[3]), Number[3][] -> Number\nscaleChroma = function (fromSRgb, { colors = munsellGamutSRgb } = {}) {\n // given a function that translates from SRgb to a colorspace, and a set of colors\n // return the RMS chroma\n const colorsChroma = colors.map(_.flow([fromSRgb, toPolar, (x) => x[1]]));\n\n const sumsqChroma = colorsChroma.reduce((acc, val) => acc + val * val, 0);\n\n const rmsChroma = math.sqrt(sumsqChroma / colors.length);\n\n return rmsChroma;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"scaleChroma(munsellSpace.fromSRgb)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"scaleChroma(oklabSpace.fromSRgb, { colors: munsellGamutSRgb })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"munsellGamutSRgb = munsellRenotation.map((x) => x.sRgb).filter(inRgbGamut)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"munsellV5C8SRgb","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"scaleMaxChroma = function (\n fromSRgb,\n {\n colors = [\n [1, 0, 0],\n [0, 1, 0],\n [0, 0, 1],\n [0, 1, 1],\n [1, 0, 1],\n [0, 1, 1]\n ]\n } = {}\n) {\n const colorsChroma = colors.map(_.flow([fromSRgb, toPolar, (x) => x[1]]));\n\n return math.max(colorsChroma);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"scaleMaxChroma(munsellSpace.fromSRgb)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"// adapted from: https://github.com/mikolalysenko/bisect\nfindRoot = function (fy, lo, hi, { tol = 1e-3 } = {}) {\n let yhi = fy(hi);\n let ylo = fy(lo);\n\n if (yhi > 0 == ylo > 0) {\n throw \"findRoot cannot proceed: both values on same side of zero\";\n }\n\n // bisection\n while (math.abs(hi - lo) > tol) {\n let m = (hi + lo) / 2;\n let ym = fy(m);\n\n if (ym > 0 == yhi > 0) {\n hi = m;\n yhi = ym;\n } else {\n lo = m;\n ylo = ym;\n }\n }\n\n // secant\n let approx = lo - ((hi - lo) * ylo) / (yhi - ylo);\n\n return approx;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1095,"value":"findRoot((x) => 1 - 2 * math.sqrt(x), 0, 100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"distGamut = function (x) {\n return math.min(x.map((x) => [x, 1 - x]));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"distGamut([0.5, 0.95, 1.01])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1194,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":"surface = {\n return ColorSurface.fromHexHex(\"#0000FF\", \"#00D8FF\", {\n short: true,\n space: colorSpaces.munell\n });\n // return ColorSurface.fromHue(270, { lum100: 30, dHue100: -1 });\n // return ColorSurface.fromHex(\"#00FFFF\", { dHue100: -1 });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"Plot.plot({\n width: (200 * surface.space.scale.maxChroma100) / 15,\n aspectRatio: 3,\n grid: true,\n x: { label: \"chroma\" },\n y: { label: \"luminance\" },\n marks: [\n //...surface.plotMarks100({ negateChroma: true }),\n surface.plotMarks100()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1191,"value":"### Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1190,"value":"deltaHue = function (h1, h2, { short = true } = {}) {\n const difference = h2 - h1;\n const isDiffShort = math.abs(difference) < 180;\n\n const complement = difference > 0 ? difference - 360 : 360 + difference;\n\n return short == isDiffShort ? difference : complement;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1189,"value":"deltaHue(45, 90, { short: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1187,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"// Boolean -> (Object -> Object)\nnegChroma = function (negate) {\n return function (x) {\n return negate ? { ...x, chroma: -x.chroma } : x;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1185,"value":"traj = new ColorTrajectory([\n { luminance: 90, chroma: 0 },\n { luminance: 87, chroma: 6.5 },\n { luminance: 75, chroma: 13 },\n { luminance: 45, chroma: 14.5 },\n { luminance: 30, chroma: 12 }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"Plot.plot({\n width: (200 * surface.space.scale.maxChroma100) / 30,\n aspectRatio: 1,\n grid: true,\n x: { label: \"chroma\" },\n y: { label: \"luminance\" },\n marks: [\n ...surface.plotMarks100({ negateChroma: false }),\n ...traj.plotMarks100({ negateChroma: false })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"[0, 0.5, 1].map(traj.spline)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1181,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"scaleSeqBlue.hexInterp(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"scaleSeqBlue.distance","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"scaleSeqBlue = new ColorScaleSequential(surface, traj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"Plot.plot({\n width: (200 * scaleSeqBlue.surface.space.scale.maxChroma100) / 30,\n aspectRatio: 1,\n grid: true,\n marks: scaleSeqBlue.plotMarks100()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"swatches(\n d3\n .range(0, 1, 1 / 10)\n .concat(1)\n .map(scaleSeqBlue.hexInterp)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"scaleSeqBlue.data100Points(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"scaleSeqBlue.data100(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"$3e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1172,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"surfOrange = ColorSurface.fromHue(66, { lum100: 65, dHue100: 0.9 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"scaleSeqOrange = new ColorScaleSequential(surfOrange, traj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"scaleDiv = new ColorScaleDiverging(scaleSeqOrange, scaleSeqBlue, { scale: 0.8 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1168,"value":"scaleDiv.data100Points(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"scaleDiv.colorScaleSeqA.sRgbInterp(0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"Plot.plot({\n width: 400,\n aspectRatio: 1,\n grid: true,\n marks: scaleDiv.plotMarks100()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1165,"value":"swatches(\n d3\n .range(0, 1, 1 / 10)\n .concat(1)\n .map(scaleDiv.hexInterp)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"JSON.stringify(\n d3\n .range(0, 1, 1 / 10)\n .concat(1)\n .map(scaleDiv.hexInterp)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"## Munsell renotation data\n\nThis data is provided by the [Munsell Color Science Lab](https://www.rit.edu/science/munsell-color-science-lab-educational-resources#munsell-renotation-data), but the file download does not use `https`. Thus, the renotation data is stored as an attachment to this notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"// source: http://www.rit-mcsl.org/MunsellRenotation/real.dat\n// - cannot use Observable to download from http (vs https)\nmunsellRenotation_text = FileAttachment(\"munsell-renotation.txt\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"This text does not lend itself to easy parsing, so it is wrangled into a CSV string:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"munsellRenotation_csv = munsellRenotation_text\n .split(\"\\n\")\n .map((x) => x.trim().replaceAll(/\\s+/g, \",\"))\n .join(\"\\n\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"munsellRenotation_data = d3.csvParse(munsellRenotation_csv)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"// keep this until colorUtils are complete\nmunsellRenotation_strings = munsellRenotation_data.map(munsellObjectToString)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"// Object -> String\nmunsellObjectToString = function (x) {\n return `${x.h} ${x.V}/${x.C}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"// String -> Object\nmunsellStringToObject = function (x) {\n const array = x.split(/[\\s\\/]/);\n return {\n h: array[0],\n V: +array[1],\n C: array[2] === undefined ? 0 : +array[2]\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"munsellStringToObject(\"7.5R 1/8\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"munsellObjectToString({ h: \"7.5R\", V: \"1\", C: \"8\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"These are the sRGB value of *all* the real colors, including those outside the sRGB gamut.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"munsellSRgb = munsellRenotation_strings.map((x) => munsell.munsellToRgb(x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"The renotation data does not include greys, so they are provided as a separate array of sRGB values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":451,"value":"munsellGreySRgb = [...Array(11).keys()]\n .map((x) => `N ${x}`)\n .map((x) => munsell.munsellToRgb(x))\n .map(clampRgbGamut)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"### Munsell Renotation\n\nThis an `Array` of `Objects`, where each `Object` has:\n\n- `munsell`: `Object` with elements:\n - `h`: `String`, hue\n - `V`: `Number`, value, i.e. luminance\n - `C`: `Number`, chroma\n - `string`: `String`, concatenation: `\"h V/C\"`\n- `sRgb`: `Array` of three numbers\n\nThis includes all the Munsell colors, in and out of the sRGB gamut, including the neutrals (greys).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":759,"value":"munsellGreyStrings = [...Array(11).keys()].map((x) => `N ${x}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"munsellRenotation = [...munsellGreyStrings, ...munsellRenotation_strings]\n .map((x) => {\n return {\n munsell: { ...munsellStringToObject(x), string: x },\n sRgb: _.flow([munsell.munsellToRgb])(x)\n };\n })\n .map((x) => (x.munsell.C == 0 ? { ...x, sRgb: clampRgbGamut(x.sRgb) } : x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"munsellV5C8SRgb = munsellRenotation\n .filter((x) => x.munsell.V == 5 && x.munsell.C == 8)\n .map((x) => x.sRgb)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"## Change log","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":221,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"This [library](https://github.com/privet-kitty/munsell.js) provides the Munsell colors as a color space.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"munsell = import(\"https://cdn.skypack.dev/munsell@1.0.11?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"culori = import(\"https://unpkg.com/culori@3.1.3/bundled/culori.mjs?module\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"math = import(\"https://cdn.skypack.dev/mathjs@11.8.2?\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1162,"value":"import { NaturalCubicSpline } from \"@jrus/cubic-spline\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"import { changeTable } from \"@ijlyttle/change-log\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"### Converting color-spaces","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"luv = culori.converter(\"luv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"luv({ mode: \"lrgb\", r: 0.5, g: 0.5, b: 0.5 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W41","stdlib":"1","titling":"auto"}} 33:"$32:body"