Colour picker

<div class="color-picker" data-color>
  <div class="color-swatches" role="group" aria-label="Swatches">
    <button type="button" class="color-swatch" style="--c: #5657DD" aria-label="#5657DD" aria-pressed="true" data-color-value="#5657DD"></button>
    <button type="button" class="color-swatch" style="--c: #006BD0" aria-label="#006BD0" aria-pressed="false" data-color-value="#006BD0"></button>
    <button type="button" class="color-swatch" style="--c: #077C86" aria-label="#077C86" aria-pressed="false" data-color-value="#077C86"></button>
    <button type="button" class="color-swatch" style="--c: #048251" aria-label="#048251" aria-pressed="false" data-color-value="#048251"></button>
    <button type="button" class="color-swatch" style="--c: #B97D06" aria-label="#B97D06" aria-pressed="false" data-color-value="#B97D06"></button>
    <button type="button" class="color-swatch" style="--c: #C61B46" aria-label="#C61B46" aria-pressed="false" data-color-value="#C61B46"></button>
    <button type="button" class="color-swatch" style="--c: #7949D2" aria-label="#7949D2" aria-pressed="false" data-color-value="#7949D2"></button>
    <button type="button" class="color-swatch" style="--c: #535A66" aria-label="#535A66" aria-pressed="false" data-color-value="#535A66"></button>
  </div>
  <div class="field">
    <input type="color" class="color-native" value="#5657DD" aria-label="Pick any colour">
    <input id="clr-1" type="text" value="#5657DD" aria-label="Colour code" spellcheck="false">
  </div>
</div>