A colour palette based off ONS

<!DOCTYPE html>

p {
      max-width: 600px;
    }

svg#sex {
      width: 800px;
      height: 210px;
    }

svg#five {
      width: 800px;
      height: 210px;
    }

svg#nine {
      width: 1000px;
      height: 160px;
    }

td {
      text-align: center;
    }

table {
      border-collapse: collapse;
    }

table,
    th,
    td {
      border: 1px solid black;
    }
  </style>

<body>
  <h1>New ONS colours</h1>
  <h2>Male/Female</h2>
  <svg id="sex"></svg>
  <code>["#234d70","#00a5a1"]</code>

<h2>5 colour palette</h2>
  <svg id="five"></svg>
  <code>["#053D58","#24A79B","#3A7899","#ABC149","#005D60"]</code>

<h2>9 colours</h2>
  <svg id="nine"></svg>

<h2>Sequential palette</h2>

<select id="seqNum">
    <option value=3>Three</option>
    <option value=4>Four</option>
    <option value=5>Five</option>
    <option value=6>Six</option>
    <option value=7>Seven</option>
  </select> colours from

<select id="seqCol">
    <option value="#053D58">Midnight</option>
    <option value="#24A79B">Aquamarine</option>
    <option value="#3A7899">Denim</option>
    <option value="#ABC149">Straw</option>
    <option value="#005D60">Forest</option>
    <option value="#3383EF">Cobalt</option>
    <option value="#493C7F">Navy</option>
    <option value="#7EC8FA">Sky</option>
    <option value="#2A5FB8">Admiral</option>
  </select>

<button onclick='seqPal()'>Create palette</button>

<h2>Diverging palette</h2>

<select id="divNum">
    <option value=3>Three</option>
    <option value=4>Four</option>
    <option value=5>Five</option>
    <option value=6>Six</option>
    <option value=7>Seven</option>
  </select> colours based on

<select id="divCol">
    <option value="#053D58">Midnight</option>
    <option value="#24A79B">Aquamarine</option>
    <option value="#3A7899">Denim</option>
    <option value="#ABC149">Straw</option>
    <option value="#005D60">Forest</option>
    <option value="#3383EF">Cobalt</option>
    <option value="#493C7F">Navy</option>
    <option value="#7EC8FA">Sky</option>
    <option value="#2A5FB8">Admiral</option>
  </select>

<button onclick='divPal()'>Create palette</button>

d3.select('#sex')
      .selectAll('text')
      .data(["Male","Female"])
      .enter()
      .append('text')
      .text(function(d) {
        return d
      })
      .attr("x", function(d, i) {
        return 150 * (i + 0.5)
      })
      .attr("y", 180)
      .attr("text-anchor", "middle")

var colours = ["#053D58", "#24A79B", "#3A7899", "#ABC149", "#005D60", "#3383EF", "#493C7F", "#7EC8FA", "#2A5FB8"]

var names = ["Midnight", "Aquamarine", "Denim", "Straw", "Forest", "Cobalt", "Navy", "Sky", "Admiral"]

d3.select('#five')
      .selectAll('circle')
      .data(colours.slice(0, 5))
      .enter()
      .append('circle')
      .attr("fill", function(d) {
        return d
      })
      .attr("cx", function(d, i) {
        return 150 * (i + 0.5)
      })
      .attr("cy", 100)
      .attr("r", 50)

d3.select('#five')
      .selectAll('text')
      .data(names.slice(0, 5))
      .enter()
      .append('text')
      .text(function(d) {
        return d
      })
      .attr("x", function(d, i) {
        return 150 * (i + 0.5)
      })
      .attr("y", 180)
      .attr("text-anchor", "middle")

d3.select("#nine")
      .selectAll('circle')
      .data(colours)
      .enter()
      .append('circle')
      .attr("fill", function(d) {
        return d
      })
      .attr("cx", function(d, i) {
        return 85 * (i + 0.5)
      })
      .attr("cy", 50)
      .attr("r", 30)

d3.select('#nine')
      .selectAll('text')
      .data(names)
      .enter()
      .append('text')
      .text(function(d) {
        return d
      })
      .attr("x", function(d, i) {
        return 85 * (i + 0.5)
      })
      .attr("y", 130)
      .attr("text-anchor", "middle")

//sequential palettes

function seqPal() {
      var sequential = d3.select("#sequential")
      var seqNum = +document.getElementById('seqNum').value
      var i = d3.interpolate(1.5, 2.2)
      var seqColour = document.getElementById('seqCol').value
      var seqColInd = colours[colours.indexOf(seqColour)]

sequential.selectAll("*").remove()

sequential.append('svg')
        .attr("width", "800px")
        .attr("height", "160px")

sequential.select('svg')
        .selectAll('circle')
        .data(chroma.scale([chroma(seqColInd), chroma(seqColInd).brighten(i((seqNum - 3) / 4))])
          .mode('lch')
          .colors(seqNum))
        .enter()
        .append('circle')
        .attr("fill", function(d) {
          return d
        })
        .attr("cx", function(d, i) {
          return 800 / seqNum * (i + 0.5)
        })
        .attr("cy", 50)
        .attr("r", 40)

sequential.select('svg')
        .selectAll('text')
        .data(chroma.scale([chroma(seqColInd), chroma(seqColInd).brighten(i((seqNum - 3) / 4))])
          .mode('lch')
          .colors(seqNum))
        .enter()
        .append('text')
        .text(function(d) {
          return d
        })
        .attr("x", function(d, i) {
          return 800 / seqNum * (i + 0.5)
        })
        .attr("y", 130)
        .attr("text-anchor", "middle")

d3.select("#seqPalCode").text("[" + chroma.scale([chroma(seqColInd), chroma(seqColInd).brighten(i((seqNum - 3) / 4))])
        .mode('lch')
        .colors(seqNum) +
        "]")
    } //end seqPal function

function divPal() {
      var divergent = d3.select("#divergent")
      var divNum = +document.getElementById('divNum').value
      var divColour = document.getElementById('divCol').value

divergent.selectAll("*").remove()

divergent.append('svg')
        .attr("width", "800px")
        .attr("height", "160px")

divergent.select('svg')
        .selectAll('circle')
        .data(chroma.scale([chroma(divColour), "#ccc", chroma(divColour).set('hsl.h', chroma(divColour).get('hsl.h') - 180)])
          .mode('lch')
          .colors(divNum))
        .enter()
        .append('circle')
        .attr("fill", function(d) {
          return d
        })
        .attr("cx", function(d, i) {
          return 800 / divNum * (i + 0.5)
        })
        .attr("cy", 50)
        .attr("r", 40)

d3.select("#divPalCode").text("["
      + chroma.scale([chroma(divColour), "#ccc", chroma(divColour).set('hsl.h', chroma(divColour).get('hsl.h') - 180)])
      .mode('lch')
      .colors(divNum) +
        "]")
    } //end divPal function
  </script>
</body>

Updated missing url https://cdn.rawgit.com/gka/chroma.js/master/chroma.min.js to https://cdn.jsdelivr.net/gh/gka/chroma.js/chroma.min.js

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js

https://npmcdn.com/babel-core@5.8.34/browser.min.js

https://cdn.rawgit.com/gka/chroma.js/master/chroma.min.js

https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js