ggts
Navigate

Palettes

Sequential color ramps

Sequential ramps encode continuous fill. Categorical schemes color discrete series — see Color palettes.

Scheme names as scale inputs: Palettes reference. How to set a ramp on a plot: ScaleColorContinuous. Narrative guide: Scales and guides.

  1. viridis
  2. plasma
  3. inferno
  4. cividis
  5. turbo
  6. Blues
  7. Greens
  8. Reds
  9. Oranges
  10. Purples
  11. Greys
  12. YlOrRd
  13. YlGnBu
  14. BuPu
  15. RdYlBu
  16. RdBu
  17. BrBG
  18. Spectral
  19. PuOr
  20. acton
  21. bamako
  22. batlow
  23. batlowW
  24. batlowK
  25. bilbao
  26. buda
  27. davos
  28. devon
  29. glasgow
  30. grayC
  31. hawaii
  32. imola
  33. lajolla
  34. lapaz
  35. lipari
  36. navia
  37. naviaW
  38. nuuk
  39. oslo
  40. tokyo
  41. turku
  42. bam
  43. berlin
  44. broc
  45. cork
  46. lisbon
  47. managua
  48. roma
  49. tofino
  50. vanimo
  51. vik
  52. bukavu
  53. fes
  54. oleron
  55. bamO
  56. brocO
  57. corkO
  58. romaO
  59. vikO

Behavior

Read on the colorbar

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 "@ggts-sh/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>