<div class="main">
  <h1>Color Palette Explorer</h1>
  <div class="row">
    <div class="color primary">
      <p>Primary</p>
      <p>#F44336</p>
    </div>
    <div class="tones">
      <div class="light">
        <div class="swatch ninety primary ">
          <p>90%</p>
        </div>
        <div class="swatch seventy-five primary">
          <p>75%</p>
        </div>
        <div class="swatch fifty primary">
          <p>50%</p>
        </div>
        <div class="swatch twenty-five primary">
          <p>25%</p>
        </div>
        <div class="swatch ten primary">
          <p>10%</p>
        </div>
      </div>
      <div class="dark">
        <div class="swatch ten primary">
          <p>10%</p>
        </div>
        <div class="swatch twenty-five primary">
          <p>25%</p>
        </div>
        <div class="swatch fifty primary">
          <p>50%</p>
        </div>
        <div class="swatch seventy-five primary">
          <p>75%</p>
        </div>
        <div class="swatch ninety primary">
          <p>90%</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="color secondary">
      <p>Secondary</p>
      <p>#1E88E5</p>
    </div>
    <div class="tones">
      <div class="light">
        <div class="swatch ninety secondary">
          <p>90%</p>
        </div>
        <div class="swatch seventy-five secondary">
          <p>75%</p>
        </div>
        <div class="swatch fifty secondary">
          <p>50%</p>
        </div>
        <div class="swatch twenty-five secondary">
          <p>25%</p>
        </div>
        <div class="swatch ten secondary">
          <p>10%</p>
        </div>
      </div>
      <div class="dark">
        <div class="swatch ten secondary">
          <p>10%</p>
        </div>
        <div class="swatch twenty-five secondary">
          <p>25%</p>
        </div>
        <div class="swatch fifty secondary">
          <p>50%</p>
        </div>
        <div class="swatch seventy-five secondary">
          <p>75%</p>
        </div>
        <div class="swatch ninety secondary">
          <p>90%</p>
        </div>
      </div>
    </div>    
  </div>
  <div class="row">
    <div class="color highlight">
      <p>Highlight</p>
      <p>#FDD835</p>
    </div>
    <div class="tones">
      <div class="light">
        <div class="swatch ninety highlight">
          <p>90%</p>
        </div>
        <div class="swatch seventy-five highlight">
          <p>75%</p>
        </div>
        <div class="swatch fifty highlight">
          <p>50%</p>
        </div>
        <div class="swatch twenty-five highlight">
          <p>25%</p>
        </div>
        <div class="swatch ten highlight">
          <p>10%</p>
        </div>
      </div>
      <div class="dark">
        <div class="swatch ten highlight">
          <p>10%</p>
        </div>
        <div class="swatch twenty-five highlight">
          <p>25%</p>
        </div>
        <div class="swatch fifty highlight">
          <p>50%</p>
        </div>
        <div class="swatch seventy-five highlight">
          <p>75%</p>
        </div>
        <div class="swatch ninety highlight">
          <p>90%</p>
        </div>
      </div>
    </div>  
  </div>
  <div class="row">
    <div class="color neutral">
      <p>Neutral</p>
      <p>#faf0e6</p>
    </div>
    <div class="tones">
      <div class="light">
        <div class="swatch ninety neutral">
          <p>90%</p>
        </div>
        <div class="swatch seventy-five neutral">
          <p>75%</p>
        </div>
        <div class="swatch fifty neutral">
          <p>50%</p>
        </div>
        <div class="swatch twenty-five neutral">
          <p>25%</p>
        </div>
        <div class="swatch ten neutral">
          <p>10%</p>
        </div>
      </div>
      <div class="dark">
        <div class="swatch ten neutral">
          <p>10%</p>
        </div>
        <div class="swatch twenty-five neutral">
          <p>25%</p>
        </div>
        <div class="swatch fifty neutral">
          <p>50%</p>
        </div>
        <div class="swatch seventy-five neutral">
          <p>75%</p>
        </div>
        <div class="swatch ninety neutral">
          <p>90%</p>
        </div>
      </div>
    </div>    
  </div>
</div>

:root{
  --primary: #F44336;
  --secondary: #1E88E5;
  --highlight: #FDD835;
  --neutral: #faf0e6;
}
.main{
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.primary{
  background-color: var(--primary);
}

.pborder{
  border: 1px solid var(--primary);
}

.secondary{
  background-color: var(--secondary);
}

.highlight{
  background-color: var(--highlight);
}

.neutral{
  background-color: var(--neutral);
  color: black;
}

.ninety{
  opacity: .9;
}

.seventy-five{
  opacity: .75;
}

.fifty{
  opacity: .50;
}

.twenty-five{
  opacity: .25;
}

.ten{
  opacity: .1;
}

.row{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.tones{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.light, .dark{
  display: flex;
  flex-direction: row;
}

.dark{
  background-color: black;
  color: white;
}

p{
  font-size: 1.3em;
  line-height: 1.5em;
  font-weight: bold;
  margin: 0;
}

.swatch{
  display: flex;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  margin: 5px;
  align-items: center;
  justify-content: center;
}


.color{
  margin: 10px;
  padding: 5px;
  width: 150px;
  height: 150px;
  border: 2px dotted black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}