JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<h1>Harvard Web Color Palette in SASS</h1>
<p>
  Here are Harvard's color palettes, defined in SASS.
  <br/>See: <a href='https://www.seas.harvard.edu/communications/identity-guidelines/color-palettes'>https://www.seas.harvard.edu/communications/identity-guidelines/color-palettes</a>
</p>
<h2>
Crimson
</h2>

<div class="swatch crimson">
  &#160
</div>
<h2>
Core Color Palette
</h2>
<div class="swatch ink">
  &#160
</div>
<div class="swatch mortar">
  &#160
</div>
<div class="swatch slate">
  &#160
</div>
<div class="swatch shade">
  &#160
</div>
<h2>
Accent Color Palette
</h2>
<div class="swatch indigo">
  &#160
</div>
<div class="swatch bluebonnet">
  &#160
</div>
<div class="swatch ivy">
  &#160
</div>
<div class="swatch pear">
  &#160
</div>
<div class="swatch saffron">
  &#160
</div>
<div class="swatch creme">
  &#160
</div>
<div class="swatch gold">
  &#160
</div>
<div class="swatch lemon">
  &#160
</div>

SCSS

/* crimson */
$crimson    : rgb(165,28,48);
/* core color palette */
$ink        : rgb(30,30,30);
$mortar     : rgb(140,129,121);
$parchment  : rgb(243,243,241);
$slate      : rgb(137,150,160);
$shade      : rgb(186,197,198);
/* accent  colors */
$indigo     : rgb(41,51,82);
$bluebonnet : rgb(78,132,196);
$ivy        : rgb(82,133,76);
$pear       : rgb(195,215,164);
$saffron    : rgb(232,125,30);
$creme      : rgb(244,237,202);
$gold       : rgb(196,150,26);
$lemon      : rgb(255,219,109);

div.swatch { height: 150px; width: 150px; border: thin solid black; margin: 5px; float: left;}
div.crimson { background-color: $crimson; }
div.ink { background-color: $ink; }
div.mortar { background-color: $mortar; }
div.parchment { background-color: $parchment; }
div.slate { background-color: $slate; }
div.shade { background-color: $shade; }
div.indigo { background-color: $indigo; }
div.bluebonnet { background-color: $bluebonnet; }
div.ivy { background-color: $ivy; }
div.pear { background-color: $pear; }
div.saffron { background-color: $saffron; }
div.pear { background-color: $creme; }
div.gold { background-color: $gold; }
div.lemon { background-color: $lemon; }
 
h2 { clear: both; padding-top: 1em;}