# Color Shades

Each color is available in 10 equaly spaced shades between 0 and 100.

<table data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Shade 0</strong></td><td><pre class="language-css"><code class="lang-css">var(--white-0)
var(--black-100)
</code></pre></td><td><pre class="language-css"><code class="lang-css">hsl(0, 0%, 0%)
rgb(0, 0, 0)
#000000
</code></pre></td><td><a href="https://2502773477-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEkbtaLvopJ2OS43tkkqT%2Fuploads%2FZOl8DoovZT24aGCywulR%2Fwhite-0.png?alt=media&#x26;token=ed938621-e5a1-4159-9b01-4da5e7ce5315">white-0.png</a></td></tr><tr><td><strong>Shade 10</strong></td><td><pre class="language-css"><code class="lang-css">var(--white-10)
var(--black-90)
</code></pre></td><td><pre class="language-css"><code class="lang-css">hsl(0, 0%, 10%)
rgb(26, 26, 26)
#1A1A1A
</code></pre></td><td><a href="https://2502773477-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEkbtaLvopJ2OS43tkkqT%2Fuploads%2FT2j7t5wbye6m7nWbeKS9%2Fwhite-10.png?alt=media&#x26;token=f34e0bf8-cae3-4d23-a749-a947e70bde47">white-10.png</a></td></tr><tr><td><strong>Shade 20</strong></td><td><pre class="language-css"><code class="lang-css">var(--white-20)
var(--black-80)
</code></pre></td><td><pre class="language-css"><code class="lang-css">hsl(0, 0%, 20%)
rgb(51, 51, 51)
#333333
</code></pre></td><td><a href="https://2502773477-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEkbtaLvopJ2OS43tkkqT%2Fuploads%2F7d2hyBZllc0LdAlaPqw2%2Fwhite-20.png?alt=media&#x26;token=20b55570-848c-455f-adf6-59efaa18dafd">white-20.png</a></td></tr><tr><td><strong>Shade 30</strong></td><td><pre class="language-css"><code class="lang-css">var(--white-30)
var(--black-70)
</code></pre></td><td><pre class="language-css"><code class="lang-css">hsl(0, 0%, 30%)
rgb(77, 77, 77)
#4D4D4D
</code></pre></td><td><a href="https://2502773477-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEkbtaLvopJ2OS43tkkqT%2Fuploads%2FIVNTNw5CGmN15qG55Ost%2Fwhite-30.png?alt=media&#x26;token=13579dbf-4fe5-447f-8afb-c7e2cfb3e4d4">white-30.png</a></td></tr><tr><td><strong>Shade 40</strong></td><td><pre class="language-css"><code class="lang-css">var(--white-40)
var(--black-60)
</code></pre></td><td><pre class="language-css"><code class="lang-css">hsl(0, 0%, 40%)
rgb(102, 102, 102)
#666666
</code></pre></td><td><a href="https://2502773477-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEkbtaLvopJ2OS43tkkqT%2Fuploads%2FWh6wIOSAwTUl4DvbQ3Mz%2Fwhite-40.png?alt=media&#x26;token=95085969-e676-493b-b7ae-b0f375b10a30">white-40.png</a></td></tr><tr><td><strong>Shade 50</strong></td><td><pre class="language-css"><code class="lang-css">var(--white-50)
var(--black-50)
</code></pre></td><td><pre class="language-css"><code class="lang-css">hsl(0, 0%, 50%)
rgb(128, 128, 128)
#808080
</code></pre></td><td><a href="https://2502773477-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEkbtaLvopJ2OS43tkkqT%2Fuploads%2FroYjWJVXuBlaugNR2vZw%2Fwhite-50.png?alt=media&#x26;token=ac3d86aa-2b3b-46c7-8e0d-dc01c030625e">white-50.png</a></td></tr><tr><td><strong>Shade 60</strong></td><td><pre class="language-css"><code class="lang-css">var(--white-60)
var(--black-40)
</code></pre></td><td><pre class="language-css"><code class="lang-css">hsl(0, 0%, 60%)
rgb(153, 153, 153)
#999999
</code></pre></td><td><a href="https://2502773477-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEkbtaLvopJ2OS43tkkqT%2Fuploads%2F0I56bK0nL97nf4NwwXKT%2Fwhite-60.png?alt=media&#x26;token=e3c43b8c-c7b7-4b38-ac44-9c5a68176b42">white-60.png</a></td></tr><tr><td><strong>Shade 70</strong></td><td><pre class="language-css"><code class="lang-css">var(--white-70)
var(--black-30)
</code></pre></td><td><pre class="language-css"><code class="lang-css">hsl(0, 0%, 70%)
rgb(179, 179, 179)
#B3B3B3
</code></pre></td><td><a href="https://2502773477-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEkbtaLvopJ2OS43tkkqT%2Fuploads%2FN4WGIT32GDlYZQzX0Okc%2Fwhite-70.png?alt=media&#x26;token=e60256e6-a924-4418-b5a3-a3539a5d367b">white-70.png</a></td></tr><tr><td><strong>Shade 80</strong></td><td><pre class="language-css"><code class="lang-css">var(--white-80)
var(--black-20)
</code></pre></td><td><pre class="language-css"><code class="lang-css">hsl(0, 0%, 80%)
rgb(204, 204, 204)
#CCCCCC
</code></pre></td><td><a href="https://2502773477-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEkbtaLvopJ2OS43tkkqT%2Fuploads%2FtrNx2x0r7u1pWEhtiC3i%2Fwhite-80.png?alt=media&#x26;token=65ccc0c0-69fe-4dc4-a192-6d80c7a73e1d">white-80.png</a></td></tr><tr><td><strong>Shade 90</strong></td><td><pre class="language-css"><code class="lang-css">var(--white-90)
var(--black-10)
</code></pre></td><td><pre class="language-css"><code class="lang-css">hsl(0, 0%, 90%)
rgb(230, 230, 230)
#E6E6E6
</code></pre></td><td><a href="https://2502773477-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEkbtaLvopJ2OS43tkkqT%2Fuploads%2Fr5BYCJIPYUuVnrDIhSPX%2Fwhite-90.png?alt=media&#x26;token=4f237f9b-ae35-4aca-948d-af04d73434ab">white-90.png</a></td></tr><tr><td><strong>Shade 100</strong></td><td><pre class="language-css"><code class="lang-css">var(--white-100)
var(--black-0)
</code></pre></td><td><pre class="language-css"><code class="lang-css">hsl(0, 0%, 100%)
rgb(255, 255, 255)
#FFFFFF
</code></pre></td><td><a href="https://2502773477-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEkbtaLvopJ2OS43tkkqT%2Fuploads%2FVM5JZT1hMCs0UUUhNPJ5%2Fwhite-100.png?alt=media&#x26;token=95e3e0d4-5ca3-4111-87d9-88406949a1ea">white-100.png</a></td></tr></tbody></table>



