31:T65d,## Ok Lightness-Chroma-Hue To specify colours precisely, rather than use `rgb()` or `hsl()`, there are significant advantages in using the more recent [oklch()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) specification. It has the following form (note the lack of commas): - **oklch(_lightness_ _chroma_ _hue_ _[/opacity]_)** For example:

█ `oklch(0.7 0.25 38)` █ `oklch(0.7 0.3 146)` █ `oklch(0.66 0.15 202)` █ `oklch(0.7 0.25 38 /0.3)` █ `oklch(0.7 0.3 146 /0.3)` █ `oklch(0.66 0.15 202 /0.3)`

Should it make code clearer, the same colours can be specified with units provided:

█ `oklch(70% 0.25 38deg)` █ `oklch(70% 0.3 146deg)` █ `oklch(66% 0.15 202deg)` █ `oklch(70% 0.25 38deg /30%)` █ `oklch(70% 0.3 146deg /30%)` █ `oklch(66% 0.15 202deg /30%)`

32:T8a6,{ const maxChroma = lcSpace.show.includes("visible") ? 1.8 : 0.47; const data = d3.range(0, 1, 0.005).flatMap((lightness) => d3.range(0, maxChroma, 0.002).map((chroma) => ({ lightness, chroma, gamut: inGamut(lightness, chroma, lcSpace.h) })) ); return Plot.plot({ width: 640, height: 400, y: { domain: [0, maxChroma] }, marks: [ lcSpace.show.includes("visible") ? Plot.dot( data.filter((d) => !d.gamut[0] && !d.gamut[1] && d.gamut[3]), // All out of gamut visible light { x: "lightness", y: "chroma", fill: "#eee" } ) : [], lcSpace.show.includes("Rec2020") ? Plot.dot( data.filter((d) => !d.gamut[0] && !d.gamut[1] && d.gamut[2]), // Rec2020 only { x: "lightness", y: "chroma", fill: "#ccc" } ) : [], Plot.dot( data.filter((d) => !d.gamut[0] && d.gamut[1]), // P3-only colours { x: "lightness", y: "chroma", fill: (d) => lcSpace.show.includes("P3") ? `oklch(${d.lightness} ${d.chroma} ${lcSpace.h})` : "#aaa" } ), Plot.dot( data.filter((d) => d.gamut[0]), // sRGB colours { x: "lightness", y: "chroma", fill: (d) => `oklch(${d.lightness} ${d.chroma} ${lcSpace.h})` } ), Plot.tip( data, Plot.pointer({ x: "lightness", y: "chroma", title: (d) => d.gamut[0] ? `sRGB: lightness: ${d.lightness.toFixed( 3 )}, chroma:${d.chroma.toFixed(3)}` : d.gamut[1] ? `P3: lightness: ${d.lightness.toFixed( 3 )}, chroma:${d.chroma.toFixed(3)}` : d.gamut[2] ? `Rec2020: lightness: ${d.lightness.toFixed( 3 )}, chroma:${d.chroma.toFixed(3)}` : d.gamut[3] ? `Visible: lightness: ${d.lightness.toFixed( 3 )}, chroma:${d.chroma.toFixed(3)}` : `Out of gamut` }) ) ] }); }33:T7a4,{ const maxChroma = hcSpace.show.includes("visible") ? 1.8 : 0.47; const data = d3.range(0, 360, 2).flatMap((hue) => d3.range(0, maxChroma, 0.005).map((chroma) => ({ hue, chroma, gamut: inGamut(hcSpace.l, chroma, hue) })) ); return Plot.plot({ width: 640, height: 300, x: { ticks: d3.range(0, 361, 30) }, y: { domain: [0, maxChroma] }, marks: [ hcSpace.show.includes("visible") ? Plot.dot( data.filter((d) => !d.gamut[0] && !d.gamut[1] && d.gamut[3]), // All out of gamut visible light { x: "hue", y: "chroma", fill: "#eee" } ) : [], hcSpace.show.includes("Rec2020") ? Plot.dot( data.filter((d) => !d.gamut[0] && !d.gamut[1] && d.gamut[2]), // Rec2020 only { x: "hue", y: "chroma", fill: "#ccc" } ) : [], Plot.dot( data.filter((d) => !d.gamut[0] && d.gamut[1]), // P3-only colours { x: "hue", y: "chroma", fill: (d) => hcSpace.show.includes("P3") ? `oklch(${hcSpace.l} ${d.chroma} ${d.hue})` : "#aaa" } ), Plot.dot( data.filter((d) => d.gamut[0]), // sRGB colours { x: "hue", y: "chroma", fill: (d) => `oklch(${hcSpace.l} ${d.chroma} ${d.hue})` } ), Plot.tip( data, Plot.pointer({ x: "hue", y: "chroma", title: (d) => d.gamut[0] ? `sRGB: hue: ${d.hue}, chroma:${d.chroma.toFixed(3)}` : d.gamut[1] ? `P3: hue: ${d.hue}, chroma:${d.chroma.toFixed(3)}` : d.gamut[2] ? `Rec2020: hue: ${d.hue}, chroma:${d.chroma.toFixed(3)}` : d.gamut[3] ? `Visible: hue: ${d.hue}, chroma:${d.chroma.toFixed(3)}` : `Out of gamut` }) ) ] }); }34:T798,{ const data = d3.range(0, 360, 2).flatMap((hue) => d3.range(0, 1, 0.01).map((lightness) => ({ hue, lightness, gamut: inGamut(lightness, hlSpace.c, hue) })) ); return Plot.plot({ width: 640, height: 300, x: { domain: [0, 360], ticks: d3.range(0, 361, 30) }, y: { domain: [0, 1] }, marks: [ hlSpace.show.includes("visible") ? Plot.dot( data.filter((d) => !d.gamut[0] && !d.gamut[1] && d.gamut[3]), // All out of gamut visible light { x: "hue", y: "lightness", fill: "#eee" } ) : [], hlSpace.show.includes("Rec2020") ? Plot.dot( data.filter((d) => !d.gamut[0] && !d.gamut[1] && d.gamut[2]), // Rec2020 only { x: "hue", y: "lightness", fill: "#ccc" } ) : [], Plot.dot( data.filter((d) => !d.gamut[0] && d.gamut[1]), // P3-only colours { x: "hue", y: "lightness", fill: (d) => hlSpace.show.includes("P3") ? `oklch(${d.lightness} ${hlSpace.c} ${d.hue})` : "#aaa" } ), Plot.dot( data.filter((d) => d.gamut[0]), // sRGB colours { x: "hue", y: "lightness", fill: (d) => `oklch(${d.lightness} ${hlSpace.c} ${d.hue})` } ), Plot.tip( data, Plot.pointer({ x: "hue", y: "lightness", title: (d) => d.gamut[0] ? `sRGB: hue: ${d.hue}, lightness:${d.lightness.toFixed(3)}` : d.gamut[1] ? `P3: hue: ${d.hue}, lightness:${d.lightness.toFixed(3)}` : d.gamut[2] ? `Rec2020: hue: ${d.hue}, lightness:${d.lightness.toFixed(3)}` : d.gamut[3] ? `Visible: hue: ${d.hue}, lightness:${d.lightness.toFixed(3)}` : `Out of gamut` }) ) ] }); }35:T537,## Limitations While I am convinced that `oklch` and `P3` display offer significant improvements in the way we can specify colours, we should be aware of some limitations that might impact deployment in practice. - `oklch` is not a perfect perceptually-uniform colour space. Indeed it would be impossible to create such a space that is applicable to all viewer lighting conditions and colour vision capability. It offers an improvement over previous approaches, but has its limitations, especially for darker shades. - By default Canvas uses `sRGB` as its colour space so will not give you access to the extended P3 colours. The P3 space needs to be set explicitly. The function `createContext()` in this page's appendix does this. - Observable Plot's [raster mark](https://observablehq.com/plot/marks/raster) currently does not use the P3 display gamut or CSS-4 colour specifications (it uses a [serialized canvas image under the hood](https://github.com/observablehq/plot/issues/2138)) so most of what I've discussed here cannot be applied to rasters (but can to all other Plot marks) - d3's extensive colour support, such as its [colour interpolators](https://d3js.org/d3-interpolate/color) doesn't cover `oklch`. However it is fairly easy to roll your own interpolators, such as `interpolateOklch()` included on this page.36:Tc1d,## Further Reading A list of useful references if you want a some alternative perspectives or additional detail. - Björn Ottosson (2020) [**A perceptual color space for image processing**](https://bottosson.github.io/posts/oklab/#a-perceptual-color-space-for-image-processing). The designer of the OKLab/OkLch describes his motivation and design of the colour spaces. - [**oklch()**](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) CSS documentation. - Adam Argyl (2023) [**High definition CSS color guide**](https://developer.chrome.com/docs/css-ui/high-definition-css-color-guide) has a series of useful pages on the practical aspects of using these new colour specifications and plenty more further reading. - Eric Portis (2024) [**Okay, Color Spaces**](https://ericportis.com/posts/2024/okay-color-spaces/). Discussion of perceptual colour spaces including oklch. - Chris Henrik (2024) [**Color experiments with OKLCH**](https://clhenrick.io/blog/color-experiments-with-oklch/) A nice introduction to using oklch for designing and evaluating datavis colour palettes. - Keith J. Grant (2023) [**It's time to learn oklch color**](https://keithjgrant.com/posts/2023/04/its-time-to-learn-oklch-color/) provides some nice illustrations of the benefits/improvements offered by oklch. - Andrey Sitnik (2024) [**OKLCH in CSS: why we moved from RGB and HSL**](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl) compares oklch with hsl and rgb highlighting its improvements over the old specifications. - Geoff Graham (2023) [**Falling For Oklch: A Love Story Of Color Spaces, Gamuts, And CSS**](https://www.smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css/) An explanation of colour spaces and where oklch fits in. - Max Bo (2024) [**Perceptually uniform color models and their implications**](https://observablehq.com/@mjbo/perceptually-uniform-color-models). A detailed Observable page exploring perceptual colour spaces and their implications for colour palette selection. - Ayush Bajpai (2023) [**Understanding P3 Color Profile: A Comprehensive Guide to Color Management**](https://ayussxh.medium.com/understanding-p3-color-profile-a-comprehensive-guide-to-color-management-426b7ec1e3a4). What the P3 colour profile offers that sRGB does not. - [**Rec.2020 / BT.2020**](https://en.wikipedia.org/wiki/Rec._2020) on a further expansion of the colour gamut that will be available as new display technologies become cheaper / more ubiquitous. tl;dr: There are _many more_ new colours coming our way on our displays. - [**CSS color 4**](https://www.w3.org/TR/css-color-4/). Formal specification of the CSS colour specification formats that include oklch, gamut specification and other useful colour modifiers. - [**@texel/color**](https://github.com/texel-org/color) The Observable-compatible JavaScript colour library used on this page for fast transformation between colour spaces including tests for whether a given colour is in our out of gamut. - [**oklch.com**](https://oklch.com/#70,0.1,177,100) A nice online oklch colour picker.37:T51e,function convert(clr, fmt = "oklch") { const clrObj = deserialize(clr); const toTCFmt = { rgb: TC.sRGB, hsl: TC.OKHSL, lch: TC.OKLCH, oklch: TC.OKLCH }; // Clamp an OKLCH color to be within P3 gamut. const clampGamut = ([l, c, h]) => [l, clamp(c, ...chromaRange(l, h)), h]; // Cannot parse colour spec if (typeof clrObj === "string") { return clrObj; } // Convert input colour into in-gamut formats / spaces expected by TC if (clrObj.id === "rgb") { clrObj.coords = clrObj.coords.map((d) => d / 255); } else if (clrObj.id === "hsl") { clrObj.coords = hslToOkhsl(clrObj.coords); // Needed because TC uses OKLCH } else { clrObj.coords = clampGamut(clrObj.coords); // Ensure OKLCH is in P3 gamut } switch (toTCFmt[fmt.toLowerCase()]) { case TC.OKLCH: return serialize({ id: "oklch", coords: TC.convert(clrObj.coords, toTCFmt[clrObj.id], TC.OKLCH) }); case TC.OKHSL: return serialize({ id: "hsl", coords: okhslToHsl( TC.convert(clrObj.coords, toTCFmt[clrObj.id], TC.OKHSL) ) }); case TC.sRGB: return serialize({ id: "rgb", coords: TC.convert(clrObj.coords, toTCFmt[clrObj.id], TC.sRGB).map( (d) => d * 255 ) }); } }38:[] 2f:{"title":"Hello modern colour spaces","cells":[{"id":0,"value":"# Hello modern colour spaces","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"In recent years there have been some important developments in the way colours are specified and rendered in web browsers that have implications for those designing visualization, including on Observable pages.","pinned":false,"hidden":false,"mode":"md"},{"id":1655,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":2029,"value":"Although chroma can also be expressed as a percentage, it is important to note that _its percentage value is not the same as its [0-1] value ×100_. The reason for this is explained later on in this document ('Working with chroma').","pinned":false,"hidden":false,"mode":"md"},{"id":2624,"value":"_Lightness_ refers to the perceived lightness of the colour; _chroma_, how vivid the colour is; and _hue_ the position on the visible colour spectrum. \n\nHue is mapped onto a circle and expressed as degrees, but unlike hue in the older `hsl` scheme, 'red' is around 25° rather than 0°, and the shift through the spectrum is perceived as more uniform:","pinned":false,"hidden":false,"mode":"md"},{"id":2635,"value":"gradient([`oklch(70% 0.25 0deg)`, `oklch(70% 0.25 360deg)`], { padding: 12 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2646,"value":"Plot.plot({\n width: 640,\n height: 30,\n marginLeft: 12,\n marginRight: 12,\n x: {\n domain: [0, 360],\n label: \"hue\",\n ticks: d3.range(0, 361, 30),\n tickFormat: (d) => `${d}°`\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1808,"value":"The advantages of using `oklch` over `rgb` or `hsl` include:\n- access to **new colours** not available with `rgb` or `hsl`.\n- a **perceptually uniform** colour space. This allows us to work with colour scales that are perceived to vary more consistently and simplifies their creation.\n- **[corrected problems](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl)** that exist with older colour perceptual colour spaces such as `CIELCH`.","pinned":false,"hidden":false,"mode":"md"},{"id":1811,"value":"These new colour specifications are available on Observable pages via most modern data visualization packages such as [Observable Plot](https://observablehq.com/plot/) and [Vega-Lite](https://vega.github.io/vega-lite-api/), as well as directly with SVG, Canvas and CSS/HTML. Here, for example, is how we might use it for specifying categorical colours in Observable Plot:","pinned":false,"hidden":false,"mode":"md"},{"id":1940,"value":"Plot.plot({\n width: 620,\n style: {\n backgroundColor: \"black\",\n color: \"oklch(95% 0.24 110deg\", // Can use oklch wherever CSS colours can be specified\n padding: \"10px\"\n },\n color: {\n range: [\n \"oklch(75% 0.19 224deg)\", // Provide categorical colours using oklch colour space\n \"oklch(75% 0.32 146deg)\",\n \"oklch(75% 0.34 312deg)\"\n ]\n },\n x: { label: \"Beak length (mm)\" },\n y: { label: \"Beak depth (mm)\" },\n marks: [\n Plot.linearRegressionY(penguins, {\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\",\n stroke: \"species\",\n fillOpacity: 0.3\n }),\n Plot.dot(penguins, {\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\",\n fill: \"species\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1982,"value":"

\n \n

How to pronounce 'oklch'?

\n\n[According to Björn Ottosson](https://bottosson.github.io/posts/oklab/), the designer of okLCH, the 'ok' part refers to the fact it's an OK alternative to the [CIE Lab/LCH colour spaces](https://en.wikipedia.org/wiki/CIELAB_color_space). This suggests it might be pronounced as 'oh-kay-el-se-aitch'. But that is a bit of a mouthfull, and I have heard people use the slightly easier 'oak-el-se-aitch', which I prefer. \n

\nBut special mention should go to [Eric Portis](https://front-end.social/@eeeps/109955851076325361) who suggested 'Oklachroma'. Even if this doesn't catch on, it's a useful mnemonic to remind you of the importance of 'chroma' in accessing those new super-vivid high chroma colours.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1863,"value":"## Advantage 1: New Colours","pinned":false,"hidden":false,"mode":"md"},{"id":1651,"value":"The range of possible colours that can be displayed (the 'gamut') on most modern displays is greater than just a few years ago. Traditional _rgb_ and _hsl_ specifications don't give us access to these new colours, but _oklch_ does!\n\nUnlike `rgb()` and `hsl()` specifications, `oklch()` is not constrained by the limitations of the display device when specifying a colour. This allows us to create colours that are only reproducible on sophisticated display devices, or even colours not visible to the human eye. ","pinned":false,"hidden":false,"mode":"md"},{"id":328,"value":"Most modern displays work with the [P3 colour space](https://en.wikipedia.org/wiki/DCI-P3#Display_P3) granting us new colours not available in the old [sRGB space](https://en.wikipedia.org/wiki/SRGB) but it is worth checking before you read on. Should you need to determine whether your display device displays the P3 gamut, it can be achieved with a [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries):\n\n```javascript\nwindow.matchMedia(\"(color-gamut: p3)\").matches\n```\nevaluates as `true` if your display device and browser will render with the extended P3 colour gamut, or `false` if not.","pinned":false,"hidden":false,"mode":"md"},{"id":3337,"value":"

${\n window.matchMedia(\"(color-gamut: p3)\").matches\n ? \"Good to go! This page should display the extended P3 colour gamut\"\n : \"It looks like your display does not use the enhanced P3 colour gamut\"\n }

\n\nWhile you cannot guarantee that a viewer of your pages has a modern web browser and display setup, almost all browsers should seamlessly fall back to the old _sRGB_ space without problems. But to appreciate the effects of the new colour systems on this page, a modern setup certainly helps.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"Below is a rectangle coloured using an enhanced P3 colour with some text coloured by its closest sRGB colour. If all is working, you should be able to see the text as a slightly less vivid colour than the background. If you de-select `Use P3`, the older `sRGB` without enhanced colours is used, and the background colour falls back to its closest sRGB equivalent so no longer contrasts with the text (that never changes colour).","pinned":false,"hidden":false,"mode":"md"},{"id":529,"value":"viewof perception = Inputs.form({\n hue: Inputs.radio([\"reds\", \"greens\", \"blues\", \"pinks\"], {\n label: \"Colour hue\",\n value: \"reds\"\n }),\n show: Inputs.checkbox([\"Use P3\", \"Reveal message\"], { value: [\"Use P3\"] })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"{\n const [w, h] = [640, 120];\n const ctx = createContext(w, {\n height: h,\n clrSpace: perception.show.includes(\"Use P3\") ? \"display-p3\" : \"srgb\"\n });\n\n const [bgClr, fgClr, msg] =\n perception.hue === \"reds\"\n ? [\"oklch(67% 0.271 34deg)\", \"rgb(255, 29, 0)\", \"A Study in Scarlet\"]\n : perception.hue === \"greens\"\n ? [\"oklch(67% 0.288 146deg)\", \"rgb(0,189,0)\", \"Soylent Green\"]\n : perception.hue === \"blues\"\n ? [\"oklch(67% 0.172 228deg)\", \"rgb(5,166,231)\", \"Mississippi Blues\"]\n : [\"oklch(67% 0.317 346deg)\", \"rgb(255,0,189)\", \"Pink Flamingos\"];\n\n if (!perception.show.includes(\"Reveal message\")) {\n ctx.fillStyle = bgClr;\n ctx.fillRect(0, 0, w, h);\n }\n ctx.fillStyle = fgClr;\n ctx.font = \"bold 64px sans-serif\";\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(msg, 0.5 * w, 0.5 * h);\n\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"The distinction is subtle, but should be detectable by those with typical colour vision.\n\n_A side note:_ If you can see the messages against any of the background colours they probably look slightly less vivid. But if you show them against the white background (`Reveal message`) they look more vivid even though their colours haven't changed. Taking this [simultaneous contrast effect](https://en.wikipedia.org/wiki/Contrast_effect) into account is important when considering colour choices in context.","pinned":false,"hidden":false,"mode":"md"},{"id":555,"value":"## Advantage 2: Perceptually uniform","pinned":false,"hidden":false,"mode":"md"},{"id":2755,"value":"When encoding a data value with colour we usually intend that the perception of the colour tells us something about the value it encodes. For that to work we need the colour to vary in a way that is consistent with the way the underlying data varies. ","pinned":false,"hidden":false,"mode":"md"},{"id":2757,"value":"gradient([`oklch(20% 0.2 104)`, `oklch(80% 0.2 104)`], {\n padding: 10,\n label: \"oklch\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2764,"value":"Plot.plot({\n width: 640,\n height: 30,\n marginLeft: 10,\n marginRight: 10,\n x: { domain: [0, 10] }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2798,"value":"swatches(\n [\n \"oklch(20% 0.2 104)\",\n \"oklch(30% 0.2 104)\",\n \"oklch(40% 0.2 104)\",\n \"oklch(50% 0.2 104)\",\n \"oklch(60% 0.2 104)\",\n \"oklch(70% 0.2 104)\",\n \"oklch(80% 0.2 104)\"\n ],\n { padding: 0.1 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2811,"value":"oklch is intended to be _perceptually uniform_ in that as some component of the colour changes by a fixed amount, it is perceived to have changed by a fixed amount. Thus the steps between consecutive shades of brown/yellow above should appear to differ by the same amount, regardless of which two adjacent colours are compared.","pinned":false,"hidden":false,"mode":"md"},{"id":2813,"value":"This can be contrasted with the old `hsl()` scheme where even though the 'lightness' component varies by a fixed amount between adjacent colours, they are not perceived in even steps:","pinned":false,"hidden":false,"mode":"md"},{"id":2825,"value":"gradient([`hsl(62,80%,20%)`, `hsl(62,80%,80%)`], { padding: 10, label: \"hsl\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2815,"value":"swatches(\n [\n \"hsl(62,80%,20%)\",\n \"hsl(62,80%,30%)\",\n \"hsl(62,80%,40%)\",\n \"hsl(62,80%,50%)\",\n \"hsl(62,80%,60%)\",\n \"hsl(62,80%,70%)\",\n \"hsl(62,80%,80%)\"\n ],\n { padding: 0.1 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2851,"value":"The perceptual uniformity of `oklch` applies to all components of the colour. This can be especially useful for categorical colour schemes where we wish to vary hue, but keep a consistent lightness:","pinned":false,"hidden":false,"mode":"md"},{"id":2889,"value":"gradient([`oklch(65% 0.15 20)`, `oklch(65% 0.15 320)`], {\n padding: 14,\n label: \"oklch\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2853,"value":"swatches(\n [\n \"oklch(65% 0.15 20)\",\n \"oklch(65% 0.15 80)\",\n \"oklch(65% 0.15 140)\",\n \"oklch(65% 0.15 200)\",\n \"oklch(65% 0.15 260)\",\n \"oklch(65% 0.15 320)\"\n ],\n {\n padding: 0.1\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2877,"value":"Contrast this with a fixed 'lightness' value in the `hsl` scheme. Here we can observe that lightness varies considerably between hues with yellows, greens and cyans appearing much lighter than reds and blues.","pinned":false,"hidden":false,"mode":"md"},{"id":2879,"value":"gradient([`hsl(0,50%,55%)`, `hsl(300,50%,55%)`], { padding: 14, label: \"hsl\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2865,"value":"swatches(\n [\n \"hsl(0,50%,55%)\",\n \"hsl(60,50%,55%)\",\n \"hsl(120,50%,55%)\",\n \"hsl(180,50%,55%)\",\n \"hsl(240,50%,55%)\",\n \"hsl(300,50%,55%)\"\n ],\n {\n padding: 0.1\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2925,"value":"The inconsistency in lightness is even more evident for more vivid colours. The hue-dependency of lightness in the `hsl` spectrum is one of the main reasons the [rainbow colour map is often derided](https://theconversation.com/how-rainbow-colour-maps-can-distort-data-and-be-misleading-167159) in data visualization (and the perceptually uniform `oklch` version a significant improvement).","pinned":false,"hidden":false,"mode":"md"},{"id":2626,"value":"gradient([`hsl(0,90%,60%)`, `hsl(360,90%,60%)`], { label: \"hsl\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2932,"value":"gradient([`oklch(69% 0.23 20)`, `oklch(69% 0.23 380)`], { label: \"oklch\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2919,"value":"This variation in lightness is a big problem with the `hsl` space and is largely fixed with `oklch`. Compare the two colour gradients below, both varying between minimum and maximum lightness. Try changing the hue shown and notice how the `hsl` colours jump about in lightness while the `oklch` palette remains much more consistent.","pinned":false,"hidden":false,"mode":"md"},{"id":2519,"value":"viewof lhue = Inputs.range([0, 360], { label: \"hue\", step: 1, value: 0 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2328,"value":"gradient([`oklch(0% 0.15 ${lhue})`, `oklch(100% 0.15 ${lhue})`], {\n label: \"oklch\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2417,"value":"gradient([`hsl(${340 + lhue},80%,0%)`, `hsl(${340 + lhue},80%,100%)`], {\n label: \"hsl\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2910,"value":"`Oklch` space makes it much easier to construct two-dimensional colour schemes programmatically with a high degree of perceptual uniformity. For example, we could create a 6-level categorical scheme, each with 7 levels of lightness for a usable 2d colour encoding:","pinned":false,"hidden":false,"mode":"md"},{"id":2893,"value":"{\n const data = d3\n .range(20, 321, 60)\n .flatMap((cat) => d3.range(40, 101, 9).map((val) => ({ cat, val })));\n\n return Plot.plot({\n x: { axis: null },\n y: { axis: null },\n height: 480,\n marks: [\n Plot.cell(data, {\n x: \"cat\",\n y: \"val\",\n fill: (d) =>\n `oklch(${d.val}% ${clamp(0.14, ...chromaRange(d.val / 100, d.cat))} ${\n d.cat\n })`,\n tip: true,\n title: (d) =>\n `oklch(${d.val}% ${clamp(\n 0.14,\n ...chromaRange(d.val / 100, d.cat)\n ).toFixed(2)} ${d.cat})`\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3068,"value":"It's not a perfect mapping as it is generally a little easier to distinguish the hue categories in lighter shades (bottom rows) than it is for darker shades (top row). And it would appear (at least to my eyes) that the top row green and cyan are more similar than, say the red and gold in that top row. Nevertheless, it offers a significant improvement over any other easily available spaces including perceptually uniform spaces such as [CIE Lab/LCH](https://en.wikipedia.org/wiki/CIELAB_color_space). ","pinned":false,"hidden":false,"mode":"md"},{"id":2281,"value":"## Working with chroma","pinned":false,"hidden":false,"mode":"md"},{"id":3091,"value":"Specifying the _lightness_ and _hue_ components in `oklch()` is simple. We have seen how they relate to intuitive perceptual features of colour, and the numbers themselves are bounded (between 0–100% and 0–360° respectively.)\n\nThe chroma value is a little more complex. While it has intuitive meaning (how vivid a colour appears), the scaling of the number is not so obvious. Typical values vary between 0 and 0.25, but can be higher or lower depending on the hue and lightness of the colour. Or rather for the colour to be _visible_ and within the gamut of your computer display, it can be higher or lower.","pinned":false,"hidden":false,"mode":"md"},{"id":3156,"value":"To explore this, consider the _lightness–chroma space_ for any given hue. Below, by default, only the colours displayable on an `sRGB` system are shown for a green hue. This 'slice' through colour space forms a triangle of displayable colours with many chroma values not visible, especially for lower lightnesses. P3 displays improve things somewhat (try selecting `Show P3 colours`), but even then, maximum visible chroma values range from close to 0 for darker shades, peaking at about 0.36 for a lightness of 86%. Worse still, if you change the hue slider, those visible chroma values change.","pinned":false,"hidden":false,"mode":"md"},{"id":2129,"value":"viewof lcSpace = Inputs.form({\n h: Inputs.range([0, 360], {\n label: \"hue\",\n step: 1,\n value: 144\n }),\n show: Inputs.checkbox(\n new Map([\n [\"Show P3 colours\", \"P3\"],\n [\"Rec2020\", \"Rec2020\"],\n [\"All visible light\", \"visible\"]\n ]),\n {\n format: ([name, val]) => {\n const bgClr = (v) =>\n v === \"visible\"\n ? \"#eee\"\n : v === \"Rec2020\"\n ? \"#ccc\"\n : v === \"P3\"\n ? \"#aaa\"\n : \"white\";\n return html`${name}\">${name}`;\n }\n }\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3159,"value":"Given this complexity, how are we supposed to know what chroma numbers to provide when specifying an `oklch` colour? The sort of good news is that almost all systems will allow you to give any chroma value and still show a colour:\n\n█ `oklch(70% 0.99 38deg)`\n\nAnd where precise chroma values are not required, a rule of thumb is that a value between 0–0.4 will usually give you a predictable colour. For this reason, it is possible to express chroma as a percentage, which gets linearly transformed into a number in the [0,0.4] range.","pinned":false,"hidden":false,"mode":"md"},{"id":3167,"value":"gradient([`oklch(70% 0 30deg)`, `oklch(70% 100% 30deg)`], {\n label: \"oklch\",\n padding: 12\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3170,"value":"Plot.plot({\n width: 640,\n height: 30,\n marginLeft: 12,\n marginRight: 12,\n x: {\n domain: [0, 100],\n label: \"chroma\",\n tickFormat: (d) => `${d}%`\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3178,"value":"This works because modern browsers will 'clamp' colours to their nearest in-gamut colour, even if theoretically, the colour asked for cannot be displayed by the device.\n\nThe disadvantage is that this clamping can also affect the lightness or perceptual difference between colours. So even colours with two apparently different chroma values can appear to look identical (as in the rightmost third of the red bar above which gets clamped to the same vivid red colour).","pinned":false,"hidden":false,"mode":"md"},{"id":3182,"value":"Better practice is to ensure colours are specified in-gamut, and one way of doing that is to develop a sense of how the displayable chroma range varies with hue and lightness. Below is another slice through the `oklch` space, this time showing hue and chroma and allowing lightness to be varied interactively:","pinned":false,"hidden":false,"mode":"md"},{"id":2087,"value":"viewof hcSpace = Inputs.form({\n l: Inputs.range([0, 1], {\n label: \"lightness\",\n step: 0.01,\n value: 0.7\n }),\n show: Inputs.checkbox(\n new Map([\n [\"Show P3 colours\", \"P3\"],\n [\"Rec2020\", \"Rec2020\"],\n [\"All visible light\", \"visible\"]\n ]),\n {\n value: [\"P3\"],\n format: ([name, val]) => {\n const bgClr = (v) =>\n v === \"visible\"\n ? \"#eee\"\n : v === \"Rec2020\"\n ? \"#ccc\"\n : v === \"P3\"\n ? \"#aaa\"\n : \"white\";\n return html`${name}\">${name}`;\n }\n }\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3189,"value":"Notice how modern devices have the largest chroma range in the green part of the spectrum for lighter colours and the blue part for darker colours.\n\nThe slice through the _hue–lightness space_ allowing chroma to be varied interactively shows how chroma shapes the dynamic range of displayable colours and reveals why those new 'P3 colours' tend to be around the vivid Day-Glo green, red and magenta.","pinned":false,"hidden":false,"mode":"md"},{"id":2174,"value":"viewof hlSpace = Inputs.form({\n c: Inputs.range([0, 1.2], {\n label: \"chroma\",\n step: 0.005,\n value: 0.1\n }),\n show: Inputs.checkbox(\n new Map([\n [\"Show P3 colours\", \"P3\"],\n [\"Rec2020\", \"Rec2020\"],\n [\"All visible light\", \"visible\"]\n ]),\n {\n value: [\"P3\"],\n format: ([name, val]) => {\n const bgClr = (v) =>\n v === \"visible\"\n ? \"#eee\"\n : v === \"Rec2020\"\n ? \"#ccc\"\n : v === \"P3\"\n ? \"#aaa\"\n : \"white\";\n return html`${name}\">${name}`;\n }\n }\n )\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3205,"value":"If you feel your chroma intuition has yet to develop, you can be more conservative in the maximum chroma value used, allowing for the occasional clamping of an out-of-gamut colour. This [oklch colour picker](https://oklch.com/#70,0.1,177,100) is also helpful.\n\nAlternatively, here is a function that, for any given hue and lightness, scales a chroma value from the range [0,1] to be within the in-gamut range:","pinned":false,"hidden":false,"mode":"md"},{"id":1633,"value":"function inGamutChroma(lightness, pChroma, hue) {\n const [minC, maxC] = chromaRange(lightness, hue);\n return minC + clamp(pChroma) * (maxC - minC); // Scale [0-1] to [minC,maxC]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3214,"value":"For example, \n\n```javascript\ninGamutChroma(0.7, 0.95, 240)\n```\n\nwill compute the chroma value corresponding to 95% of the maximum in-gamut chroma for a lightness of 70% and hue of 240° (which is ${inGamutChroma(0.7, 0.95, 240).toFixed(2)} on your screen).\n\nIt uses the excellent [texel-color JS package](https://github.com/texel-org/color) for performing fast in/out gamut calculations.\n\nAnd more generally, see `convert()` in the appendix to convert between different CSS colour specifications. For example\n\n```javascript\nconvert(\"rgb(255,128,64)\", \"oklch\")\n```\n\nwill convert the CSS rgb specification into an okLCH specification that generates the same colour:\n\n`${convert(\"rgb(255,128,64)\", \"oklch\")}`\n\nWhen converting from okLCH, out of gamut colours are clamped so that the chroma value produces a P3 in-gamut colour. When converting to rgb, colours are clamped to the `sRGB` gamut (therefore no P3-only colours).","pinned":false,"hidden":false,"mode":"md"},{"id":2034,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":1989,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":337,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":3200,"value":"_The [texel-color javascript package](https://github.com/texel-org/color) used for testing in/out-gamut colours and some colour conversions:_","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"TC = import(\"https://unpkg.com/@texel/color@1.1/src/index.js?module\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3242,"value":"_Create a canvas context with a P3 (or customisable) gamut:_","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"// Create a canvas context with customizable colour space\nfunction createContext(w, options = {}) {\n const { height = w, clrSpace = \"display-p3\" } = options;\n return d3\n .select(html`

`)\n .node()\n .getContext(\"2d\", { colorSpace: clrSpace });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1622,"value":"_For a given lightness and hue value, find the min and max in-gamut chroma values_. ","pinned":false,"hidden":false,"mode":"md"},{"id":1542,"value":"function chromaRange(l, hue, options = {}) {\n const { tolerance = 1e-4 } = options;\n const lightness = clamp(l);\n\n const isInP3Gamut = (l, c, h, tolerance = 1e-5) =>\n TC.isRGBInGamut(TC.convert([l, c, h], TC.OKLCH, TC.DisplayP3), tolerance);\n\n // Find maximum in-gamut chroma\n let [maxC, hi] = [0, 1];\n while (isInP3Gamut(lightness, hi, hue, tolerance)) {\n maxC = hi;\n hi *= 2;\n }\n while (hi - maxC > tolerance) {\n const mid = (maxC + hi) / 2;\n if (isInP3Gamut(lightness, mid, hue, tolerance)) {\n maxC = mid;\n } else {\n hi = mid;\n }\n }\n // Find minimum in-gamut chroma\n let [lo2, minC] = [0, 1];\n while (!isInP3Gamut(lightness, minC, hue, tolerance)) {\n minC /= 2;\n }\n while (minC - lo2 > tolerance) {\n const mid = (lo2 + minC) / 2;\n if (isInP3Gamut(lightness, mid, hue, tolerance)) {\n minC = mid;\n } else {\n lo2 = mid;\n }\n }\n return [minC, maxC];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3393,"value":"_Are the given L C H values in gamut in RGB, P3, REC2020 and XYZ colour spaces?_","pinned":false,"hidden":false,"mode":"md"},{"id":3358,"value":"function inGamut(l, c, h) {\n return [\n TC.isRGBInGamut(TC.convert([l, c, h], TC.OKLCH, TC.sRGB), 1e-7),\n TC.isRGBInGamut(TC.convert([l, c, h], TC.OKLCH, TC.DisplayP3), 1e-7),\n TC.isRGBInGamut(TC.convert([l, c, h], TC.OKLCH, TC.Rec2020), 1e-7),\n TC.isRGBInGamut(TC.convert([l, c, h], TC.OKLCH, TC.XYZ), 1e-7)\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1705,"value":"_Clamp a number between 0-1, or a user-specified range:_","pinned":false,"hidden":false,"mode":"md"},{"id":1687,"value":"function clamp(x, mn = 0, mx = 1) {\n return isFinite(x) ? Math.min(mx, Math.max(mn, x)) : 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3403,"value":"_Conversion between rgb, hsl and okLCH colour strings:_","pinned":false,"hidden":false,"mode":"md"},{"id":3405,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3408,"value":"function okhslToHsl(okhsl) {\n // The TC library uses OKHSL, not CSS's HSL colour space.\n const rgbToCssHsl = ([r, g, b]) => {\n r /= 255;\n g /= 255;\n b /= 255;\n const [max, min] = [Math.max(r, g, b), Math.min(r, g, b)];\n let [h, s, l] = [0, 0, (max + min) / 2];\n\n if (max === min) {\n h = s = 0;\n } else {\n const d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h *= 60;\n }\n return [h, s * 100, l * 100];\n };\n\n return rgbToCssHsl(TC.convert(okhsl, TC.OKHSL, TC.sRGB).map((d) => d * 255));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3411,"value":"function hslToOkhsl([h, s, l]) {\n const cssHslToRgb = (h, s, l) => {\n s /= 100;\n l /= 100;\n const c = (1 - Math.abs(2 * l - 1)) * s;\n const h2 = h / 60;\n const x = c * (1 - Math.abs((h2 % 2) - 1));\n let [r, g, b] = [0, 0, 0];\n\n if (0 <= h2 && h2 < 1) {\n [r, g, b] = [c, x, 0];\n } else if (1 <= h2 && h2 < 2) {\n [r, g, b] = [x, c, 0];\n } else if (2 <= h2 && h2 < 3) {\n [r, g, b] = [0, c, x];\n } else if (3 <= h2 && h2 < 4) {\n [r, g, b] = [0, x, c];\n } else if (4 <= h2 && h2 < 5) {\n [r, g, b] = [x, 0, c];\n } else if (5 <= h2 && h2 < 6) {\n [r, g, b] = [c, 0, x];\n }\n\n const m = l - c / 2;\n return [r + m, g + m, b + m];\n };\n\n return TC.convert(cssHslToRgb(h, s, l), TC.sRGB, TC.OKHSL);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3041,"value":"_Create a linear Oklch interpolator between the given list of colours:_","pinned":false,"hidden":false,"mode":"md"},{"id":3031,"value":"function interpolateOklch(clrs) {\n const deserializedColors = clrs.map(deserialize);\n const numSegments = deserializedColors.length - 1;\n\n return (t) => {\n const segmentIndex = Math.floor(t * numSegments);\n const segmentFraction = t * numSegments - segmentIndex;\n const c1 = deserializedColors[segmentIndex];\n const c2 =\n deserializedColors[segmentIndex + 1] || deserializedColors.at(-1);\n const coords = d3.interpolateArray(c1.coords, c2.coords)(segmentFraction);\n if (c1.id === \"oklch\") {\n coords[1] = clamp(coords[1], ...chromaRange(coords[0], coords[2]));\n }\n return serialize({ id: c1.id, coords: coords });\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3245,"value":"_Create discrete labelled colour swatches:_","pinned":false,"hidden":false,"mode":"md"},{"id":865,"value":"function swatches(clrs, options = {}) {\n const {\n width = 640,\n height = width / clrs.length,\n padding = 0,\n border = null\n } = options;\n return Plot.plot({\n width: width,\n height: height,\n padding: padding,\n marginLeft: 0,\n marginRight: 0,\n x: { domain: clrs, tickSize: null, label: null },\n marks: [\n Plot.cellX(\n clrs.map((d) => ({ clr: d })),\n { x: \"clr\", fill: \"clr\", stroke: border }\n )\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2706,"value":"_Create a colour gradient swatch linearly interpolated between the given colours:_","pinned":false,"hidden":false,"mode":"md"},{"id":2544,"value":"function gradient(clrs, options = {}) {\n const { w = 640, h = 40, border = null, padding = 0, label = null } = options;\n const ctx = createContext(w, { height: h, clrSpace: \"display-p3\" });\n\n // Main colour gradient interpolated between the given colours\n const interpolator = interpolateOklch(clrs);\n for (let col = 0; col < w - 2 * padding; col++) {\n const t = col / (w - 2 * padding);\n ctx.fillStyle = interpolator(t);\n ctx.fillRect(padding + col, 0, 1, h);\n }\n if (border) {\n ctx.strokeStyle = border;\n ctx.strokeRect(padding, 0, w - 2 * padding, h);\n }\n if (label) {\n ctx.fillStyle = \"grey\";\n ctx.textBaseline = \"middle\";\n ctx.font = \"12pt sans-serif\";\n ctx.fillText(label, w + 5, h / 2);\n }\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2709,"value":"_Extract the colour components from a given colour string:_","pinned":false,"hidden":false,"mode":"md"},{"id":2446,"value":"function deserialize(clr) {\n let match = clr.match(\n /oklch\$\\s*([\\d.]+)(%)?\\s+([\\d.]+)(%)?\\s+([\\d.]+)(?:deg)?\\s*\$/i\n );\n if (match) {\n const [lpc, cpc] = [match[2] === \"%\", match[4] === \"%\"]; // Are units percentages?\n const coords = [\n lpc ? Number(match[1]) / 100 : Number(match[1]),\n cpc ? Number(match[3]) / 250 : Number(match[3]), // Chroma of 100% is equivalent to 0.4\n Number(match[5])\n ];\n return { id: \"oklch\", coords };\n }\n\n match = clr.match(\n /hsl\$\\s*([\\d.]+)(deg)?[,\\s]+([\\d.]+)%[,\\s]+([\\d.]+)%\\s*\$/i\n );\n if (match) {\n const coords = [Number(match[1]), Number(match[3]), Number(match[4])];\n return { id: \"hsl\", coords };\n }\n\n match = clr.match(/rgb\$\\s*(\\d+)[,\\s]+(\\d+)[,\\s]+(\\d+)\\s*\$/i);\n if (match) {\n return {\n id: \"rgb\",\n coords: match.slice(1).map(Number)\n };\n }\n\n return \"Invalid colour string\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2712,"value":"_Convert the given colour components object to a CSS colour string:_","pinned":false,"hidden":false,"mode":"md"},{"id":2356,"value":"function serialize(clrObj) {\n const { id, coords } = clrObj;\n if (id === \"oklch\") {\n const lightness = coords[0].toFixed(3);\n const chroma = coords[1].toFixed(3);\n const hue = coords[2].toFixed(1);\n return `oklch(${lightness} ${chroma} ${hue})`;\n }\n if (id === \"hsl\") {\n const hue = coords[0];\n const saturation = coords[1].toFixed(1) + \"%\";\n const lightness = coords[2].toFixed(1) + \"%\";\n return `hsl(${hue}, ${saturation}, ${lightness})`;\n }\n if (id === \"rgb\") {\n const red = coords[0];\n const green = coords[1];\n const blue = coords[2];\n return `rgb(${red}, ${green}, ${blue})`;\n }\n\n throw new Error(`Unsupported colour model: '${id}'`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3353,"value":"_For information boxes:_","pinned":false,"hidden":false,"mode":"md"},{"id":3309,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W38","stdlib":"1","titling":"auto"}