2a:null 2b:["$","title",null,{"children":"Pleasant Colors | Adam Krawitz | Observable"}] 30:[] 2e:{"id":"85754a359a5585bc","slug":"pleasant-colors","title":"Pleasant Colors","thumbnail":"4d5a53387677c30e7d1073ebbf57f4b03638b5d3f5b3bbdafd4a4d84dcfa98eb","access_level":"public","create_time":"$D2021-03-09T04:33:10.151Z","update_time":"$D2023-07-21T19:47:41.786Z","view_time":null,"first_public_time":"$D2021-03-09T05:50:59.447Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/232e39a655b3dffeaad79a6e590471290f026876224f3f7c9825f12c3f0147bc","tier":"starter_2024"},"version":278,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f056c267619fba67","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/8b0aba291db32e92917b2b37e94c3c5568c23f50e1e769e8f76508b16293220c","tier":null}],"members":[{"type":"individual","id":"f056c267619fba67","login":"akrawitz","name":"Adam Krawitz","avatar_url":"https://avatars-next.observableusercontent.com/8b0aba291db32e92917b2b37e94c3c5568c23f50e1e769e8f76508b16293220c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"bb4f3dd51b3bc8ff","slug":"shared-resources","title":"Shared Resources","owner":{"id":"3861495db0d6917b","login":"akrawitz","name":"Adam Krawitz"}},"type":"notebook","body":{"titling":"auto","title":"Pleasant Colors","cells":[{"id":0,"value":"# Pleasant Colors\nThe colors object provides a set of named colors as [`d3.hcl`](https://github.com/d3/d3-color#lch) objects for a consistent color scheme. You can easily generate variations on them using the [d3-color](https://github.com/d3/d3-color) API in the perceptually uniform [CIELCh_ab](https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_model) color space.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"To use the colors object you need to `import` the object from this notebook:\n~~~js\n import {colors} from '@akrawitz/pleasant-colors'\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"This simple demo shows how to iterate over colors, although they are typically used by name:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"

\n ${Object.entries(colors).map(([name, color], index) => {\n return htl.html`\n

${name}

\n `\n })}\n

color.red

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"To use a brighter or darker version of a color (where _brighter_ and _darker_ are defined in the perceptually uniform [CIELCh_ab](https://en.wikipedia.org/wiki/CIELAB_color_space#Cylindrical_model) color space):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"

color.blue.darker(0.5)

color.blue

color.blue.brighter(0.5)

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"## Definitions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"colors = ({\n blue: d3.hcl(d3.schemeTableau10[0]),\n orange: d3.hcl(d3.schemeTableau10[1]),\n red: d3.hcl(d3.schemeTableau10[2]),\n cyan: d3.hcl(d3.schemeTableau10[3]),\n green: d3.hcl(d3.schemeTableau10[4]),\n yellow: d3.hcl(d3.schemeTableau10[5]),\n purple: d3.hcl(d3.schemeTableau10[6]),\n pink: d3.hcl(d3.schemeTableau10[7]),\n brown: d3.hcl(d3.schemeTableau10[8]),\n gray: d3.hcl(d3.schemeTableau10[9]),\n white: d3.hcl(NaN, 0, 100), // See https://observablehq.com/@d3/achromatic-interpolation\n black: d3.hcl('black'),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"## Resources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Load [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic), \"this module provides sequential, diverging and categorical color schemes\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3-scale-chromatic', 'd3-color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"