Swatch palette grid generated from colors from the Santa Monica mountains. Uses minmax to make it responsive by default.

Colors include hex, rgb and hsl values.

View the layout

CSS Code

<style type="text/css">
      body {
        font-family: 'Noto Sans', sans-serif;
        font-size: var(--font-size-small);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      }

      .palette {
        border: 1px solid black;
      }

      .swatch {
        margin: 1vw;
      }

      .swatch div {
        border-radius: 50%;
        height: 140px;
        margin: .5em auto;
        width: 140px;
      }

    </style>