<h2>Primary Colors</h2>
<div style="display: flex;">
<div class="color-new" style="background-color: var( --purple-800-brand);--text-color:white;">
<h3 style="color:white">Purple</h3>
<span class="js-copy new" data-copy="#582C83">#582C83 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" data-copy="rgb(88, 44, 131)">rgb(88, 44, 131) <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" data-copy="cmyk(83, 100, 13, 12)">cmyk(83, 100, 13, 12) <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
</div>
<div class="color-new" style="background-color: var( --yellow-300-brand);--text-color:#393A3B">
<h3 style="color:#393A3B;">Golden <br>Yellow</h3>
<span class="js-copy new" style="color:#393A3B;border-color: #393A3B;" data-copy="#FEC10D">#FEC10D<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" style="color:#393A3B;border-color: #393A3B;" data-copy="rgb(254, 193, 13)">rgb(254, 193, 13)<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" style="color:#393A3B;border-color: #393A3B;" data-copy="cmyk(0, 25, 100, 0)">cmyk(0, 25, 100, 0)<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
</div>
</div>
<!--<div class="swatch-container">
<div class="swatch js-copy" data-copy="#582C83">
<div
class="color"
style="background-color: var( --purple-800-brand);"
></div>
<span>#582C83</span>
</div>
<div class="swatch js-copy" data-copy="#FEC10D">
<div class="color" style="background-color: var(--yellow-300-brand);"></div>
<span>#FEC10D</span>
</div>
</div>-->
<h2>Secondary Colors</h2>
<div style="display: flex;">
<div class="color-new" style="background-color: var( --purple-400-brand);--text-color:white">
<h3 style="color: white;">Light <br>Purple</h3>
<span class="js-copy new" data-copy="#8246AF">#8246AF<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" data-copy="rgb(130, 70, 175)">rgb(130, 70, 175)<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" data-copy="cmyk(58, 72, 0, 0)">cmyk(58, 72, 0, 0)<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
</div>
<div class="color-new" style="background-color: var( --blue-900);--text-color:white">
<h3 style="color: white;">Blue</h3>
<span class="js-copy new" data-copy="#003C71">#003C71<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" data-copy="rgb(0,60,113)">rgb(0, 60, 113)<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" data-copy="cmyk(100,58,9,46)">cmyk(100, 58, 9, 46)<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
</div>
<div class="color-new" style="background-color: var(--orange-600-brand);--text-color:#393A3B">
<h3 style="color: #393A3B;">Orange</h3>
<span class="js-copy new" style="color:#393A3B;border-color: #393A3B;" data-copy="#FF9800">#FF9800<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" style="color:#393A3B;border-color: #393A3B;" data-copy="rgb(255, 152, 0)">rgb(255, 152, 0)<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" style="color:#393A3B;border-color: #393A3B;" data-copy="cmyk(0,42,100,0)">cmyk(0, 42, 100, 0)<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
</div>
<div class="color-new" style="background-color: var(--green-500-brand);--text-color:#393A3B">
<h3 style="color: #393A3B;">Green</h3>
<span class="js-copy new" style="color:#393A3B;border-color: #393A3B;" data-copy="#84BD00">#84BD00<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" style="color:#393A3B;border-color: #393A3B;" data-copy="rgb(132,189,0)">rgb(132, 189, 0)<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
<span class="js-copy new" style="color:#393A3B;border-color: #393A3B;" data-copy="cmyk(50,0,100,0)">cmyk(50,0,100,0)<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" />
</svg></span>
</div>
</div>
<h2>Other Default Colors</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#57585A">
<div class="color" style="background-color:var(--gray-700);"></div>
<span>#57585A <br><small>Text</small></span>
</div>
<div class="swatch js-copy" data-copy="#FFFFFF">
<div class="color" style="background-color:white;border: 1px solid var(--gray-700);"></div>
<span>#FFFFFF <br><small>Background</small></span>
</div>
</div>
No notes defined.