2c:null 2d:["$","title",null,{"children":"sRGB color space | Jacob Rus | Observable"}] 32:T466,md` The matrix for converting from linear ${$`\langle R, G, B \rangle`} to ${$`\langle X, Y, Z \rangle`} tristimulus values [can be found](http://brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html) from the chromaticities of the three primaries, defined in the spec. ${$$`\begin{aligned} \langle x_r, y_r, z_r \rangle &= \langle 0.64, 0.33, 0.03 \rangle \\[.2em] \langle x_g, y_g, z_g \rangle &= \langle 0.30, 0.60, 0.10 \rangle \\[.2em] \langle x_b, y_b, z_b \rangle &= \langle 0.15, 0.06, 0.79 \rangle \end{aligned}`} And from the chromaticity of the ${$`D_{65}`} white point ${$$` \langle x_w, y_w, z_w \rangle = \langle 0.31271, 0.32902, 0.35827 \rangle `} In this notebook I have used forward and inverse matrices computed using the above values to double precision. There are therefore likely to be rounding differences in the 4th digit or beyond vs. implementations which use the more aggressively rounded forward and inverse matrices suggested by the sRGB spec. I prefer having \`XYZ == srgb_to_xyz(xyz_to_srgb(XYZ))\` with only very slight rounding errors. In practice it doesn’t matter much though. * * * `33:[] 30:{"id":"ce7eb4a5b4689cd5","slug":"srgb","title":"sRGB color space","thumbnail":"ed1465dd39a3363ca9beb60fb1503e08209b157da88cc5393f1116299d5f45ac","access_level":"public","create_time":"$D2019-05-02T06:29:22.322Z","update_time":"$D2021-03-27T05:35:39.724Z","view_time":null,"first_public_time":"$D2019-05-02T07:53:18.292Z","has_unpublished_edits":null,"fork":true,"stars":8,"starred":false,"owner":{"type":"team","id":"9b8a8e177a49059a","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":"starter_2024","bio":"geodetic computer"},"version":476,"publish_version":476,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddd7235babc79ce0","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":null,"bio":"geodetic computer"}],"members":[{"type":"individual","id":"ddd7235babc79ce0","login":"jrus","name":"Jacob Rus","avatar_url":"https://avatars-next.observableusercontent.com/c33dbeed76527c50e64208b0e005e0b6e54a3bef2a14ea6a823f1c7de4867662","tier":null,"role":"editor"}],"comments":[{"id":"3fac0a59c96b649b","reply_to_id":null,"content":"the Value in the Matrix is different from the values in the Amendment A1:2003 to IEC 61966-2-1:1999. (The values are also available in Wikipedia, here: https://en.wikipedia.org/wiki/SRGB#From_sRGB_to_CIE_XYZ). Is there a reason for that?","create_time":"$D2022-11-04T08:07:49.693Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"4665ff5d0463989a","login":"sushilkumarprem","name":"Sushil Kumar Prem","avatar_url":"https://avatars-next.observableusercontent.com/354392102bc5171f280bcf511377767768e4e718aaac9af71bece2673ae5fb24","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"78a9ed44d00915bb","slug":"color","title":"Color","owner":{"id":"9b8a8e177a49059a","login":"jrus","name":"Jacob Rus"}},"type":"notebook","body":{"titling":"auto","title":"sRGB color space","cells":[{"id":0,"value":"md`# sRGB color space`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"md`\nThe [sRGB][] (standard Red Green Blue) color space is an idealized model of a typical mid-1990s CRT display viewed in a relatively dim office environment. It is used in interchange formats targeting consumer printers, displays, and the internet.\n\n [sRGB]: https://en.wikipedia.org/wiki/sRGB\n\nImport this notebook like:\n\n\\`\\`\\`js\nimport {\n srgb_to_xyz, xyz_to_srgb,\n from_hex, to_hex,\n in_gamut\n} from \"@jrus/srgb\"\n\\`\\`\\`\n\n* * *\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`\n## Forward transformation\n\nGiven ${$`\\langle X, Y, Z \\rangle`} tristimulus values under standard illuminant ${$`D_{65}`}, normalized so that the luminance of the display white is ${$`Y_w = 100`}, we can multiply by a matrix to find linear components ${$`\\langle R, G, B \\rangle`} in the range ${$`[0, 1]`}. Then we can apply a “gamma function” to find the sRGB components ${$`\\langle R', G', B' \\rangle`}:\n\n${$$`\n\\begin{bmatrix} R \\\\ G \\\\ B \\end{bmatrix} =\n\\begin{bmatrix}\n 41.24 & 35.76 & 18.05 \\\\\n 21.26 & 71.52 & \\phantom{0}7.22 \\\\\n \\phantom{0}1.93 & 11.92 & 95.04\n\\end{bmatrix}^{-1}\n\\begin{bmatrix} X \\\\ Y \\\\ Z \\end{bmatrix}\n`}\n\n${$$`\n\\begin{aligned}\nR' &= \\gamma(R) = \\begin{cases}\n 12.92 R & R \\leq 0.0031308 \\\\\n 1.055 R^{1/2.4} - 0.055 & \\text{otherwise}\n \\end{cases}\n\\\\\nG' &= \\gamma(G)\n\\\\[.3em]\nB' &= \\gamma(B)\n\\end{aligned}\n`}\n\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"gamma = (x) =>\n (x > 0.0031308) * (1.055 * Math.pow(x, 0.4166666666666667) - 0.055) +\n (x <= 0.0031308) * 12.92 * x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"xyz_to_srgb = function xyz_to_srgb([X, Y, Z]) {\n return [\n gamma(+ 0.03241003232976359 *X - 0.015373989694887858*Y - 0.004986158819963629 *Z),\n gamma(- 0.009692242522025166 *X + 0.01875929983695176 *Y + 0.00041554226340084706*Z),\n gamma(+ 0.0005563941985197545*X - 0.0020401120612391 *Y + 0.010571489771875336 *Z)]; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`\n\n## Inverse transformation\n\nGiven ${$`\\langle R', G', B' \\rangle`} gamma-adjusted sRGB components in the range ${$`[0, 1]`}, we can find ${$`\\langle X, Y, Z \\rangle`} tristimulus values by first applying an inverse gamma function and then applying a matrix:\n\n\n${$$`\n\\begin{aligned}\nR &= \\gamma^{-1}(R') = \\begin{cases}\n R' / 12.92 & R' \\leq 0.04045 \\\\\n \\left((R' + 0.055)/1.055\\right)^{2.4} & \\text{otherwise}\n \\end{cases}\n\\\\\nG &= \\gamma^{-1}(G')\n\\\\[.3em]\nB &= \\gamma^{-1}(B')\n\\end{aligned}\n`}\n\n${$$`\n\\begin{bmatrix} X \\\\ Y \\\\ Z \\end{bmatrix} =\n\\begin{bmatrix}\n 41.24 & 35.76 & 18.05 \\\\\n 21.26 & 71.52 & \\phantom{0}7.22 \\\\\n \\phantom{0}1.93 & 11.92 & 95.04\n\\end{bmatrix}\n\\begin{bmatrix} R \\\\ G \\\\ B \\end{bmatrix}\n`}\n\n\n`\n\n// \\phantom{-}0.032406 & - 0.015372 & - 0.004986 \\\\\n// - 0.009689 & \\phantom{-}0.018758 & \\phantom{-}0.000415 \\\\\n// \\phantom{-}0.000557 & - 0.002040 & \\phantom{-}0.010570\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"gamma_inverse = (x) =>\n (x > 0.04045) * Math.pow((x + 0.055) * 0.9478672985781991, 2.4) +\n (x <= 0.04045) * 0.07739938080495357 * x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"srgb_to_xyz = function rgb_to_xyz([R, G, B]) {\n R = gamma_inverse(R), G = gamma_inverse(G), B = gamma_inverse(B);\n return [\n 41.23865632529916 *R + 35.75914909206253 *G + 18.045049120356364*B,\n 21.26368216773238 *R + 71.51829818412506 *G + 7.218019648142546*B,\n 1.9330620152483982*R + 11.919716364020843*G + 95.03725870054352 *B]; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`\n## Miscellany\n\nFunctions for transforming to/from linear RGB:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"xyz_to_rgb709 = function xyz_to_rgb709([X, Y, Z]) {\n return [\n + 0.03241003232976359 *X - 0.015373989694887858*Y - 0.004986158819963629 *Z,\n - 0.009692242522025166 *X + 0.01875929983695176 *Y + 0.00041554226340084706*Z,\n + 0.0005563941985197545*X - 0.0020401120612391 *Y + 0.010571489771875336 *Z]; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"rgb709_to_xyz = function rgb709_to_xyz([R, G, B]) {\n return [\n 41.23865632529916 *R + 35.75914909206253 *G + 18.045049120356364*B,\n 21.26368216773238 *R + 71.51829818412506 *G + 7.218019648142546*B,\n 1.9330620152483982*R + 11.919716364020843*G + 95.03725870054352 *B]; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"md`Test if given ${$`\\langle X, Y, Z \\rangle`} values are in the sRGB gamut:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"in_gamut = function in_gamut([X, Y, Z]) {\n const\n R = + 0.03241003232976359 *X - 0.015373989694887858*Y - 0.004986158819963629 *Z,\n G = - 0.009692242522025166 *X + 0.01875929983695176 *Y + 0.00041554226340084706*Z,\n B = + 0.0005563941985197545*X - 0.0020401120612391 *Y + 0.010571489771875336 *Z;\n return !!(R<=1 & R>=0 & G<=1 & G>=0 & B<=1 & B>=0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`Convert arrays of numbers to/from hexadecimal strings:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"to_hex = function to_hex([R, G, B]) {\n R = Math.round(0xff * R), G = Math.round(0xff * G), B = Math.round(0xff * B);\n if (Math.max(R, G, B) > 255 || Math.min(R, G, B) < 0) {\n throw new Error('Bad Input: R, G, and B must be in range [0, 1]'); }\n return '#' + (1 << 24 | R << 16 | G << 8 | B).toString(16).slice(1);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"int8_to_hex = function int8_to_hex([R, G, B]) {\n R = Math.round(R), G = Math.round(G), B = Math.round(B);\n if (Math.max(R, G, B) > 255 || Math.min(R, G, B) < 0) {\n throw new Error('Bad Input: R, G, and B must be in range [0, 255]'); }\n return '#' + (1 << 24 | R << 16 | G << 8 | B).toString(16).slice(1);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"from_hex = function from_hex(hex) {\n if (!/^#?[0-9a-fA-F]{6}$/.test(hex)) {\n throw new Error('Bad Input: Must be of form \"666FAD\" or \"#DEFACE\"'); }\n const RGB = parseInt(hex.substr(-6), 16);\n return [\n (RGB >> 16) / 0xff, // first byte -> R\n (RGB >> 8 & 0xff) / 0xff, // second byte -> G\n (RGB & 0xff) / 0xff]; // third byte -> B\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"int8_from_hex = function from_hex(hex) {\n if (!/^#?[0-9a-fA-F]{6}$/.test(hex)) {\n throw new Error('Bad Input: Must be of form \"666FAD\" or \"#DEFACE\"'); }\n const RGB = parseInt(hex.substr(-6), 16);\n return [\n (RGB >> 16), // first byte -> R\n (RGB >> 8 & 0xff), // second byte -> G\n (RGB & 0xff)]; // third byte -> B\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md`Chromaticities and white point:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"chromaticities = ({\n r: [0.64, 0.33, 0.03],\n g: [0.30, 0.60, 0.10],\n b: [0.15, 0.06, 0.79]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"XYZ_D65 = [0.31271, 0.32902, 0.35827].map(X=> X/0.32902*100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"import {math_css, $, $$} with {$css as $css} from \"@jrus/misc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$$css = html`${math_css}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"