<!--<label>Color Space:
<select id="colorSpace-Selector">
<option>hex</option>
<option>rgb</option>
<option>hsl</option>
<option>oklch</option>
</select>
</label>-->
<label>Toggle accessiblity information <input type="checkbox" id="a11y" class="switch" /></label><br>
<span class="a11y-only"><small>Tap a color for see how it looks as a foreground color and the contrast ratio.<br>
<details>
<summary>What do these levels mean?</summary>
<div class="accordion-content">
<p>
This tool follows the Web Content Accessibility Guidelines (WCAG), which are a series of recommendations for making the web more accessible.<br>Regarding colors, the standard defines two levels of contrast ratio: AA (minimum contrast) and AAA (enhanced contrast).<br>The level <strong>AA</strong> requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18pt) or bold text.<br>The level <strong>AAA</strong> requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text or bold text.</p>
</div>
</details>
</small></span>
<h2>Purple</h2>
<div class="swatch-container">
<!--<div class="swatch js-copy" data-copy="#1A1221">
<div class="color" style="background-color: #1A1221;"></div>
<span class="hex">#1A1221</span>
</div>
<div class="swatch js-copy" data-copy="#3E205E">
<div class="color" style="background-color: #3E205E;"></div>
<span class="hex">#3E205E</span>
</div>-->
<div class="swatch js-copy" data-copy="#4F277A">
<div class="color" style="background-color: var(--purple-900);">
<contrast-details style="--background: #4F277A"></contrast-details>
</div>
<span class="hex">#4F277A</span>
<span class="rgb">rgb(79, 39, 122)</span>
<span class="hsl">hsl(269, 52%, 32%)</span>
<span class="oklch">oklch(37.2%, 34%, 302.366%)</span>
</div>
<div class="swatch js-copy" data-copy="#582C83">
<div class="color brand-color" style="background-color: var( --purple-800-brand);"><contrast-details style="--background: #582C83"></contrast-details></div>
<span class="hex">#582C83</span>
<span class="rgb">rgb(88, 44, 131)</span>
<span class="hsl">hsl(270, 50%, 34%)</span>
<span class="oklch">oklch(39.7%, 35.25%, 303.87%)</span>
</div>
<div class="swatch js-copy" data-copy="#5E308A">
<div class="color" style="background-color: var( --purple-700);">
<contrast-details style="--background: #5E308A"></contrast-details>
</div>
<span class="hex">#5E308A</span>
<span class="rgb">rgb(94, 48, 138)</span>
<span class="hsl">hsl(271, 48%, 36%)</span>
<span class="oklch">oklch(41.5%, 36.25%, 304.289%)</span>
</div>
<div class="swatch js-copy" data-copy="#663491">
<div class="color" style="background-color: var( --purple-600);">
<contrast-details style="--background: #663491"></contrast-details>
</div>
<span class="hex">#663491</span>
<span class="rgb">rgb(102, 52, 145)</span>
<span class="hsl">hsl(272.28 47% 39%)</span>
<span class="oklch">oklch(43.58% 0.15 305.84)</span>
</div>
<div class="swatch js-copy" data-copy="#743DA1">
<div class="color" style="background-color: var( --purple-500);">
<contrast-details style="--background: #743DA1"></contrast-details>
</div>
<span class="hex">#743DA1</span>
<span class="rgb">rgb(116, 61, 161)</span>
<span class="hsl">hsl(273.02 45% 44%)</span>
<span class="oklch">oklch(47.67% 0.159 306.68)</span>
</div>
<div class="swatch js-copy" data-copy="#8246AF">
<div class="color brand-color" style="background-color: var( --purple-400-brand);">
<contrast-details style="--background: #8246AF"></contrast-details>
</div>
<span class="hex">#8246AF</span>
<span class="rgb">rgb(130, 70, 175)</span>
<span class="hsl">hsl(274.27 43% 48%)</span>
<span class="oklch">oklch(51.55% 0.165 307.99)</span>
</div>
<div class="swatch js-copy" data-copy="#9967BF">
<div class="color" style="background-color: var( --purple-300);">
<contrast-details style="--background: #9967BF"></contrast-details>
</div>
<span class="hex">#9967BF</span>
<span class="rgb">rgb(153, 103, 191)</span>
<span class="hsl">hsl(274.1 41% 57.99999999999999%)</span>
<span class="oklch">oklch(60.21% 0.139 309)</span>
</div>
<div class="swatch js-copy" data-copy="#B794D1">
<div class="color" style="background-color: var( --purple-200);">
<contrast-details style="--background: #B794D1"></contrast-details>
</div>
<span class="hex">#B794D1</span>
<span class="rgb">rgb(183, 148, 209)</span>
<span class="hsl">hsl(274.42 40% 70%)</span>
<span class="oklch">oklch(72% 0.094 310.24)</span>
</div>
<div class="swatch js-copy" data-copy="#D3BFE3">
<div class="color" style="background-color: var( --purple-100);">
<contrast-details style="--background: #D3BFE3"></contrast-details>
</div>
<span class="hex">#D3BFE3</span>
<span class="rgb">rgb(211, 191, 227)</span>
<span class="hsl">hsl(273.34 39% 82%)</span>
<span class="oklch">oklch(83.27% 0.054 310.07)</span>
</div>
<div class="swatch js-copy" data-copy="#e9dff1">
<div class="color" style="background-color: #e9dff1;">
<contrast-details style="--background: #e9dff1"></contrast-details>
</div>
<span class="hex">#E9DFF1</span>
</div>
<div class="swatch js-copy" data-copy="#F0EAF6">
<div class="color" style="background-color: #F0EAF6;">
<contrast-details style="--background: #F0EAF6"></contrast-details>
</div>
<span class="hex">#F0EAF6</span>
</div>
</div>
<h2>Blue</h2>
<div class="swatch-container">
<!--<div class="swatch js-copy" data-copy="#11203B">
<div class="color" style="background-color: #11203B;"></div>
<span class="hex">#11203B</span>
</div>
<div class="swatch js-copy" data-copy="#0D2749">
<div class="color" style="background-color: #0D2749"></div>
<span class="hex">#0D2749</span>
</div>
<div class="swatch js-copy" data-copy="#092E56">
<div class="color" style="background-color: #092E56;"></div>
<span class="hex">#092E56</span>
</div>-->
<div class="swatch js-copy" data-copy="#003C71">
<div class="color brand-color" style="background-color: var(--blue-900);">
<contrast-details style="--background: var(--blue-900)"></contrast-details>
</div>
<span class="hex">#003C71</span>
</div>
<div class="swatch js-copy" data-copy="#105890">
<div class="color" style="background-color: var( --blue-800);">
<contrast-details style="--background: var(--blue-800)"></contrast-details>
</div>
<span class="hex">#105890</span>
</div>
<div class="swatch js-copy" data-copy="#1968A1">
<div class="color" style="background-color: var( --blue-700);">
<contrast-details style="--background: var(--blue-700)"></contrast-details>
</div>
<span class="hex">#1968A1</span>
</div>
<div class="swatch js-copy" data-copy="#2578B2">
<div class="color" style="background-color: var( --blue-600);">
<contrast-details style="--background: var(--blue-600)"></contrast-details>
</div>
<span class="hex">#2578B2</span>
</div>
<div class="swatch js-copy" data-copy="#2E85BE">
<div class="color" style="background-color: var( --blue-500);">
<contrast-details style="--background: var(--blue-500)"></contrast-details>
</div>
<span class="hex">#2E85BE</span>
</div>
<div class="swatch js-copy" data-copy="#4995C6">
<div class="color" style="background-color: var( --blue-400);">
<contrast-details style="--background: var(--blue-400)"></contrast-details>
</div>
<span class="hex">#4995C6</span>
</div>
<div class="swatch js-copy" data-copy="#66A6CE">
<div class="color" style="background-color: var( --blue-300);">
<contrast-details style="--background: var(--blue-300)"></contrast-details>
</div>
<span class="hex">#66A6CE</span>
</div>
<div class="swatch js-copy" data-copy="#8EBFDD">
<div class="color" style="background-color: var( --blue-200);">
<contrast-details style="--background: var(--blue-200)"></contrast-details>
</div>
<span class="hex">#8EBFDD</span>
</div>
<div class="swatch js-copy" data-copy="#B8D8EA">
<div class="color" style="background-color: var( --blue-100);">
<contrast-details style="--background: var(--blue-100)"></contrast-details>
</div>
<span class="hex">#B8D8EA</span>
</div>
<div class="swatch js-copy" data-copy="#DCECF5">
<div class="color" style="background-color:#DCECF5;">
<contrast-details style="--background: #DCECF5"></contrast-details>
</div>
<span class="hex">#DCECF5</span>
</div>
<div class="swatch js-copy" data-copy="#EDF5FA">
<div class="color" style="background-color:#EDF5FA;">
<contrast-details style="--background: #EDF5FA"></contrast-details>
</div>
<span class="hex">#EDF5FA</span>
</div>
</div>
<h2>Orange/Yellow</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#EF6D00">
<div class="color" style="background-color: var(--orange-900);">
<contrast-details style="--background: var(--orange-900)"></contrast-details>
</div>
<span class="hex">#EF6D00</span>
</div>
<div class="swatch js-copy" data-copy="#F57D00">
<div class="color" style="background-color: var( --orange-800);"><contrast-details style="--background: var(--orange-800)"></contrast-details></div>
<span class="hex">#F57D00</span>
</div>
<div class="swatch js-copy" data-copy="#FB8D00">
<div class="color" style="background-color: var( --orange-700);"><contrast-details style="--background: var(--orange-700)"></contrast-details></div>
<span class="hex">#FB8D00</span>
</div>
<div class="swatch js-copy" data-copy="#FF9800">
<div class="color brand-color" style="background-color: var( --orange-600-brand);"><contrast-details style="--background: var(--orange-600)"></contrast-details></div>
<span class="hex">#FF9800</span>
</div>
<div class="swatch js-copy" data-copy="#FFA600">
<div class="color" style="background-color: var( --orange-500);">
<contrast-details style="--background: var(--orange-500)"></contrast-details>
</div>
<span class="hex">#FFA600</span>
</div>
<div class="swatch js-copy" data-copy="#FFB300">
<div class="color" style="background-color: var( --yellow-400);"><contrast-details style="--background: var(--yellow-400)"></contrast-details></div>
<span class="hex">#FFB300</span>
</div>
<div class="swatch js-copy" data-copy="#FEC10D">
<div class="color brand-color" style="background-color: var( --yellow-300-brand);"><contrast-details style="--background: var(--yellow-300)"></contrast-details></div>
<span class="hex">#FEC10D</span>
</div>
<div class="swatch js-copy" data-copy="#FECB2A">
<div class="color" style="background-color: var( --yellow-200);"><contrast-details style="--background: var(--yellow-200)"></contrast-details></div>
<span class="hex">#FECB2A</span>
</div>
<div class="swatch js-copy" data-copy="#FED650">
<div class="color" style="background-color: var( --yellow-100);"><contrast-details style="--background: var(--yellow-100)"></contrast-details></div>
<span class="hex">#FED650</span>
</div>
<div class="swatch js-copy" data-copy="#ffeaa6">
<div class="color" style="background-color: #ffeaa6;"><contrast-details style="--background: #ffeaa6"></contrast-details></div>
<span class="hex">#ffeaa6</span>
</div>
<div class="swatch js-copy" data-copy="#fff1c4">
<div class="color" style="background-color: #fff1c4;"><contrast-details style="--background: #fff1c4"></contrast-details></div>
<span class="hex">#fff1c4</span>
</div>
</div>
<h2>Green</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#1B3C11">
<div class="color" style="background-color: #1B3C11;">
<contrast-details style="--background: #1B3C11"></contrast-details>
</div>
<span class="hex">#1B3C11</span>
</div>
<div class="swatch js-copy" data-copy="#1B6500">
<div class="color" style="background-color: var(--green-900);"><contrast-details style="--background: var(--green-900)"></contrast-details></div>
<span class="hex">#1B6500</span>
</div>
<div class="swatch js-copy" data-copy="#498700">
<div class="color" style="background-color: var( --green-800);"><contrast-details style="--background: var(--green-800)"></contrast-details></div>
<span class="hex">#498700</span>
</div>
<div class="swatch js-copy" data-copy="#5F9A00">
<div class="color" style="background-color: var( --green-700);"><contrast-details style="--background: var(--green-700)"></contrast-details></div>
<span class="hex">#5F9A00</span>
</div>
<div class="swatch js-copy" data-copy="#74AD00">
<div class="color" style="background-color: var( --green-600);"><contrast-details style="--background: var(--green-600)"></contrast-details></div>
<span class="hex">#74AD00</span>
</div>
<div class="swatch js-copy" data-copy="#84BD00">
<div class="color brand-color" style="background-color: var( --green-500-brand);"><contrast-details style="--background: var(--green-500)"></contrast-details></div>
<span class="hex">#84BD00</span>
</div>
<div class="swatch js-copy" data-copy="#97C73E">
<div class="color" style="background-color: var( --green-400);"><contrast-details style="--background: var(--green-400)"></contrast-details></div>
<span class="hex">#97C73E</span>
</div>
<div class="swatch js-copy" data-copy="#ABD064">
<div class="color" style="background-color: var( --green-300);"><contrast-details style="--background: var(--green-300)"></contrast-details></div>
<span class="hex">#ABD064</span>
</div>
<div class="swatch js-copy" data-copy="#C4DD92">
<div class="color" style="background-color: var( --green-200);"><contrast-details style="--background: var(--green-200)"></contrast-details></div>
<span class="hex">#C4DD92</span>
</div>
<div class="swatch js-copy" data-copy="#DCEBBD">
<div class="color" style="background-color: var( --green-100);"><contrast-details style="--background: var(--green-100)"></contrast-details></div>
<span class="hex">#DCEBBD</span>
</div>
<div class="swatch js-copy" data-copy="#F4F8EC">
<div class="color" style="background-color: #F4F8EC;"><contrast-details style="--background: #F4F8EC"></contrast-details></div>
<span class="hex">#F4F8EC</span>
</div>
</div>
<h2>Gray</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#000000">
<div class="color" style="background-color: var( --black);"><contrast-details style="--background: var( --black)"></contrast-details></div>
<span class="hex">#000000</span>
</div>
<div class="swatch js-copy" data-copy="#1d1e1e">
<div class="color" style="background-color: #1d1e1e;"><contrast-details style="--background: #1d1e1e"></contrast-details></div>
<span class="hex">#1d1e1e</span>
</div>
<div class="swatch js-copy" data-copy="#393A3B">
<div class="color" style="background-color: var( --gray-800);"><contrast-details style="--background: var( --gray-800)"></contrast-details></div>
<span class="hex">#393A3B</span>
</div>
<div class="swatch js-copy" data-copy="#57585A">
<div class="color brand-color" style="background-color: var( --gray-700);"><contrast-details style="--background: var( --gray-700)"></contrast-details></div>
<span class="hex">#57585A</span>
</div>
<div class="swatch js-copy" data-copy="#6A6B6E">
<div class="color" style="background-color: var( --gray-600);"><contrast-details style="--background: var( --gray-600)"></contrast-details></div>
<span class="hex">#6A6B6E</span>
</div>
<div class="swatch js-copy" data-copy="#939496">
<div class="color" style="background-color: var( --gray-500);"><contrast-details style="--background: var( --gray-500)"></contrast-details></div>
<span class="hex">#939496</span>
</div>
<div class="swatch js-copy" data-copy="#B2B4B6">
<div class="color" style="background-color: var( --gray-400);"><contrast-details style="--background: var( --gray-400)"></contrast-details></div>
<span class="hex">#B2B4B6</span>
</div>
<div class="swatch js-copy" data-copy="#D6D8DA">
<div class="color" style="background-color: var( --gray-300);"><contrast-details style="--background: var( --gray-300)"></contrast-details></div>
<span class="hex">#D6D8DA</span>
</div>
<div class="swatch js-copy" data-copy="#E7E8EA">
<div class="color" style="background-color: var( --gray-200);"><contrast-details style="--background: var( --gray-200)"></contrast-details></div>
<span class="hex">#E7E8EA</span>
</div>
<div class="swatch js-copy" data-copy="#F0F1F4">
<div class="color" style="background-color: var( --gray-100);"><contrast-details style="--background: var( --gray-100)"></contrast-details></div>
<span class="hex">#F0F1F4</span>
</div>
<div class="swatch js-copy" data-copy="#FFFFFF">
<div class="color" style="background-color: var( --white); border: 1px solid var(--gray-700);"><contrast-details style="--background: #FFFFFF"></contrast-details></div>
<span class="hex">#FFFFFF</span>
</div>
</div>
<h2>Special</h2>
<div class="swatch-container">
<div class="swatch js-copy" data-copy="#C41E3D">
<div class="color" style="background-color: var(--red);">
<contrast-details style="--background: var( --red)"></contrast-details>
</div>
<span class="hex">#C41E3D</span>
</div>
<div class="swatch js-copy" data-copy="#000000">
<div class="color" style="background-color: var( --black);">
<contrast-details style="--background: var( --black)"></contrast-details>
</div>
<span class="hex">#000000</span>
</div>
<div class="swatch js-copy" data-copy="#1a1221">
<div class="color" style="background-color: #1a1221;">
<contrast-details style="--background: #1a1221"></contrast-details>
</div>
<span class="hex">#1a1221</span>
</div>
<div class="swatch js-copy" data-copy="#FFFFFF">
<div class="color" style="background-color: var( --white); border: 1px solid var(--gray-700);">
<contrast-details style="--background: #FFFFFF"></contrast-details>
</div>
<span class="hex">#FFFFFF</span>
</div>
</div>
No notes defined.