ggsvelte
GitHub
Navigate

Palettes

Color palettes

Categorical schemes color discrete series. Sequential ramps encode continuous fill. Chart themes style paper and chrome separately — see Themes.

Scheme names as scale inputs: Palettes reference. How to set a palette on a plot: Scale reference (e.g. ScaleColorDiscrete, ScaleColorContinuous). Narrative guide: Scales and guides.

Categorical

Palettes

  1. Observable 10

    10 colors

  2. Ipsum

    9 colors

  3. Flexoki

    8 colors

  4. Tableau 10

    10 colors

  5. Colorblind

    8 colors

  6. Stata

    15 colors

  7. Stata S1 Color

    15 colors

  8. Stata S1R Color

    15 colors

  9. Stata Mono

    15 colors

  10. Economist

    9 colors

  11. Solarized

    8 colors

  12. Few

    8 colors

  13. Few Light

    8 colors

  14. Few Dark

    8 colors

  15. FiveThirtyEight

    3 colors

  16. Paul Tol

    12 colors

  17. Canva

    4 colors

  18. WSJ

    6 colors

  19. WSJ R/G/B/Y

    4 colors

  20. WSJ Red/Green

    2 colors

  21. WSJ Black/Green

    4 colors

  22. WSJ Dem/Rep

    3 colors

  23. Tableau 20

    20 colors

  24. Tableau Color Blind

    10 colors

  25. Seattle Grays

    5 colors

  26. Traffic

    9 colors

  27. Miller Stone

    11 colors

  28. Superfishel Stone

    10 colors

  29. Nuriel Stone

    9 colors

  30. Jewel Bright

    9 colors

  31. Summer

    8 colors

  32. Winter

    10 colors

  33. Green/Orange/Teal

    12 colors

  34. Red/Blue/Brown

    12 colors

  35. Purple/Pink/Gray

    12 colors

  36. Hue Circle

    19 colors

  37. Google Docs

    24 colors

  38. Highcharts

    10 colors

  39. Highcharts Dark

    11 colors

  40. Pander

    8 colors

  41. Calc

    12 colors

  42. Excel

    7 colors

  43. Excel Fill

    7 colors

  44. Excel New

    6 colors

  45. Set1

    9 colors

  46. Set2

    8 colors

  47. Set3

    12 colors

  48. Dark2

    8 colors

  49. Paired

    12 colors

  50. Accent

    8 colors

  51. Hue

    10 colors

  52. Grey

    10 colors

Sequential

Ramps

Continuous fill on a Macdonell man-count grid. Reverse, custom range, and pinned domain should read clearly on the colorbar — not only on a few cells.

  1. Viridis

  2. Reversed

  3. Custom range

  4. Pinned domain

Authoring fragment

<script lang="ts">
  import { GeomRaster, GGPlot, Labs, Scale } from "@ggsvelte/svelte";

  // Macdonell man-count grid (48 cells in the live demos).
  const grid = [
    { x: 0, y: 0, z: 12 },
    { x: 1, y: 0, z: 28 },
    { x: 2, y: 0, z: 41 },
    // …
  ];
</script>

<GGPlot
  data={grid}
  aes={{ x: "x", y: "y", fill: "z" }}
  height={400}
>
  <Scale
    value={{
      fill: { type: "sequential", scheme: "viridis" },
      // reverse: true
      // domain: [15, 40]  // pin inside actual man counts
      // range: ["#2d1e2f", "#3d5a80", "#e76f51"]
    }}
  />
  <Labs title="Macdonell stature × finger counts" x="Finger index" y="Height index" />
  <GeomRaster />
</GGPlot>