2b:null 2c:["$","title",null,{"children":"CIELAB and HCT comparison | Máté Homolya | Observable"}] 31:[] 2f:{"id":"3c55a122fe6472db","slug":"lab-hct-comparison","title":"CIELAB and HCT comparison","thumbnail":"3e5fc683a0a8775833bd4f8f1c2393173e7c1ff37602f1ece1a7ac56359d6224","access_level":"public","create_time":"$D2023-02-28T23:07:05.545Z","update_time":"$D2023-03-01T23:39:11.609Z","view_time":null,"first_public_time":"$D2023-02-28T23:07:05.545Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":"starter_2024"},"version":166,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null}],"members":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CIELAB and HCT comparison","cells":[{"id":0,"value":"# CIELAB and HCT comparison\n\nComparing CIELAB and HCT color spaces.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":45,"value":"htl.html`\n${colors.map((v) => {\n const [L, A, B] = getLab(v);\n const [H, C, T] = getHct(v);\n const el = (s) => htl.html``;\n return htl.html`${[\n v,\n T,\n L,\n Math.abs(T - L)\n ].map(el)}`;\n})}

	Color	T	L	Error
`${s}`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"viewof color = Inputs.color({\n label: \"Input color\",\n value: \"#596ab0\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"plotData = colors.map((v, i) => {\n const [L, A, B] = getLab(v);\n const [L2] = getLab2(v);\n const [H, C, T] = getHct(v);\n return { L, A, B, H, C, T, L2 };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"The following plot shows the rounding error between `@material/material-color-utilities` T value and `color-space` L values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":85,"value":"Plot.plot({\n marginLeft: 64,\n x: {\n label: \"\",\n tickFormat: (d) => \"\"\n },\n y: {\n grid: true,\n label: \"Error\"\n },\n marks: [\n Plot.line(plotData, {\n x: (d, i) => i,\n y: (d, i) => Math.abs(d.L - d.T)\n }),\n Plot.line(plotData, {\n x: (d, i) => i,\n y: (d, i) => Math.abs(d.L2 - d.T)\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"colors = generate(color)\n .map((c) => c.toString())\n .reverse()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"tuple = (hex) => {\n const r = parseInt(hex.substring(1, 3), 16);\n const g = parseInt(hex.substring(3, 5), 16);\n const b = parseInt(hex.substring(5, 7), 16);\n return [r, g, b];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"getHct = (hex) => {\n const [r, g, b] = tuple(hex);\n const integerColor = (r << 16) + (g << 8) + b;\n const { hue, chroma, tone } = colorUtil.Hct.fromInt(integerColor);\n return [hue, chroma, tone];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"// using color-space from npm\ngetLab = (hex) => {\n const c = colorSpace.rgb.lab(tuple(hex));\n return c;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"// using custom implementation\ngetLab2 = (hex) => {\n const c = ColorRGB.fromString(hex).toLAB();\n return [c.L, c.A, c.B];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"colorUtil = import(\"https://cdn.skypack.dev/@material/material-color-utilities\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"colorSpace = (await import(\"color-space\")).default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"import { ColorRGB, ColorLAB, generate } from \"@mateh/palette\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"