Color swatches

Grid experiment to display swatch palettes

<figure><img src="https://scottgruber.github.io/100-layouts/img/016/mrt-colors-14.jpg" alt="Santa Monica mountains">
      <figcaption>
        <p><b>Color palette 5</b></p>
        <section class="palette">
          <div class="swatch">
            <div style="background: #68748C;"></div>
            <div>
              <p><b>Hex: </b>#68748C<br>
                <b>HSL: </b>220° 15% 48%<br>
                <b>RGB: </b>104 116 140</p>
            </div>
          </div>
          <div class="swatch">
            <div style="background: #6CA6D9;"></div>
            <div>
              <p> <b>Hex: </b>#6CA6D9<br>
                <b>HSL: </b>208° 59% 64%<br>
                <b>RGB: </b>108 166 217</p>
            </div>
          </div>
          <div class="swatch">
            <div style="background: #80BDF2;"></div>
            <div>
              <p><b>Hex: </b>#80BDF2<br>
                <b>HSL: </b>208° 81% 73%<br>
                <b>RGB: </b>128 189 242</p>
            </div>
          </div>
          <div class="swatch">
            <div style="background: #A7D5F2;"></div>
            <div>
              <p><b>Hex: </b>#A7D5F2<br>
                <b>HSL: </b>203° 74% 80%<br>
                <b>RGB: </b>167 213 242</p>
            </div>
          </div>
          <div class="swatch">
            <div style="background: #A68A7B;"></div>
            <div>
              <p><b>Hex: </b>#A68A7B<br>
                <b>HSL: </b>21° 19% 57%<br>
                <b>RGB: </b>166 138 123</p>
            </div>
          </div>
        </section>
      </figcaption>
    </figure>

Tags:


← Previous Type sheets Typography for Presentations, Websites and Research Papers Next →