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