25:["$","title",null,{"children":"Converting Hex/sRGB to Display P3, the Cheap Way | Michaël Guitton | Observable"}] 49:T428,4a:T727,rgbToP3 = (() => { const fractional = ["(?:[.]0*)?", "(?:[.]\\d*)?"]; const percentage = "(?:100" + fractional[0] + "|[1-9]?\\d?" + fractional[1] + ")%"; const isRGB = new RegExp( /* rgb(R G B[ / A]) | rgba(R G B[ / A]) */ [ "^rgba?\$", /* component values: none | 0 to 255 | 0% to 100% */ ["R", "G", "B"] .map( (C) => ["(?<", C, ">"].join("") + [ "none", "(?:255" + fractional[0] + "|(?:25[0-4]|2[0-4]\\d|1\\d{1,2}|[1-9]?\\d?)" + fractional[1] + ")", percentage ].join("|") + ")" ) .join("(?:\\s*,\\s*|\\s+)"), /* alpha channel value: none | 0 to 1 | 0% to 100% */ "(?:\\s*[,\\/]\\s*", "(?" + [ "none", "(?:1" + fractional[0] + "|0?" + fractional[1] + ")", percentage ].join("|") + ")", ")?", "\$$" ].join(""), "i" ); return (rgba = "", { colorspace = "display-p3" } = {}) => { // Calculate richer P3 colors from sRGB absolute values try { const components = rgba .trim() .match(isRGB) .slice(1) .map((x, i) => ["none", ".", ".%"].includes(x) ? i < 3 ? /* R, G, or B */ 0 : /* A */ [0, NaN][+(x === "none")] : ( parseFloat(x, 10) / ((x || "").match(/%$/) ? /* percentage */ 100 : i < 3 ? /* R, G, or B */ 255 : /* A */ 1) ).toFixed(6) * 1 ); return color(components, colorspace); } catch (e) { throw Error("Argument is not a sRGB color"); } }; })()4b:[] 29:{"id":"287c57076ecb8a84","slug":null,"title":"Converting Hex/sRGB to Display P3, the Cheap Way","thumbnail":"0464a29abfb92fe2202b99ebba059e4ef5f2d91f72d9431f715121a709605d45","access_level":"public","create_time":"$D2024-07-13T11:13:14.300Z","update_time":"$D2024-07-13T14:40:16.041Z","view_time":null,"first_public_time":"$D2024-07-13T11:13:14.300Z","has_unpublished_edits":null,"fork":{"id":"031dd82e705068f8","slug":"converting-hex-srgb-to-display-p3-the-cheap-way","title":"Converting Hex/sRGB to Display P3, the Cheap Way","owner":{"id":"4c1622bb5c37477f","login":"galopin","name":"Michaël Guitton"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4c1622bb5c37477f","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/10e2fe999ac95c8686156fd07e96a686520149a4eef18a95f97795b7a7be1e29","tier":"starter_2024","bio":"Over 2 decades of experience on the Web…","followed_by_you":false,"follows_you":false},"version":55,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null,"bio":"Over three decades of experience on the Web… “Don’t wait for inspiration. It comes while one is working.” ― Henri Matisse","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"4c1622bb5c37477f","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/10e2fe999ac95c8686156fd07e96a686520149a4eef18a95f97795b7a7be1e29","tier":"starter_2024","role":"editor"},{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Converting Hex/sRGB to Display P3, the Cheap Way","cells":[{"id":33,"value":"Object.assign(md`# Converting Hex/sRGB to Display P3, the Cheap Way`, {\n style: \"text-wrap: balance;\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"Many modern displays cover 100% of the [P3 color standard](https://webkit.org/blog/6682/improving-color-on-the-web/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"[Display P3][WEBKIT] color space includes [vivid colors][DARNES] that aren’t available in sRGB.\n\n[DARNES]: https://darn.es/using-display-p3-colour/\n[WEBKIT]: https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"There are many ways to describe the `RGB` components of a color.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"{\n const [color, name] = [\"#add8e6\", \"light blue\"];\n const fromHex = (color) =>\n color\n .slice(1)\n .match(/.{2}/g)\n .map((x, i) => (i < 3 ? \"\" : \" / \") + parseInt(x, 16))\n .join(\" \");\n\n yield md`In CSS, they can be represented as:\n\n* a single 24-bit integer in hexadecimal notation \n(e.g. \\`${color}\\` is ${Object.assign(html`${name}`, {\n style:\n \"border-radius: .5ch; padding-inline: .5ch; background-color: \" +\n (hasP3 ? hexToP3(color) : color)\n })}), \n\n* three separate numbers ranging from:\n \n - \\`0\\` to \\`255\\` in \\`rgb()\\` functional notation \n (e.g. \\`rgb(${fromHex(color)})\\`),\n \n - \\`0\\` to \\`1\\` in \\`color()\\` functional notation \n (e.g. \\`${hexToP3(color, {\n colorspace: \"srgb\"\n })}\\`).`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"This notebook provides two handy functions for _translating_ the `RGB` components of a sRGB color to the Display P3 color space.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"The context is the [Set Studio website][SET]. If you go there now, you’ll notice that it’s using more vibrant colors if your user agent and your output device can support the Display P3 gamut. (Display P3 is a superset of sRGB: It’s around 50% larger.)\n\n[SET]: https://set.studio/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"peek = colors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"peek","database":"$undefined"},{"id":29,"value":"colors = {\n const { items } = JSON.parse(tokens.textContent.trim());\n yield items.map(({ name, value }) =>\n Object.assign(\n {\n name\n },\n ((color) => ({\n hex: color.formatHex(),\n rgb: color + \"\",\n p3: hexToP3(value)\n }))(d3.color(value))\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"tokens","database":"$undefined"},{"id":27,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"hexToP3(\"#0f0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"rgbToP3(\"rgb(0, 255, 0)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"hexToP3(\"#0f00\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"rgbToP3(\"rgba(0, 255, 0, 0%)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"hexToP3(\"#00ff00\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"rgbToP3(\"rgba(none 255 none / none)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"hexToP3(\"#00ff00ff\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"rgbToP3(\"rgba(0, 255, 0, 100%)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"rgbToP3(\"rgba(0, 254.9, 0, 1%)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"rgbToP3(\"rgba(., 255., 0, .)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"rgbToP3(\"rgba(none 255.0 0 / .%)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"{\n /*!\n * Many thanks to Dean Jackson, Nikita Vasilyev, David Darnes, and Andy Bell! - mg\n */\n const color = \"rgb(35, 64, 88)\";\n yield md`\n\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"hasP3 = window.matchMedia(\"(color-gamut: p3)\").matches","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"color = (values = [0, 0, 0], colorspace = \"srgb\") => {\n const { 3: alpha = NaN, ...components } = values;\n return `color(${colorspace} ${Object.values(components).join(\" \")}${\n +alpha == alpha ? ` / ${alpha}` : \"\"\n })`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"hexToP3 = (hex = \"\", { colorspace = \"display-p3\" } = {}) => {\n // Calculate richer P3 colors from HEX values\n try {\n let count;\n const { 0: match } = hex.trim().match(/^#(?:[0-9a-f]{3,4}){1,2}$/i);\n switch (match.length) {\n case 5: // #RGBA\n case 4: // #RGB\n count = 1;\n break;\n case 9: // #RRGGBBAA\n case 7: // #RRGGBB\n count = 2;\n break;\n }\n const _ = (x) => (parseInt(x, 16) / 255).toFixed(6) * 1;\n const process = [(x) => _(x + x), (x) => _(x)][count - 1];\n const components = match\n .slice(1)\n .match(new RegExp(`.{${count}}`, \"g\"))\n .map(process);\n return color(components, colorspace);\n } catch (e) {\n throw Error(\"Argument is not an hexadecimal color\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"`rgb()`/`rgba()` can also be written in a legacy form in which all values are separated with commas, for example `rgb(255, 0, 0)`.\n\n${html`