42:null 43:["$","title",null,{"children":"Palette de couleurs site web | Marc Thevenin | Observable"}] 49:T457,function cielabScatter(palette, { darkMode = false } = {}) { let labPalette = palette.map((c,i)=>({...d3.lab(c), i, color: c, ...({})})); return Plot.plot({ width: size, height: size, style: { fontSize: 12 }, marks: [ Plot.frame({rx: size / 2, ry: size / 2, opacity: 0.2}), Plot.gridX({ticks: 3, opacity: 0.2}), Plot.gridY({ticks: 3, opacity: 0.2}), Plot.ruleX([0], {opacity: 0.25}), Plot.ruleY([0], {opacity: 0.25}), Plot.dot(labPalette, { x: "a", y: "b", r: 5, fill: { value: (d) => d.color, label: "Color" }, channels: { L: { value: "l", label: "L*" } }, tip: { format: { fill: (d,i) => `${d} (${i})` }, fill: darkMode ? "#202020" : "white" } }), ], x: { domain: [-80, 80], ticks: 3, tickSize: 0, labelArrow: null, labelAnchor: "center", label: "a*" }, y: { domain: [-80, 80], ticks: 3, tickSize: 0, labelArrow: null, labelAnchor: "center", label: "b*" } }); }4a:T4a3,4b:[{"id":"8ed6e6bf225643f48bd9ac038ee574f9c67c7da9f9e572cee450acf7fbbd401fa7027949218887ee460ee1028bbc321d3a5f87a4b324b99777972afe0d71ba7a","href":"https://static.observableusercontent.com/files/8ed6e6bf225643f48bd9ac038ee574f9c67c7da9f9e572cee450acf7fbbd401fa7027949218887ee460ee1028bbc321d3a5f87a4b324b99777972afe0d71ba7a","name":"red-blind.png","type":"image/png","lastModified":1740743186654.909,"size":232557},{"id":"019890cd906d58408c0d7b28d7f982f8decc206e19c6147ad294edebbec555a646be9e52f796643dde48c87a70ad492225cc26e3d21a3fe06b92771896292bbb","href":"https://static.observableusercontent.com/files/019890cd906d58408c0d7b28d7f982f8decc206e19c6147ad294edebbec555a646be9e52f796643dde48c87a70ad492225cc26e3d21a3fe06b92771896292bbb","name":"couleurs_data_Ined (2).jpg","type":"image/jpeg","lastModified":1740743763504.294,"size":207547}] 47:{"id":"70760e96bcd6da20","slug":null,"title":"Palette de couleurs site web","thumbnail":"0fce43f57fb5a22e2daccec60e005931c4a07e918bd396dd259bdb9db2bf2e42","access_level":"public","create_time":"$D2024-08-18T14:18:38.217Z","update_time":"$D2025-06-27T16:06:09.148Z","view_time":null,"first_public_time":"$D2024-08-18T14:18:38.217Z","has_unpublished_edits":null,"fork":{"id":"6317e3d5afd95adc","slug":"categorical-palette-tool","title":"Categorical color scheme test tool","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":"pro_2026","bio":"Statistical Engineer at the french National Institute for Demographic Studies (INED)","following":false},"version":483,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":null,"bio":"Statistical Engineer at the french National Institute for Demographic Studies (INED)","following":false}],"members":[{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":"pro_2026","role":"editor"},{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Palette de couleurs site web","cells":[{"id":0,"value":"# Palette de couleurs site web","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"## Palette \n\n* Dernière proposition de palette de couleurs avec un jaune (28-02)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":397,"value":"### Custom (100%)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#0042eb\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#4f4f4f\", //gray\n]","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"displayPalette(pal100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"displayPalette(pal100, {darkMode: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"## Dark 10%","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"palDark10 = [\n \"#ff362d\", //rouge\n \"#cc618b\", //rose\n \"#401d5d\", //mauve\n \"#0036bc\", //bleu\n \"#44ce90\", //vert\n \"#e6a527\", //jaune \n \"#000000\", //noir\n \n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"displayPalette(palDark10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"displayPalette(palDark10, {darkMode: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"### Light 60","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":400,"value":"palLight60 = [\n \"#ff9a96\", //rouge\n \"#ffb0cf\", //rose\n \"#987cac\", //mauve\n \"#678ef3\", //bleu\n \"#9ee5c5\", //vert\n \"#ffe597\", //jaune plus clair au pif\n \"#8a8a8a\", //noir\n \n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"displayPalette(palLight60)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"displayPalette(palLight60, {darkMode: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"### Light30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":435,"value":"palLight30 = [\n \"#ffccc9\", //rouge\n \"#ffd7e7\", //rose\n \"#ccbed5\", //mauve\n \"#b1c7f9\", //bleu\n \"#cdf2e1\", //vert\n \"#ffe8be\", //jaune \n \"#ededed\", //noir\n \n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"displayPalette(palLight30)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"displayPalette(palLight30, {darkMode: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"### Red-Blind test (dernière version)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":466,"value":"couleurs_data_ined2 = FileAttachment(\"couleurs_data_Ined (2).jpg\").image({width: 600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"Avec protanopia","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"redBlind = FileAttachment(\"red-blind.png\").image({width: 600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"--- \n\n## Appendix: Drawing functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"function displayPalette(palette, { darkMode = false } = {}) {\n return htl.html`\n \n

${paletteDots(palette, { darkMode: darkMode })}

${cielabScatter(palette, { darkMode: darkMode })}

${lightnessSpectrum(palette, { darkMode: darkMode })}

${ palette.map((c) => htl.html`

${ c }

`) }

${swatches(palette)}

${ palette.map((c) => htl.html`

${shapePreview(c)}

`) }

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"paletteDots = function(palette, { darkMode = false } = {}) { \n return Plot.plot( {\n marks: [\n Plot.dot(palette, {\n x: (d,i) => i * 40,\n r: 16,\n fill: { value: (d) => d, label: \"Color\" },\n tip: { \n format: { x: false },\n fill: darkMode ? \"#202020\" : \"white\" \n }\n }),\n Plot.text(palette.map((d,i) => i), {\n x: (d) => d * 40,\n dx: 18,\n dy: 16,\n opacity: 0.8\n }),\n ],\n x: { domain: [ 0, 320 ], ticks: 0 },\n height: 48,\n width: (palette.length) * 40,\n marginTop: 16,\n style: { fontSize: 12, overflow: \"visible\" }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"function lightnessSpectrum(palette, { darkMode = false } = {}) {\n let labPalette = palette.map((c,i)=>({...d3.lab(c), i, color: c, ...({})}));\n\n return Plot.plot({\n height: size,\n width: 70,\n style: { fontSize: 12, overflow: \"visible\" }, // let the tip overflow the rect of the plot\n marks: [\n Plot.tickY( labPalette, {\n y: (d) => d.l,\n stroke: { value: (d) => d.color, label: \"Color\" },\n strokeWidth: 3,\n tip: {\n anchor: \"right\",\n frameAnchor: \"left\",\n format: { \n fontSize: 12, \n stroke: (d,i) => `${d} (${i})`,\n a: true, b: true \n },\n fill: darkMode ? \"#202020\" : \"white\"\n },\n channels: {\n a: { value: \"a\", label: \"a*\" },\n b: { value: \"b\", label: \"b*\" }\n },\n })\n ],\n y: { \n domain: [30, 100], \n grid: true, \n tickSize: 0, \n labelAnchor: \"center\",\n label: \"L*\",\n labelArrow: false\n }, \n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"function swatches(palette) {\n return Plot.plot({\n height: size,\n width: 50,\n x: {ticks: 0},\n margin: 0,\n marks: [\n Plot.barX(\n palette, {\n y: (d,i) => i,\n fill: (d) => d,\n inset: -1\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":13,"value":"shapePreview = (c) => htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"size = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$4a","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 48:"$47:body"