30:T5ed,function ramp(name) { let canvas; let colors; let dark; if (d3[`scheme${name}`] && d3[`scheme${name}`][n]) { colors = d3[`scheme${name}`][n]; dark = d3.lab(colors[0]).l < 50; } else { const interpolate = d3[`interpolate${name}`]; colors = []; dark = d3.lab(interpolate(0)).l < 50; for (let i = 0; i < n; ++i) { colors.push(d3.rgb(interpolate(i / (n - 1))).hex()); } } if (n < 128) { canvas = htl.svg`

Color Schemes

D3 › Gallery

\n\n# Color Schemes\n## Including Every ColorBrewer Scale\n\nClick any [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic) scheme below to copy it to the clipboard.","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"viewof n = Inputs.select(new Map([\n [\"continuous\", 256],\n ...d3.range(11, 2, -1).map(n => [`discrete (${n})`, n])\n]), {label: \"Scheme size\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"sequential = md`## Sequential (Single-Hue)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"Blues = ramp(\"Blues\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"Greens = ramp(\"Greens\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"Greys = ramp(\"Greys\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"Oranges = ramp(\"Oranges\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"Purples = ramp(\"Purples\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"Reds = ramp(\"Reds\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"md`## Sequential (Multi-Hue)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"BuGn = ramp(\"BuGn\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"BuPu = ramp(\"BuPu\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"GnBu = ramp(\"GnBu\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"OrRd = ramp(\"OrRd\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"PuBuGn = ramp(\"PuBuGn\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"PuBu = ramp(\"PuBu\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"PuRd = ramp(\"PuRd\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"RdPu = ramp(\"RdPu\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"YlGnBu = ramp(\"YlGnBu\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"YlGn = ramp(\"YlGn\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"YlOrBr = ramp(\"YlOrBr\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"YlOrRd = ramp(\"YlOrRd\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"Cividis = ramp(\"Cividis\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"Viridis = ramp(\"Viridis\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"Inferno = ramp(\"Inferno\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"Magma = ramp(\"Magma\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"Plasma = ramp(\"Plasma\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"Warm = ramp(\"Warm\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"Cool = ramp(\"Cool\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"CubehelixDefault = ramp(\"CubehelixDefault\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"Turbo = ramp(\"Turbo\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"diverging = md`## Diverging`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"BrBG = ramp(\"BrBG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"PRGn = ramp(\"PRGn\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"PiYG = ramp(\"PiYG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"PuOr = ramp(\"PuOr\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"RdBu = ramp(\"RdBu\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"RdGy = ramp(\"RdGy\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"RdYlBu = ramp(\"RdYlBu\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"RdYlGn = ramp(\"RdYlGn\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"Spectral = ramp(\"Spectral\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"cyclical = md`## Cyclical`","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"Rainbow = ramp(\"Rainbow\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"Sinebow = ramp(\"Sinebow\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`## Categorical`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"Observable10 = swatches(\"Observable10\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"Category10 = swatches(\"Category10\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"Accent = swatches(\"Accent\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"Dark2 = swatches(\"Dark2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"Paired = swatches(\"Paired\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"Pastel1 = swatches(\"Pastel1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"Pastel2 = swatches(\"Pastel2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"Set1 = swatches(\"Set1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"Set2 = swatches(\"Set2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"Set3 = swatches(\"Set3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"Tableau10 = swatches(\"Tableau10\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"function swatches(name) {\n const colors = d3[`scheme${name}`];\n const n = colors.length;\n const dark = d3.lab(colors[0]).l < 50;;\n const canvas = svg`