Color options

HTML

<!-- script src="https://code.highcharts.com/highcharts-autoload.js"></script
-->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highcharts/controls@v0.6.0/js/controls.js" type="module"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>

<highcharts-controls>
  <highcharts-group header="Color optios">
    <highcharts-control path="plotOptions.series.color" type="color"></highcharts-control>
    <highcharts-control path="series[0].color" type="color"></highcharts-control>
    <highcharts-control path="series[1].color" type="color"></highcharts-control>
  </highcharts-group>
</highcharts-controls>

CSS

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

.highcharts-figure {
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-controls {
    max-width: 800px;
    margin: 1em auto;
}

highcharts-group-description {
    display: none;
}

JavaScript

Highcharts.chart('container', {
    title: {
        text: 'Demo of <em>legend</em> options'
    },
    series: [
        {
            data: [
                1,
                2,
                3,
                4
            ],
        },
        {
            data: [
                4,
                3,
                2,
                1
            ],
        }
    ]
});