diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index 292e67890..f92121fbb 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/docs/assets/plugins/code-block/code-block.css
@@ -1,21 +1,21 @@
 .code-block {
   position: relative;
   border-radius: 3px;
-  background-color: var(--sl-color-gray-50);
+  background-color: rgb(var(--sl-color-gray-50));
   margin-bottom: 1.5rem;
 }
 
 .sl-theme-dark .code-block {
-  background-color: var(--sl-color-gray-200);
+  background-color: rgb(var(--sl-color-gray-200));
 }
 
 .code-block__preview {
   position: relative;
-  border: solid 1px var(--sl-color-gray-200);
+  border: solid 1px rgb(var(--sl-color-gray-200));
   border-bottom: none;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
-  background-color: var(--sl-color-white);
+  background-color: rgb(var(--sl-color-white));
   min-width: 20rem;
   max-width: 100%;
   padding: 1.5rem 3.25rem 1.5rem 1.5rem;
@@ -43,9 +43,9 @@
   bottom: 0;
   width: 1.75rem;
   font-size: 20px;
-  color: var(--sl-color-gray-500);
-  background-color: var(--sl-color-white);
-  border-left: solid 1px var(--sl-color-gray-200);
+  color: rgb(var(--sl-color-gray-500));
+  background-color: rgb(var(--sl-color-white));
+  border-left: solid 1px rgb(var(--sl-color-gray-200));
   border-top-right-radius: 3px;
   cursor: ew-resize;
   transition: 250ms background-color;
@@ -53,9 +53,10 @@
 
 .code-block__resizer:focus {
   outline: none;
-  box-shadow: 0 0 0 1px var(--sl-color-primary-400), 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-500);
+  box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)),
+    0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
+  background-color: rgb(var(--sl-color-primary-50));
+  color: rgb(var(--sl-color-primary-500));
   z-index: 2;
 }
 
@@ -70,7 +71,7 @@
 }
 
 .code-block__source {
-  border: solid 1px var(--sl-color-gray-200);
+  border: solid 1px rgb(var(--sl-color-gray-200));
   border-bottom: none;
   border-radius: 0 !important;
   margin: 0;
@@ -93,13 +94,13 @@
   justify-content: center;
   width: 100%;
   height: 2.5rem;
-  border: solid 1px var(--sl-color-gray-200);
+  border: solid 1px rgb(var(--sl-color-gray-200));
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  background: var(--sl-color-white);
+  background: rgb(var(--sl-color-white));
   font: inherit;
   font-size: 0.875rem;
-  color: var(--sl-color-gray-600);
+  color: rgb(var(--sl-color-gray-600));
   cursor: pointer;
   transition: 250ms background-color;
   -webkit-appearance: none;
@@ -107,16 +108,16 @@
 
 .code-block__toggle:hover,
 .code-block__toggle:active {
-  border-color: var(--sl-color-primary-400);
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-500);
+  border-color: rgb(var(--sl-color-primary-400));
+  background-color: rgb(var(--sl-color-primary-50));
+  color: rgb(var(--sl-color-primary-500));
 }
 
 .code-block__toggle:focus {
   outline: none;
-  border-color: var(--sl-color-primary-400);
-  background-color: var(--sl-color-primary-50);
-  color: var(--sl-color-primary-500);
+  border-color: rgb(var(--sl-color-primary-400));
+  background-color: rgb(var(--sl-color-primary-50));
+  color: rgb(var(--sl-color-primary-500));
   box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
 }
 
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 8afe60684..f56a21304 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -13,13 +13,13 @@ body {
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   letter-spacing: var(--sl-letter-spacing-normal);
-  background-color: var(--sl-color-white);
-  color: var(--sl-color-gray-800);
+  background-color: rgb(var(--sl-color-white));
+  color: rgb(var(--sl-color-gray-800));
   line-height: var(--sl-line-height-normal);
 }
 
 a {
-  color: var(--sl-color-primary-500);
+  color: rgb(var(--sl-color-primary-500));
 }
 
 strong {
@@ -28,8 +28,8 @@ strong {
 
 /* Sidebar */
 .sidebar {
-  background: var(--sl-color-white);
-  border-right: solid 1px var(--sl-color-gray-200);
+  background: rgb(var(--sl-color-white));
+  border-right: solid 1px rgb(var(--sl-color-gray-200));
 }
 
 .sidebar .app-name {
@@ -40,7 +40,7 @@ strong {
 .sidebar-version {
   font-size: var(--sl-font-size-x-small);
   font-weight: var(--sl-font-weight-normal);
-  color: var(--sl-color-gray-400);
+  color: rgb(var(--sl-color-gray-400));
   text-align: right;
   padding: 0 var(--sl-spacing-small);
   margin: -1.25rem 0 0.6rem 0;
@@ -58,10 +58,10 @@ strong {
 }
 
 .sidebar .search input[type='search'] {
-  background-color: var(--sl-input-background-color);
-  border: solid 1px var(--sl-input-border-color);
+  background-color: rgb(var(--sl-input-background-color));
+  border: solid 1px rgb(var(--sl-input-border-color));
   border-radius: var(--sl-border-radius-pill);
-  color: var(--sl-input-color);
+  color: rgb(var(--sl-input-color));
   padding-left: 1rem;
   padding-right: 2rem;
   margin: 0 1.25rem;
@@ -69,16 +69,16 @@ strong {
 }
 
 .sidebar .search input[type='search']:hover {
-  background-color: var(--sl-input-background-color-hover);
-  border-color: var(--sl-input-border-color-hover);
-  color: var(--sl-input-color-hover);
+  background-color: rgb(var(--sl-input-background-color-hover));
+  border-color: rgb(var(--sl-input-border-color-hover));
+  color: rgb(var(--sl-input-color-hover));
 }
 
 .sidebar .search input[type='search']:focus {
-  background-color: var(--sl-input-background-color-focus);
+  background-color: rgb(var(--sl-input-background-color-focus));
   box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
-  border-color: var(--sl-input-border-color-focus);
-  color: var(--sl-input-color-focus);
+  border-color: rgb(var(--sl-input-border-color-focus));
+  color: rgb(var(--sl-input-color-focus));
   outline: none;
 }
 
@@ -101,11 +101,11 @@ strong {
 }
 
 .sidebar .clear-button svg circle {
-  fill: var(--sl-color-gray-400);
+  fill: rgb(var(--sl-color-gray-400));
 }
 
 .sidebar .clear-button svg path {
-  stroke: var(--sl-color-white);
+  stroke: rgb(var(--sl-color-white));
 }
 
 .sidebar .clear-button:focus {
@@ -117,7 +117,7 @@ strong {
 }
 
 .search .matching-post {
-  border-bottom: solid 1px var(--sl-color-gray-500) !important;
+  border-bottom: solid 1px rgb(var(--sl-color-gray-500)) !important;
   padding: 0.25rem 1.5rem;
 }
 
@@ -142,7 +142,7 @@ strong {
   width: 2rem;
   height: 2rem;
   border-radius: var(--sl-border-radius-medium);
-  background-color: var(--sl-color-white);
+  background-color: rgb(var(--sl-color-white));
   padding: 0.5rem;
 }
 
@@ -183,12 +183,12 @@ strong {
 
 .sidebar-nav li.collapse > a,
 .sidebar-nav li.active > a {
-  color: var(--sl-color-primary-500);
+  color: rgb(var(--sl-color-primary-500));
 }
 
 .sidebar li > p {
   font-weight: var(--sl-font-weight-bold);
-  border-bottom: solid 1px var(--sl-color-gray-200);
+  border-bottom: solid 1px rgb(var(--sl-color-gray-200));
   margin: 0 0.75rem 0.5rem 0;
 }
 
@@ -269,12 +269,12 @@ strong {
 }
 
 .anchor span {
-  color: var(--sl-color-black);
+  color: rgb(var(--sl-color-black));
 }
 
 .markdown-section blockquote {
   position: relative;
-  border-left: solid 4px var(--sl-color-gray-200);
+  border-left: solid 4px rgb(var(--sl-color-gray-200));
   font-style: italic;
   padding: 1rem 1.5rem;
   margin: 0 0 1rem 0;
@@ -298,7 +298,7 @@ strong {
 }
 
 .docsify-pagination-container {
-  border-top-color: var(--sl-color-gray-200) !important;
+  border-top-color: rgb(var(--sl-color-gray-200)) !important;
 }
 
 .markdown-section h1,
@@ -317,7 +317,7 @@ strong {
 
 .markdown-section h2 {
   font-size: var(--sl-font-size-x-large);
-  border-bottom: solid 1px var(--sl-color-gray-200);
+  border-bottom: solid 1px rgb(var(--sl-color-gray-200));
   margin-top: 2rem;
 }
 
@@ -348,39 +348,39 @@ strong {
 .markdown-section code {
   font-family: var(--sl-font-mono);
   font-size: 87.5%;
-  background-color: var(--sl-color-gray-50);
+  background-color: rgb(var(--sl-color-gray-50));
   border-radius: var(--sl-border-radius-small);
   padding: 2px 4px;
 }
 
 .sl-theme-dark .markdown-section code {
-  background-color: var(--sl-color-gray-100);
+  background-color: rgb(var(--sl-color-gray-100));
 }
 
 .markdown-section kbd {
   font-family: var(--sl-font-mono);
   font-size: 87.5%;
   border-radius: var(--sl-border-radius-small);
-  border: solid 1px var(--sl-color-gray-200);
+  border: solid 1px rgb(var(--sl-color-gray-200));
   padding: 2px 4px;
 }
 
 /* Code blocks */
 .markdown-section pre {
   position: relative;
-  background-color: var(--sl-color-gray-50);
+  background-color: rgb(var(--sl-color-gray-50));
   border-radius: var(--sl-border-radius-medium);
 }
 
 .sl-theme-dark .markdown-section pre {
-  background-color: var(--sl-color-gray-100);
+  background-color: rgb(var(--sl-color-gray-100));
 }
 
 .markdown-section pre > code {
   display: block;
   background: none;
   border-radius: 0;
-  color: var(--sl-color-gray-700);
+  color: rgb(var(--sl-color-gray-700));
   padding: var(--sl-spacing-medium);
   overflow: auto;
   hyphens: none;
@@ -388,18 +388,18 @@ strong {
 }
 
 .markdown-section pre .token.comment {
-  color: var(--sl-color-gray-400);
+  color: rgb(var(--sl-color-gray-400));
 }
 
 .markdown-section pre .token.prolog,
 .markdown-section pre .token.doctype,
 .markdown-section pre .token.cdata,
 .markdown-section pre .token.operator {
-  color: var(--sl-color-gray-600);
+  color: rgb(var(--sl-color-gray-600));
 }
 
 .markdown-section pre .token.punctuation {
-  color: var(--sl-color-gray-600);
+  color: rgb(var(--sl-color-gray-600));
 }
 
 .namespace {
@@ -410,12 +410,12 @@ strong {
 .markdown-section pre .token.keyword,
 .markdown-section pre .token.tag,
 .markdown-section pre .token.url {
-  color: var(--sl-color-sky-600);
+  color: rgb(var(--sl-color-sky-600));
 }
 
 .markdown-section pre .token.symbol,
 .markdown-section pre .token.deleted {
-  color: #f92672;
+  color: rgb(var(--sl-color-pink-600));
 }
 
 .markdown-section pre .token.boolean,
@@ -426,24 +426,24 @@ strong {
 .markdown-section pre .token.char,
 .markdown-section pre .token.builtin,
 .markdown-section pre .token.inserted {
-  color: var(--sl-color-emerald-600);
+  color: rgb(var(--sl-color-emerald-600));
 }
 
 .markdown-section pre .token.atrule,
 .markdown-section pre .token.attr-value,
 .markdown-section pre .token.number,
 .markdown-section pre .token.variable {
-  color: var(--sl-color-violet-600);
+  color: rgb(var(--sl-color-violet-600));
 }
 
 .markdown-section pre .token.function,
 .markdown-section pre .token.class-name,
 .markdown-section pre .token.regex {
-  color: var(--sl-color-orange-600);
+  color: rgb(var(--sl-color-orange-600));
 }
 
 .markdown-section pre .token.important {
-  color: var(--sl-color-red-600);
+  color: rgb(var(--sl-color-red-600));
 }
 
 .markdown-section pre .token.important,
@@ -466,11 +466,11 @@ strong {
 }
 
 .markdown-section tr:nth-child(2n) {
-  background: var(--sl-color-gray-50);
+  background: rgb(var(--sl-color-gray-50));
 }
 
 .sl-theme-dark .markdown-section tr:nth-child(2n) {
-  background: var(--sl-color-gray-100);
+  background: rgb(var(--sl-color-gray-100));
 }
 
 .markdown-section th {
@@ -480,8 +480,8 @@ strong {
 }
 
 .markdown-section td {
-  border-top: solid 1px var(--sl-color-gray-200);
-  border-bottom: solid 1px var(--sl-color-gray-200);
+  border-top: solid 1px rgb(var(--sl-color-gray-200));
+  border-bottom: solid 1px rgb(var(--sl-color-gray-200));
   border-left: none;
   border-right: none;
 }
@@ -499,7 +499,7 @@ strong {
 .markdown-section p.tip,
 .markdown-section p.warn {
   position: relative;
-  background-color: var(--sl-color-gray-50);
+  background-color: rgb(var(--sl-color-gray-50));
   border-left: solid 4px transparent;
   border-radius: var(--sl-border-radius-medium);
   padding-left: 1.5rem;
@@ -507,14 +507,14 @@ strong {
 
 .sl-theme-dark .markdown-section p.tip,
 .sl-theme-dark .markdown-section p.warn {
-  background-color: var(--sl-color-gray-100);
+  background-color: rgb(var(--sl-color-gray-100));
 }
 
 .markdown-section p.tip:before,
 .markdown-section p.warn:before {
   content: '!';
   border-radius: 100%;
-  color: var(--sl-color-white);
+  color: rgb(var(--sl-color-white));
   font-size: 14px;
   font-weight: bold;
   left: -12px;
@@ -527,29 +527,29 @@ strong {
 }
 
 .markdown-section p.warn {
-  border-left-color: var(--sl-color-primary-500);
+  border-left-color: rgb(var(--sl-color-primary-500));
 }
 
 .markdown-section p.warn:before {
-  background-color: var(--sl-color-primary-500);
+  background-color: rgb(var(--sl-color-primary-500));
 }
 
 .markdown-section p.tip {
-  border-left-color: var(--sl-color-danger-500);
+  border-left-color: rgb(var(--sl-color-danger-500));
 }
 
 .markdown-section p.tip:before {
-  background-color: var(--sl-color-danger-500);
+  background-color: rgb(var(--sl-color-danger-500));
 }
 
 .markdown-section p.tip code,
 .markdown-section p.warn code {
-  background-color: var(--sl-color-gray-100);
+  background-color: rgb(var(--sl-color-gray-100));
 }
 
 /* Component headers */
 .component-header {
-  border-bottom: solid 1px var(--sl-color-gray-200);
+  border-bottom: solid 1px rgb(var(--sl-color-gray-200));
   padding-bottom: 2rem;
   margin-top: -1rem;
   margin-bottom: 2rem;
@@ -563,7 +563,7 @@ strong {
 
 .component-header__tag code {
   background: none;
-  color: var(--sl-color-gray-500);
+  color: rgb(var(--sl-color-gray-500));
   font-size: var(--sl-font-size-large);
   padding: 0;
   margin: 0;
@@ -590,15 +590,15 @@ strong {
 html .repo-button {
   display: inline-flex;
   align-items: center;
-  background-color: var(--sl-color-white);
-  border: solid 1px var(--sl-color-gray-200);
+  background-color: rgb(var(--sl-color-white));
+  border: solid 1px rgb(var(--sl-color-gray-200));
   border-radius: var(--sl-border-radius-medium);
   box-shadow: var(--sl-shadow-x-small);
   font-size: var(--sl-font-size-small);
   font-weight: var(--sl-font-weight-semibold);
   line-height: 2;
   text-decoration: none;
-  color: var(--sl-color-gray-700);
+  color: rgb(var(--sl-color-gray-700));
   padding: var(--sl-spacing-xx-small) var(--sl-spacing-small);
   margin-bottom: var(--sl-spacing-xx-small);
   transition: 0.25s all;
@@ -606,17 +606,17 @@ html .repo-button {
 
 html .repo-button:hover {
   text-decoration: none;
-  background-color: var(--sl-color-gray-50);
-  border: solid 1px var(--sl-color-gray-200);
+  background-color: rgb(var(--sl-color-gray-50));
+  border: solid 1px rgb(var(--sl-color-gray-200));
 }
 
 .sl-theme-dark .repo-button:hover {
-  background-color: var(--sl-color-gray-100);
+  background-color: rgb(var(--sl-color-gray-100));
 }
 
 html .repo-button:focus {
   outline: none;
-  border-color: var(--sl-color-primary-500);
+  border-color: rgb(var(--sl-color-primary-500));
   box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
 }
 
@@ -636,15 +636,15 @@ html .repo-button--small {
 }
 
 html .repo-button--sponsor sl-icon {
-  color: var(--sl-color-pink-500);
+  color: rgb(var(--sl-color-pink-500));
 }
 
 html .repo-button--github sl-icon {
-  color: var(--sl-color-gray-600);
+  color: rgb(var(--sl-color-gray-600));
 }
 
 html .repo-button--twitter sl-icon {
-  color: var(--sl-color-sky-500);
+  color: rgb(var(--sl-color-sky-500));
 }
 
 body[data-page^='tokens/'] .table-wrapper td:first-child,
@@ -656,13 +656,13 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 .border-radius-demo {
   width: 3rem;
   height: 3rem;
-  background: var(--sl-color-primary-500);
+  background: rgb(var(--sl-color-primary-500));
 }
 
 /* Transition demo */
 .transition-demo {
   position: relative;
-  background: var(--sl-color-gray-200);
+  background: rgb(var(--sl-color-gray-200));
   width: 8rem;
   height: 2rem;
 }
@@ -670,7 +670,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 .transition-demo:after {
   content: '';
   position: absolute;
-  background-color: var(--sl-color-primary-500);
+  background-color: rgb(var(--sl-color-primary-500));
   top: 0;
   left: 0;
   width: 0;
@@ -686,12 +686,12 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 /* Spacing demo */
 .spacing-demo {
   width: 100px;
-  background: var(--sl-color-primary-500);
+  background: rgb(var(--sl-color-primary-500));
 }
 
 /* Elevation dmeo */
 .elevation-demo {
-  background: var(--sl-color-white);
+  background: rgb(var(--sl-color-white));
   border-radius: 3px;
   width: 4rem;
   height: 4rem;
diff --git a/docs/components/animation.md b/docs/components/animation.md
index fa78af388..f4b08c1c0 100644
--- a/docs/components/animation.md
+++ b/docs/components/animation.md
@@ -19,7 +19,7 @@ To animate an element, wrap it in `<sl-animation>` and set an animation `name`.
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-primary-500));
     margin: 1.5rem;
   }
 </style>
@@ -83,7 +83,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
   .animation-sandbox .box {
     width: 100px;
     height: 100px;
-    background-color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-primary-500));
   }
 
   .animation-sandbox .controls {
@@ -129,7 +129,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-primary-500));
   }  
 </style>
 ```
@@ -169,7 +169,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
   .animation-keyframes .box {
     width: 100px;
     height: 100px;
-    background-color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-primary-500));
   }
 </style>
 ```
diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index 03eb128d7..a7dd413a5 100644
--- a/docs/components/avatar.md
+++ b/docs/components/avatar.md
@@ -78,7 +78,7 @@ You can group avatars with a few lines of CSS.
   }
 
   .avatar-group sl-avatar::part(base) {
-    border: solid 2px var(--sl-color-white);
+    border: solid 2px rgb(var(--sl-color-white));
   }
 </style>
 ```
diff --git a/docs/components/badge.md b/docs/components/badge.md
index f231efee8..a34e4d462 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -80,7 +80,7 @@ One of the most common use cases for badges is attaching them to buttons. To mak
 When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
 
 ```html preview
-<sl-menu style="max-width: 240px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);">
+<sl-menu style="max-width: 240px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
   <sl-menu-label>Messages</sl-menu-label>
   <sl-menu-item>Comments <sl-badge slot="suffix" type="info" pill>4</sl-badge></sl-menu-item>
   <sl-menu-item>Replies <sl-badge slot="suffix" type="info" pill>12</sl-badge></sl-menu-item>
diff --git a/docs/components/card.md b/docs/components/card.md
index 5ec2ae09b..040994573 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -28,7 +28,7 @@ Cards can be used to group related subjects in a container.
   }
 
   .card-overview small {
-    color: var(--sl-color-gray-500);
+    color: rgb(var(--sl-color-gray-500));
   }
 
   .card-overview [slot="footer"] {
diff --git a/docs/components/dialog.md b/docs/components/dialog.md
index 7a6adceb2..1e27e6b4c 100644
--- a/docs/components/dialog.md
+++ b/docs/components/dialog.md
@@ -58,7 +58,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
 
 ```html preview
 <sl-dialog label="Dialog" class="dialog-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--sl-color-gray-200); padding: 0 1rem;">
+  <div style="height: 150vh; border: dashed 2px rgb(var(--sl-color-gray-200)); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
   <sl-button slot="footer" type="primary">Close</sl-button>
diff --git a/docs/components/drawer.md b/docs/components/drawer.md
index f6a880b1f..7c32db5aa 100644
--- a/docs/components/drawer.md
+++ b/docs/components/drawer.md
@@ -96,7 +96,7 @@ By default, the drawer slides out of its [containing block](https://developer.mo
 
 ```html preview
 <div
-  style="position: relative; border: solid 2px var(--sl-panel-border-color); height: 300px; padding: 1rem; margin-bottom: 1rem;"
+  style="position: relative; border: solid 2px rgb(var(--sl-panel-border-color)); height: 300px; padding: 1rem; margin-bottom: 1rem;"
 >
   The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
 
@@ -146,7 +146,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
 
 ```html preview
 <sl-drawer label="Drawer" class="drawer-scrolling">
-  <div style="height: 150vh; border: dashed 2px var(--sl-color-gray-200); padding: 0 1rem;">
+  <div style="height: 150vh; border: dashed 2px rgb(var(--sl-color-gray-200)); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
   <sl-button slot="footer" type="primary">Close</sl-button>
diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index ce972c1f4..9df15d5df 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -114,7 +114,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
 
 <style>
   .dropdown-hoist {
-    border: solid 2px var(--sl-panel-border-color);
+    border: solid 2px rgb(var(--sl-panel-border-color));
     padding: var(--sl-spacing-medium);
     overflow: hidden;
   }
diff --git a/docs/components/form.md b/docs/components/form.md
index ba9312e2e..992a41eb7 100644
--- a/docs/components/form.md
+++ b/docs/components/form.md
@@ -179,11 +179,11 @@ The `invalid` attribute reflects the form control's validity, so you can style i
 <style>
   .custom-input[invalid]:not([disabled])::part(label),
   .custom-input[invalid]:not([disabled])::part(help-text) {
-    color: var(--sl-color-danger-600);
+    color: rgb(var(--sl-color-danger-600));
   }
 
   .custom-input[invalid]:not([disabled])::part(base) {      
-    border-color: var(--sl-color-danger-500);
+    border-color: rgb(var(--sl-color-danger-500));
   } 
 
   .custom-input[invalid] {
diff --git a/docs/components/icon.md b/docs/components/icon.md
index f8872f984..f1f6b8bdb 100644
--- a/docs/components/icon.md
+++ b/docs/components/icon.md
@@ -558,7 +558,7 @@ If you want to change the icons Shoelace uses internally, you can register an ic
 
 <style>
   .icon-search {
-    border: solid 1px var(--sl-panel-border-color);
+    border: solid 1px rgb(var(--sl-panel-border-color));
     border-radius: var(--sl-border-radius-medium);
     padding: var(--sl-spacing-medium);
   }
@@ -614,8 +614,8 @@ If you want to change the icons Shoelace uses internally, you can register an ic
   }
 
   .icon-list-item:hover {
-    background-color: var(--sl-color-primary-50);
-    color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-primary-50));
+    color: rgb(var(--sl-color-primary-500));
   }
 
   .icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {
diff --git a/docs/components/menu-divider.md b/docs/components/menu-divider.md
index 1fed37445..68281b92d 100644
--- a/docs/components/menu-divider.md
+++ b/docs/components/menu-divider.md
@@ -6,7 +6,7 @@ Menu dividers are used to visually group menu items.
 
 ```html preview
 <sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
+  style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);"
 >
   <sl-menu-item value="1">Option 1</sl-menu-item>
   <sl-menu-item value="2">Option 2</sl-menu-item>
diff --git a/docs/components/menu-item.md b/docs/components/menu-item.md
index 64603f79a..d20ce6d70 100644
--- a/docs/components/menu-item.md
+++ b/docs/components/menu-item.md
@@ -6,7 +6,7 @@ Menu items provide options for the user to pick from in a menu.
 
 ```html preview
 <sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
+  style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);"
 >
   <sl-menu-item>Option 1</sl-menu-item>
   <sl-menu-item>Option 2</sl-menu-item>
diff --git a/docs/components/menu-label.md b/docs/components/menu-label.md
index 6ce16aaea..050e9b25d 100644
--- a/docs/components/menu-label.md
+++ b/docs/components/menu-label.md
@@ -6,7 +6,7 @@ Menu labels are used to describe a group of menu items.
 
 ```html preview
 <sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
+  style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);"
 >
   <sl-menu-label>Fruits</sl-menu-label>
   <sl-menu-item value="apple">Apple</sl-menu-item>
diff --git a/docs/components/menu.md b/docs/components/menu.md
index e0de3199b..ed8be0961 100644
--- a/docs/components/menu.md
+++ b/docs/components/menu.md
@@ -7,7 +7,7 @@ Menus provide a list of options for the user to choose from.
 You can use [menu items](/components/menu-item), [menu dividers](/components/menu-divider), and [menu labels](/components/menu-label) to compose a menu. Menus support keyboard interactions, including type-to-select an option.
 
 ```html preview
-<sl-menu style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);">
+<sl-menu style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
   <sl-menu-item value="undo">Undo</sl-menu-item>
   <sl-menu-item value="redo">Redo</sl-menu-item>
   <sl-menu-divider></sl-menu-divider>
diff --git a/docs/components/resize-observer.md b/docs/components/resize-observer.md
index 98db040d1..32f3c9684 100644
--- a/docs/components/resize-observer.md
+++ b/docs/components/resize-observer.md
@@ -27,7 +27,7 @@ The resize observer will report changes to the dimensions of the elements it wra
 <style>
   .resize-observer-overview div {
     display: flex; 
-    border: solid 2px var(--sl-input-border-color); 
+    border: solid 2px rgb(var(--sl-input-border-color)); 
     align-items: center; 
     justify-content: center;
     text-align: center;
diff --git a/docs/resources/contributing.md b/docs/resources/contributing.md
index 06dde3794..54d825097 100644
--- a/docs/resources/contributing.md
+++ b/docs/resources/contributing.md
@@ -215,8 +215,8 @@ To expose custom properties as part of a component's API, scope them to the `:ho
 
 ```css
 :host {
-  --color: var(--sl-color-primary-500);
-  --background-color: var(--sl-color-gray-100);
+  --color: rgb(var(--sl-color-primary-500));
+  --background-color: rgb(var(--sl-color-gray-100));
 }
 ```
 
diff --git a/docs/tokens/color.md b/docs/tokens/color.md
index 1e1df0477..81d169a8e 100644
--- a/docs/tokens/color.md
+++ b/docs/tokens/color.md
@@ -13,81 +13,81 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
     Primary<br>
     <code>--sl-color-primary-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-primary-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Success<br>
     <code>--sl-color-success-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-success-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Info<br>
     <code>--sl-color-info-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-info-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Warning<br>
     <code>--sl-color-warning-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warning-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Danger<br>
     <code>--sl-color-danger-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-danger-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-1000));"></div>1000</div>
 </div>
 
 ## Primitives
@@ -99,352 +99,352 @@ Additional palettes are provided in the form of color primitives. Use these when
     Blue Gray<br>
     <code>--sl-color-blue-gray-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-gray-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Cool Gray<br>
     <code>--sl-color-cool-gray-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cool-gray-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Gray<br>
     <code>--sl-color-gray-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-900);"></div>900</div>  
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-gray-1000);"></div>1000</div>  
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-900));"></div>900</div>  
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-1000));"></div>1000</div>  
 
   <div class="color-palette__name">
     True Gray<br>
     <code>--sl-color-true-gray-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-true-gray-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Warm Gray<br>
     <code>--sl-color-warm-gray-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-warm-gray-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Red<br>
     <code>--sl-color-red-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-red-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Orange<br>
     <code>--sl-color-orange-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-orange-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Amber<br>
     <code>--sl-color-amber-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-amber-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Yellow<br>
     <code>--sl-color-yellow-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-yellow-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Lime<br>
     <code>--sl-color-lime-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-lime-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Green<br>
     <code>--sl-color-green-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-green-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Emerald<br>
     <code>--sl-color-emerald-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-emerald-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Teal<br>
     <code>--sl-color-teal-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-teal-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Cyan<br>
     <code>--sl-color-cyan-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-cyan-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Sky<br>
     <code>--sl-color-sky-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-sky-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Blue<br>
     <code>--sl-color-blue-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-blue-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Indigo<br>
     <code>--sl-color-indigo-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-indigo-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Violet<br>
     <code>--sl-color-violet-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-violet-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Purple<br>
     <code>--sl-color-purple-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-purple-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Fuchsia<br>
     <code>--sl-color-fuchsia-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-fuchsia-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Pink<br>
     <code>--sl-color-pink-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-pink-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-1000));"></div>1000</div>
 
   <div class="color-palette__name">
     Rose<br>
     <code>--sl-color-rose-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-50);"></div>50</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-100);"></div>100</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-200);"></div>200</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-300);"></div>300</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-400);"></div>400</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-500);"></div>500</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-600);"></div>600</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-700);"></div>700</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-800);"></div>800</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-900);"></div>900</div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: var(--sl-color-rose-1000);"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-50));"></div>50</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-100));"></div>100</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-200));"></div>200</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-300));"></div>300</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-400));"></div>400</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-500));"></div>500</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-600));"></div>600</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-700));"></div>700</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-800));"></div>800</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-900));"></div>900</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-1000));"></div>1000</div>
 </div>
 
diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index 233fb3adc..1125d7f53 100644
--- a/src/components/alert/alert.styles.ts
+++ b/src/components/alert/alert.styles.ts
@@ -15,8 +15,8 @@ export default css`
     position: relative;
     display: flex;
     align-items: stretch;
-    background-color: var(--sl-color-white);
-    border: solid 1px var(--sl-color-gray-200);
+    background-color: rgb(var(--sl-color-white));
+    border: solid 1px rgb(var(--sl-color-gray-200));
     border-top-width: 3px;
     border-radius: var(--sl-border-radius-medium);
     box-shadow: var(--box-shadow);
@@ -24,7 +24,7 @@ export default css`
     font-size: var(--sl-font-size-small);
     font-weight: var(--sl-font-weight-normal);
     line-height: 1.6;
-    color: var(--sl-color-gray-700);
+    color: rgb(var(--sl-color-gray-700));
     margin: inherit;
   }
 
@@ -40,43 +40,43 @@ export default css`
   }
 
   .alert--primary {
-    border-top-color: var(--sl-color-primary-500);
+    border-top-color: rgb(var(--sl-color-primary-500));
   }
 
   .alert--primary .alert__icon {
-    color: var(--sl-color-primary-500);
+    color: rgb(var(--sl-color-primary-500));
   }
 
   .alert--success {
-    border-top-color: var(--sl-color-success-500);
+    border-top-color: rgb(var(--sl-color-success-500));
   }
 
   .alert--success .alert__icon {
-    color: var(--sl-color-success-500);
+    color: rgb(var(--sl-color-success-500));
   }
 
   .alert--info {
-    border-top-color: var(--sl-color-info-500);
+    border-top-color: rgb(var(--sl-color-info-500));
   }
 
   .alert--info .alert__icon {
-    color: var(--sl-color-info-500);
+    color: rgb(var(--sl-color-info-500));
   }
 
   .alert--warning {
-    border-top-color: var(--sl-color-warning-500);
+    border-top-color: rgb(var(--sl-color-warning-500));
   }
 
   .alert--warning .alert__icon {
-    color: var(--sl-color-warning-500);
+    color: rgb(var(--sl-color-warning-500));
   }
 
   .alert--danger {
-    border-top-color: var(--sl-color-danger-500);
+    border-top-color: rgb(var(--sl-color-danger-500));
   }
 
   .alert--danger .alert__icon {
-    color: var(--sl-color-danger-500);
+    color: rgb(var(--sl-color-danger-500));
   }
 
   .alert__message {
diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts
index 815d4318f..121b6232f 100644
--- a/src/components/avatar/avatar.styles.ts
+++ b/src/components/avatar/avatar.styles.ts
@@ -17,11 +17,11 @@ export default css`
     position: relative;
     width: var(--size);
     height: var(--size);
-    background-color: var(--sl-color-gray-400);
+    background-color: rgb(var(--sl-color-gray-400));
     font-family: var(--sl-font-sans);
     font-size: calc(var(--size) * 0.5);
     font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-white);
+    color: rgb(var(--sl-color-white));
     overflow: hidden;
     user-select: none;
     vertical-align: middle;
diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts
index 2de816777..79ddfb433 100644
--- a/src/components/badge/badge.styles.ts
+++ b/src/components/badge/badge.styles.ts
@@ -25,28 +25,28 @@ export default css`
 
   /* Type modifiers */
   .badge--primary {
-    background-color: var(--sl-color-primary-500);
-    color: var(--sl-color-primary-text);
+    background-color: rgb(var(--sl-color-primary-500));
+    color: rgb(var(--sl-color-primary-text));
   }
 
   .badge--success {
-    background-color: var(--sl-color-success-500);
-    color: var(--sl-color-success-text);
+    background-color: rgb(var(--sl-color-success-500));
+    color: rgb(var(--sl-color-success-text));
   }
 
   .badge--info {
-    background-color: var(--sl-color-info-500);
-    color: var(--sl-color-info-text);
+    background-color: rgb(var(--sl-color-info-500));
+    color: rgb(var(--sl-color-info-text));
   }
 
   .badge--warning {
-    background-color: var(--sl-color-warning-500);
-    color: var(--sl-color-warning-text);
+    background-color: rgb(var(--sl-color-warning-500));
+    color: rgb(var(--sl-color-warning-text));
   }
 
   .badge--danger {
-    background-color: var(--sl-color-danger-500);
-    color: var(--sl-color-danger-text);
+    background-color: rgb(var(--sl-color-danger-500));
+    color: rgb(var(--sl-color-danger-text));
   }
 
   /* Pill modifier */
@@ -60,23 +60,23 @@ export default css`
   }
 
   .badge--pulse.badge--primary {
-    --pulse-color: var(--sl-color-primary-500);
+    --pulse-color: rgb(var(--sl-color-primary-500));
   }
 
   .badge--pulse.badge--success {
-    --pulse-color: var(--sl-color-success-500);
+    --pulse-color: rgb(var(--sl-color-success-500));
   }
 
   .badge--pulse.badge--info {
-    --pulse-color: var(--sl-color-info-500);
+    --pulse-color: rgb(var(--sl-color-info-500));
   }
 
   .badge--pulse.badge--warning {
-    --pulse-color: var(--sl-color-warning-500);
+    --pulse-color: rgb(var(--sl-color-warning-500));
   }
 
   .badge--pulse.badge--danger {
-    --pulse-color: var(--sl-color-danger-500);
+    --pulse-color: rgb(var(--sl-color-danger-500));
   }
 
   @keyframes pulse {
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index aea41b2c2..355adb4e9 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -69,157 +69,157 @@ export default css`
 
   /* Default */
   .button.button--default {
-    background-color: var(--sl-color-white);
-    border-color: var(--sl-color-gray-300);
-    color: var(--sl-color-gray-600);
+    background-color: rgb(var(--sl-color-white));
+    border-color: rgb(var(--sl-color-gray-300));
+    color: rgb(var(--sl-color-gray-600));
   }
 
   .button.button--default:hover:not(.button--disabled) {
-    background-color: var(--sl-color-primary-50);
-    border-color: var(--sl-color-primary-300);
-    color: var(--sl-color-primary-600);
+    background-color: rgb(var(--sl-color-primary-50));
+    border-color: rgb(var(--sl-color-primary-300));
+    color: rgb(var(--sl-color-primary-600));
   }
 
   .button.button--default:focus:not(.button--disabled) {
-    background-color: var(--sl-color-primary-50);
-    border-color: var(--sl-color-primary-300);
-    color: var(--sl-color-primary-600);
+    background-color: rgb(var(--sl-color-primary-50));
+    border-color: rgb(var(--sl-color-primary-300));
+    color: rgb(var(--sl-color-primary-600));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
   .button.button--default:active:not(.button--disabled) {
-    background-color: var(--sl-color-primary-100);
-    border-color: var(--sl-color-primary-400);
-    color: var(--sl-color-primary-700);
+    background-color: rgb(var(--sl-color-primary-100));
+    border-color: rgb(var(--sl-color-primary-400));
+    color: rgb(var(--sl-color-primary-700));
   }
 
   /* Primary */
   .button.button--primary {
-    background-color: var(--sl-color-primary-500);
-    border-color: var(--sl-color-primary-500);
-    color: var(--sl-color-primary-text);
+    background-color: rgb(var(--sl-color-primary-500));
+    border-color: rgb(var(--sl-color-primary-500));
+    color: rgb(var(--sl-color-primary-text));
   }
 
   .button.button--primary:hover:not(.button--disabled) {
-    background-color: var(--sl-color-primary-400);
-    border-color: var(--sl-color-primary-400);
-    color: var(--sl-color-primary-text);
+    background-color: rgb(var(--sl-color-primary-400));
+    border-color: rgb(var(--sl-color-primary-400));
+    color: rgb(var(--sl-color-primary-text));
   }
 
   .button.button--primary:focus:not(.button--disabled) {
-    background-color: var(--sl-color-primary-400);
-    border-color: var(--sl-color-primary-400);
-    color: var(--sl-color-primary-text);
+    background-color: rgb(var(--sl-color-primary-400));
+    border-color: rgb(var(--sl-color-primary-400));
+    color: rgb(var(--sl-color-primary-text));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
   .button.button--primary:active:not(.button--disabled) {
-    background-color: var(--sl-color-primary-500);
-    border-color: var(--sl-color-primary-500);
-    color: var(--sl-color-primary-text);
+    background-color: rgb(var(--sl-color-primary-500));
+    border-color: rgb(var(--sl-color-primary-500));
+    color: rgb(var(--sl-color-primary-text));
   }
 
   /* Success */
   .button.button--success {
-    background-color: var(--sl-color-success-500);
-    border-color: var(--sl-color-success-500);
-    color: var(--sl-color-success-text);
+    background-color: rgb(var(--sl-color-success-500));
+    border-color: rgb(var(--sl-color-success-500));
+    color: rgb(var(--sl-color-success-text));
   }
 
   .button.button--success:hover:not(.button--disabled) {
-    background-color: var(--sl-color-success-400);
-    border-color: var(--sl-color-success-400);
-    color: var(--sl-color-success-text);
+    background-color: rgb(var(--sl-color-success-400));
+    border-color: rgb(var(--sl-color-success-400));
+    color: rgb(var(--sl-color-success-text));
   }
 
   .button.button--success:focus:not(.button--disabled) {
-    background-color: var(--sl-color-success-400);
-    border-color: var(--sl-color-success-400);
-    color: var(--sl-color-success-text);
+    background-color: rgb(var(--sl-color-success-400));
+    border-color: rgb(var(--sl-color-success-400));
+    color: rgb(var(--sl-color-success-text));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-success);
   }
 
   .button.button--success:active:not(.button--disabled) {
-    background-color: var(--sl-color-success-500);
-    border-color: var(--sl-color-success-500);
-    color: var(--sl-color-success-text);
+    background-color: rgb(var(--sl-color-success-500));
+    border-color: rgb(var(--sl-color-success-500));
+    color: rgb(var(--sl-color-success-text));
   }
 
   /* Info */
   .button.button--info {
-    background-color: var(--sl-color-info-500);
-    border-color: var(--sl-color-info-500);
-    color: var(--sl-color-info-text);
+    background-color: rgb(var(--sl-color-info-500));
+    border-color: rgb(var(--sl-color-info-500));
+    color: rgb(var(--sl-color-info-text));
   }
 
   .button.button--info:hover:not(.button--disabled) {
-    background-color: var(--sl-color-info-400);
-    border-color: var(--sl-color-info-400);
-    color: var(--sl-color-info-text);
+    background-color: rgb(var(--sl-color-info-400));
+    border-color: rgb(var(--sl-color-info-400));
+    color: rgb(var(--sl-color-info-text));
   }
 
   .button.button--info:focus:not(.button--disabled) {
-    background-color: var(--sl-color-info-400);
-    border-color: var(--sl-color-info-400);
-    color: var(--sl-color-info-text);
+    background-color: rgb(var(--sl-color-info-400));
+    border-color: rgb(var(--sl-color-info-400));
+    color: rgb(var(--sl-color-info-text));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-info);
   }
 
   .button.button--info:active:not(.button--disabled) {
-    background-color: var(--sl-color-info-500);
-    border-color: var(--sl-color-info-500);
-    color: var(--sl-color-info-text);
+    background-color: rgb(var(--sl-color-info-500));
+    border-color: rgb(var(--sl-color-info-500));
+    color: rgb(var(--sl-color-info-text));
   }
 
   /* Warning */
   .button.button--warning {
-    background-color: var(--sl-color-warning-500);
-    border-color: var(--sl-color-warning-500);
-    color: var(--sl-color-warning-text);
+    background-color: rgb(var(--sl-color-warning-500));
+    border-color: rgb(var(--sl-color-warning-500));
+    color: rgb(var(--sl-color-warning-text));
   }
   .button.button--warning:hover:not(.button--disabled) {
-    background-color: var(--sl-color-warning-400);
-    border-color: var(--sl-color-warning-400);
-    color: var(--sl-color-warning-text);
+    background-color: rgb(var(--sl-color-warning-400));
+    border-color: rgb(var(--sl-color-warning-400));
+    color: rgb(var(--sl-color-warning-text));
   }
 
   .button.button--warning:focus:not(.button--disabled) {
-    background-color: var(--sl-color-warning-400);
-    border-color: var(--sl-color-warning-400);
-    color: var(--sl-color-warning-text);
+    background-color: rgb(var(--sl-color-warning-400));
+    border-color: rgb(var(--sl-color-warning-400));
+    color: rgb(var(--sl-color-warning-text));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-warning);
   }
 
   .button.button--warning:active:not(.button--disabled) {
-    background-color: var(--sl-color-warning-500);
-    border-color: var(--sl-color-warning-500);
-    color: var(--sl-color-warning-text);
+    background-color: rgb(var(--sl-color-warning-500));
+    border-color: rgb(var(--sl-color-warning-500));
+    color: rgb(var(--sl-color-warning-text));
   }
 
   /* Danger */
   .button.button--danger {
-    background-color: var(--sl-color-danger-500);
-    border-color: var(--sl-color-danger-500);
-    color: var(--sl-color-danger-text);
+    background-color: rgb(var(--sl-color-danger-500));
+    border-color: rgb(var(--sl-color-danger-500));
+    color: rgb(var(--sl-color-danger-text));
   }
 
   .button.button--danger:hover:not(.button--disabled) {
-    background-color: var(--sl-color-danger-400);
-    border-color: var(--sl-color-danger-400);
-    color: var(--sl-color-danger-text);
+    background-color: rgb(var(--sl-color-danger-400));
+    border-color: rgb(var(--sl-color-danger-400));
+    color: rgb(var(--sl-color-danger-text));
   }
 
   .button.button--danger:focus:not(.button--disabled) {
-    background-color: var(--sl-color-danger-400);
-    border-color: var(--sl-color-danger-400);
-    color: var(--sl-color-danger-text);
+    background-color: rgb(var(--sl-color-danger-400));
+    border-color: rgb(var(--sl-color-danger-400));
+    color: rgb(var(--sl-color-danger-text));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-danger);
   }
 
   .button.button--danger:active:not(.button--disabled) {
-    background-color: var(--sl-color-danger-500);
-    border-color: var(--sl-color-danger-500);
-    color: var(--sl-color-danger-text);
+    background-color: rgb(var(--sl-color-danger-500));
+    border-color: rgb(var(--sl-color-danger-500));
+    color: rgb(var(--sl-color-danger-text));
   }
 
   /*
@@ -229,26 +229,26 @@ export default css`
   .button--text {
     background-color: transparent;
     border-color: transparent;
-    color: var(--sl-color-primary-500);
+    color: rgb(var(--sl-color-primary-500));
   }
 
   .button--text:hover:not(.button--disabled) {
     background-color: transparent;
     border-color: transparent;
-    color: var(--sl-color-primary-400);
+    color: rgb(var(--sl-color-primary-400));
   }
 
   .button--text:focus:not(.button--disabled) {
     background-color: transparent;
     border-color: transparent;
-    color: var(--sl-color-primary-400);
+    color: rgb(var(--sl-color-primary-400));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
   .button--text:active:not(.button--disabled) {
     background-color: transparent;
     border-color: transparent;
-    color: var(--sl-color-primary-600);
+    color: rgb(var(--sl-color-primary-600));
   }
 
   /*
@@ -482,8 +482,7 @@ export default css`
     top: 0;
     left: 0;
     bottom: 0;
-    border-left: solid 1px #fff4;
-    mix-blend-mode: lighten;
+    border-left: solid 1px rgb(var(--sl-color-white) / 20%);
   }
 
   /* Bump focused buttons up so their focus ring isn't clipped */
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
index 7256850a8..9ad0783fb 100644
--- a/src/components/card/card.styles.ts
+++ b/src/components/card/card.styles.ts
@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --border-color: var(--sl-color-gray-200);
+    --border-color: rgb(var(--sl-color-gray-200));
     --border-radius: var(--sl-border-radius-medium);
     --border-width: 1px;
     --padding: var(--sl-spacing-large);
@@ -16,7 +16,7 @@ export default css`
   .card {
     display: flex;
     flex-direction: column;
-    background-color: var(--sl-color-white);
+    background-color: rgb(var(--sl-color-white));
     box-shadow: var(--sl-shadow-x-small);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index 42d22c629..ceee2599d 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -14,7 +14,7 @@ export default css`
     font-family: var(--sl-input-font-family);
     font-size: var(--sl-input-font-size-medium);
     font-weight: var(--sl-input-font-weight);
-    color: var(--sl-input-color);
+    color: rgb(var(--sl-input-color));
     vertical-align: middle;
     cursor: pointer;
   }
@@ -27,10 +27,10 @@ export default css`
     justify-content: center;
     width: var(--sl-toggle-size);
     height: var(--sl-toggle-size);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     border-radius: 2px;
-    background-color: var(--sl-input-background-color);
-    color: var(--sl-color-white);
+    background-color: rgb(var(--sl-input-background-color));
+    color: rgb(var(--sl-color-white));
     transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
       var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
   }
@@ -56,36 +56,36 @@ export default css`
 
   /* Hover */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
-    border-color: var(--sl-input-border-color-hover);
-    background-color: var(--sl-input-background-color-hover);
+    border-color: rgb(var(--sl-input-border-color-hover));
+    background-color: rgb(var(--sl-input-background-color-hover));
   }
 
   /* Focus */
   .checkbox.checkbox--focused:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control {
-    border-color: var(--sl-input-border-color-focus);
-    background-color: var(--sl-input-background-color-focus);
+    border-color: rgb(var(--sl-input-border-color-focus));
+    background-color: rgb(var(--sl-input-background-color-focus));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
-    border-color: var(--sl-color-primary-500);
-    background-color: var(--sl-color-primary-500);
+    border-color: rgb(var(--sl-color-primary-500));
+    background-color: rgb(var(--sl-color-primary-500));
   }
 
   /* Checked/indeterminate + hover */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
-    border-color: var(--sl-color-primary-400);
-    background-color: var(--sl-color-primary-400);
+    border-color: rgb(var(--sl-color-primary-400));
+    background-color: rgb(var(--sl-color-primary-400));
   }
 
   /* Checked/indeterminate + focus */
   .checkbox.checkbox--checked:not(.checkbox--disabled).checkbox--focused .checkbox__control,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled).checkbox--focused .checkbox__control {
-    border-color: var(--sl-color-primary-400);
-    background-color: var(--sl-color-primary-400);
+    border-color: rgb(var(--sl-color-primary-400));
+    background-color: rgb(var(--sl-color-primary-400));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
index df25cf9b8..b44bde522 100644
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -20,13 +20,13 @@ export default css`
     font-size: var(--sl-font-size-medium);
     font-weight: var(--sl-font-weight-normal);
     color: var(--color);
-    background-color: var(--sl-panel-background-color);
+    background-color: rgb(var(--sl-panel-background-color));
     border-radius: var(--sl-border-radius-medium);
     user-select: none;
   }
 
   .color-picker--inline {
-    border: solid 1px var(--sl-panel-border-color);
+    border: solid 1px rgb(var(--sl-panel-border-color));
     box-shadow: var(--sl-shadow-small);
   }
 
@@ -59,7 +59,7 @@ export default css`
 
   .color-picker__grid-handle:focus {
     outline: none;
-    box-shadow: 0 0 0 1px var(--sl-color-primary-500),
+    box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)),
       0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
@@ -97,7 +97,7 @@ export default css`
 
   .color-picker__slider-handle:focus {
     outline: none;
-    box-shadow: 0 0 0 1px var(--sl-color-primary-500),
+    box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)),
       0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
@@ -172,7 +172,7 @@ export default css`
     width: calc(var(--sl-input-height-small) / 2);
     height: calc(var(--sl-input-height-small) / 2);
     color: white;
-    background-color: var(--sl-color-gray-900);
+    background-color: rgb(var(--sl-color-gray-900));
     border-radius: var(--sl-border-radius-circle);
     opacity: 0;
   }
@@ -225,7 +225,7 @@ export default css`
     grid-template-columns: repeat(8, 1fr);
     grid-gap: 6px;
     justify-items: center;
-    border-top: solid 1px var(--sl-color-gray-200);
+    border-top: solid 1px rgb(var(--sl-color-gray-200));
     padding: var(--sl-spacing-small);
   }
 
@@ -253,10 +253,10 @@ export default css`
   }
 
   .color-picker__transparent-bg {
-    background-image: linear-gradient(45deg, var(--sl-color-gray-300) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--sl-color-gray-300) 75%),
-      linear-gradient(45deg, transparent 75%, var(--sl-color-gray-300) 75%),
-      linear-gradient(45deg, var(--sl-color-gray-300) 25%, transparent 25%);
+    background-image: linear-gradient(45deg, rgb(var(--sl-color-gray-300)) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-gray-300)) 75%),
+      linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-gray-300)) 75%),
+      linear-gradient(45deg, rgb(var(--sl-color-gray-300)) 25%, transparent 25%);
     background-size: 10px 10px;
     background-position: 0 0, 0 0, -5px -5px, 5px 5px;
   }
@@ -335,7 +335,7 @@ export default css`
   }
 
   .color-dropdown__trigger:focus:not(.color-dropdown__trigger--disabled):before {
-    box-shadow: inset 0 0 0 1px var(--sl-color-primary-500);
+    box-shadow: inset 0 0 0 1px rgb(var(--sl-color-primary-500));
   }
 
   .color-dropdown__trigger.color-dropdown__trigger--disabled {
diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts
index 9c6fdf7aa..c018b4a8f 100644
--- a/src/components/details/details.styles.ts
+++ b/src/components/details/details.styles.ts
@@ -9,7 +9,7 @@ export default css`
   }
 
   .details {
-    border: solid 1px var(--sl-color-gray-200);
+    border: solid 1px rgb(var(--sl-color-gray-200));
     border-radius: var(--sl-border-radius-medium);
     overflow-anchor: none;
   }
diff --git a/src/components/dialog/dialog.styles.ts b/src/components/dialog/dialog.styles.ts
index a4f8fd602..dafa03488 100644
--- a/src/components/dialog/dialog.styles.ts
+++ b/src/components/dialog/dialog.styles.ts
@@ -32,7 +32,7 @@ export default css`
     width: var(--width);
     max-width: calc(100% - var(--sl-spacing-xx-large));
     max-height: calc(100% - var(--sl-spacing-xx-large));
-    background-color: var(--sl-panel-background-color);
+    background-color: rgb(var(--sl-panel-background-color));
     border-radius: var(--sl-border-radius-medium);
     box-shadow: var(--sl-shadow-x-large);
   }
@@ -101,6 +101,6 @@ export default css`
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: var(--sl-overlay-background-color);
+    background-color: rgb(var(--sl-overlay-background-color) / 40%);
   }
 `;
diff --git a/src/components/drawer/drawer.styles.ts b/src/components/drawer/drawer.styles.ts
index 7feaaaa34..61d5df5c0 100644
--- a/src/components/drawer/drawer.styles.ts
+++ b/src/components/drawer/drawer.styles.ts
@@ -39,7 +39,7 @@ export default css`
     z-index: 2;
     max-width: 100%;
     max-height: 100%;
-    background-color: var(--sl-panel-background-color);
+    background-color: rgb(var(--sl-panel-background-color));
     box-shadow: var(--sl-shadow-x-large);
     transition: var(--sl-transition-medium) transform;
     overflow: auto;
@@ -132,7 +132,7 @@ export default css`
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: var(--sl-overlay-background-color);
+    background-color: rgb(var(--sl-overlay-background-color) / 40%);
     pointer-events: all;
   }
 
diff --git a/src/components/dropdown/dropdown.styles.ts b/src/components/dropdown/dropdown.styles.ts
index b3feb8f51..0859b26e2 100644
--- a/src/components/dropdown/dropdown.styles.ts
+++ b/src/components/dropdown/dropdown.styles.ts
@@ -27,8 +27,8 @@ export default css`
     font-size: var(--sl-font-size-medium);
     font-weight: var(--sl-font-weight-normal);
     color: var(--color);
-    background-color: var(--sl-panel-background-color);
-    border: solid 1px var(--sl-panel-border-color);
+    background-color: rgb(var(--sl-panel-background-color));
+    border: solid 1px rgb(var(--sl-panel-border-color));
     border-radius: var(--sl-border-radius-medium);
     box-shadow: var(--sl-shadow-large);
     overflow: auto;
diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts
index 363c8289e..af6730a49 100644
--- a/src/components/icon-button/icon-button.styles.ts
+++ b/src/components/icon-button/icon-button.styles.ts
@@ -16,7 +16,7 @@ export default css`
     border: none;
     border-radius: var(--sl-border-radius-medium);
     font-size: inherit;
-    color: var(--sl-color-gray-500);
+    color: rgb(var(--sl-color-gray-500));
     padding: var(--sl-spacing-x-small);
     cursor: pointer;
     transition: var(--sl-transition-medium) color;
@@ -25,11 +25,11 @@ export default css`
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus:not(.icon-button--disabled) {
-    color: var(--sl-color-primary-500);
+    color: rgb(var(--sl-color-primary-500));
   }
 
   .icon-button:active:not(.icon-button--disabled) {
-    color: var(--sl-color-primary-600);
+    color: rgb(var(--sl-color-primary-600));
   }
 
   .icon-button:focus {
diff --git a/src/components/image-comparer/image-comparer.styles.ts b/src/components/image-comparer/image-comparer.styles.ts
index a9cf83fae..e88b43335 100644
--- a/src/components/image-comparer/image-comparer.styles.ts
+++ b/src/components/image-comparer/image-comparer.styles.ts
@@ -48,7 +48,7 @@ export default css`
     top: 0;
     width: var(--divider-width);
     height: 100%;
-    background-color: var(--sl-color-white);
+    background-color: rgb(var(--sl-color-white));
     transform: translateX(calc(var(--divider-width) / -2));
     cursor: ew-resize;
   }
@@ -61,17 +61,17 @@ export default css`
     top: calc(50% - (var(--handle-size) / 2));
     width: var(--handle-size);
     height: var(--handle-size);
-    background-color: var(--sl-color-white);
+    background-color: rgb(var(--sl-color-white));
     border-radius: var(--sl-border-radius-circle);
     font-size: calc(var(--handle-size) * 0.5);
-    color: var(--sl-color-gray-500);
+    color: rgb(var(--sl-color-gray-500));
     cursor: inherit;
     z-index: 10;
   }
 
   .image-comparer__handle:focus {
     outline: none;
-    box-shadow: 0 0 0 1px var(--sl-color-primary-500),
+    box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)),
       0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 `;
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
index 73c463adb..94710fce1 100644
--- a/src/components/input/input.styles.ts
+++ b/src/components/input/input.styles.ts
@@ -21,8 +21,8 @@ export default css`
     font-family: var(--sl-input-font-family);
     font-weight: var(--sl-input-font-weight);
     letter-spacing: var(--sl-input-letter-spacing);
-    background-color: var(--sl-input-background-color);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+    background-color: rgb(var(--sl-input-background-color));
+    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     vertical-align: middle;
     overflow: hidden;
     transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
@@ -30,37 +30,37 @@ export default css`
   }
 
   .input:hover:not(.input--disabled) {
-    background-color: var(--sl-input-background-color-hover);
-    border-color: var(--sl-input-border-color-hover);
+    background-color: rgb(var(--sl-input-background-color-hover));
+    border-color: rgb(var(--sl-input-border-color-hover));
   }
 
   .input:hover:not(.input--disabled) .input__control {
-    color: var(--sl-input-color-hover);
+    color: rgb(var(--sl-input-color-hover));
   }
 
   .input.input--focused:not(.input--disabled) {
-    background-color: var(--sl-input-background-color-focus);
-    border-color: var(--sl-input-border-color-focus);
+    background-color: rgb(var(--sl-input-background-color-focus));
+    border-color: rgb(var(--sl-input-border-color-focus));
     box-shadow: var(--focus-ring);
   }
 
   .input.input--focused:not(.input--disabled) .input__control {
-    color: var(--sl-input-color-focus);
+    color: rgb(var(--sl-input-color-focus));
   }
 
   .input.input--disabled {
-    background-color: var(--sl-input-background-color-disabled);
-    border-color: var(--sl-input-border-color-disabled);
+    background-color: rgb(var(--sl-input-background-color-disabled));
+    border-color: rgb(var(--sl-input-border-color-disabled));
     opacity: 0.5;
     cursor: not-allowed;
   }
 
   .input.input--disabled .input__control {
-    color: var(--sl-input-color-disabled);
+    color: rgb(var(--sl-input-color-disabled));
   }
 
   .input.input--disabled .input__control::placeholder {
-    color: var(--sl-input-placeholder-color-disabled);
+    color: rgb(var(--sl-input-placeholder-color-disabled));
   }
 
   .input__control {
@@ -70,7 +70,7 @@ export default css`
     font-weight: inherit;
     min-width: 0;
     height: 100%;
-    color: var(--sl-input-color);
+    color: rgb(var(--sl-input-color));
     border: none;
     background: none;
     box-shadow: none;
@@ -91,12 +91,12 @@ export default css`
   .input__control:-webkit-autofill:hover,
   .input__control:-webkit-autofill:focus,
   .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important;
-    -webkit-text-fill-color: var(--sl-color-primary-500);
+    box-shadow: 0 0 0 var(--sl-input-height-large) rgb(var(--sl-input-background-color-hover)) inset !important;
+    -webkit-text-fill-color: rgb(var(--sl-color-primary-500));
   }
 
   .input__control::placeholder {
-    color: var(--sl-input-placeholder-color);
+    color: rgb(var(--sl-input-placeholder-color));
     user-select: none;
   }
 
@@ -114,7 +114,7 @@ export default css`
 
   .input__prefix ::slotted(sl-icon),
   .input__suffix ::slotted(sl-icon) {
-    color: var(--sl-input-icon-color);
+    color: rgb(var(--sl-input-icon-color));
   }
 
   /*
@@ -218,7 +218,7 @@ export default css`
     display: inline-flex;
     align-items: center;
     font-size: inherit;
-    color: var(--sl-input-icon-color);
+    color: rgb(var(--sl-input-icon-color));
     border: none;
     background: none;
     padding: 0;
@@ -228,7 +228,7 @@ export default css`
 
   .input__clear:hover,
   .input__password-toggle:hover {
-    color: var(--sl-input-icon-color-hover);
+    color: rgb(var(--sl-input-icon-color-hover));
   }
 
   .input__clear:focus,
diff --git a/src/components/menu-divider/menu-divider.styles.ts b/src/components/menu-divider/menu-divider.styles.ts
index 3b36fbbe1..7a88dfaed 100644
--- a/src/components/menu-divider/menu-divider.styles.ts
+++ b/src/components/menu-divider/menu-divider.styles.ts
@@ -9,7 +9,7 @@ export default css`
   }
 
   .menu-divider {
-    border-top: solid 1px var(--sl-panel-border-color);
+    border-top: solid 1px rgb(var(--sl-panel-border-color));
     margin: var(--sl-spacing-x-small) 0;
   }
 `;
diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts
index 57e3bae28..cce6942cb 100644
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -18,7 +18,7 @@ export default css`
     line-height: var(--sl-line-height-normal);
     letter-spacing: var(--sl-letter-spacing-normal);
     text-align: left;
-    color: var(--sl-color-gray-700);
+    color: rgb(var(--sl-color-gray-700));
     padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
     transition: var(--sl-transition-fast) fill;
     user-select: none;
@@ -27,7 +27,7 @@ export default css`
   }
   .menu-item.menu-item--disabled {
     outline: none;
-    color: var(--sl-color-gray-400);
+    color: rgb(var(--sl-color-gray-400));
     cursor: not-allowed;
   }
 
@@ -62,8 +62,8 @@ export default css`
   :host(:hover:not([aria-disabled='true'])) .menu-item,
   :host(:focus:not([aria-disabled='true'])) .menu-item {
     outline: none;
-    background-color: var(--sl-color-primary-500);
-    color: var(--sl-color-white);
+    background-color: rgb(var(--sl-color-primary-500));
+    color: rgb(var(--sl-color-white));
   }
 
   .menu-item .menu-item__check {
diff --git a/src/components/menu-label/menu-label.styles.ts b/src/components/menu-label/menu-label.styles.ts
index 8cb51b7e8..717da4ce1 100644
--- a/src/components/menu-label/menu-label.styles.ts
+++ b/src/components/menu-label/menu-label.styles.ts
@@ -14,7 +14,7 @@ export default css`
     font-weight: var(--sl-font-weight-semibold);
     line-height: var(--sl-line-height-normal);
     letter-spacing: var(--sl-letter-spacing-normal);
-    color: var(--sl-color-gray-400);
+    color: rgb(var(--sl-color-gray-500));
     padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
     user-select: none;
   }
diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts
index bf2c1150a..04c2933dc 100644
--- a/src/components/progress-bar/progress-bar.styles.ts
+++ b/src/components/progress-bar/progress-bar.styles.ts
@@ -6,9 +6,9 @@ export default css`
 
   :host {
     --height: 16px;
-    --track-color: var(--sl-color-gray-200);
-    --indicator-color: var(--sl-color-primary-500);
-    --label-color: var(--sl-color-white);
+    --track-color: rgb(var(--sl-color-gray-200));
+    --indicator-color: rgb(var(--sl-color-primary-500));
+    --label-color: rgb(var(--sl-color-white));
 
     display: block;
   }
diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts
index b4e48769f..0b969de4e 100644
--- a/src/components/progress-ring/progress-ring.styles.ts
+++ b/src/components/progress-ring/progress-ring.styles.ts
@@ -5,8 +5,8 @@ export default css`
   ${componentStyles}
 
   :host {
-    --track-color: var(--sl-color-gray-200);
-    --indicator-color: var(--sl-color-primary-500);
+    --track-color: rgb(var(--sl-color-gray-200));
+    --indicator-color: rgb(var(--sl-color-primary-500));
 
     display: inline-flex;
   }
diff --git a/src/components/radio-group/radio-group.styles.ts b/src/components/radio-group/radio-group.styles.ts
index 4112eb60e..609450e28 100644
--- a/src/components/radio-group/radio-group.styles.ts
+++ b/src/components/radio-group/radio-group.styles.ts
@@ -9,7 +9,7 @@ export default css`
   }
 
   .radio-group {
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     border-radius: var(--sl-border-radius-medium);
     padding: var(--sl-spacing-large);
     padding-top: var(--sl-spacing-x-small);
@@ -19,7 +19,7 @@ export default css`
     font-family: var(--sl-input-font-family);
     font-size: var(--sl-input-font-size-medium);
     font-weight: var(--sl-input-font-weight);
-    color: var(--sl-input-color);
+    color: rgb(var(--sl-input-color));
     padding: 0 var(--sl-spacing-xx-small);
   }
 
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index 15968ff76..065545982 100644
--- a/src/components/radio/radio.styles.ts
+++ b/src/components/radio/radio.styles.ts
@@ -14,7 +14,7 @@ export default css`
     font-family: var(--sl-input-font-family);
     font-size: var(--sl-input-font-size-medium);
     font-weight: var(--sl-input-font-weight);
-    color: var(--sl-input-color);
+    color: rgb(var(--sl-input-color));
     vertical-align: middle;
     cursor: pointer;
   }
@@ -38,9 +38,9 @@ export default css`
     justify-content: center;
     width: var(--sl-toggle-size);
     height: var(--sl-toggle-size);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     border-radius: 50%;
-    background-color: var(--sl-input-background-color);
+    background-color: rgb(var(--sl-input-background-color));
     color: transparent;
     transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
       var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
@@ -56,34 +56,34 @@ export default css`
 
   /* Hover */
   .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
-    border-color: var(--sl-input-border-color-hover);
-    background-color: var(--sl-input-background-color-hover);
+    border-color: rgb(var(--sl-input-border-color-hover));
+    background-color: rgb(var(--sl-input-background-color-hover));
   }
 
   /* Focus */
   .radio.radio--focused:not(.radio--checked):not(.radio--disabled) .radio__control {
-    border-color: var(--sl-input-border-color-focus);
-    background-color: var(--sl-input-background-color-focus);
+    border-color: rgb(var(--sl-input-border-color-focus));
+    background-color: rgb(var(--sl-input-background-color-focus));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
   /* Checked */
   .radio--checked .radio__control {
-    color: var(--sl-color-white);
-    border-color: var(--sl-color-primary-500);
-    background-color: var(--sl-color-primary-500);
+    color: rgb(var(--sl-color-white));
+    border-color: rgb(var(--sl-color-primary-500));
+    background-color: rgb(var(--sl-color-primary-500));
   }
 
   /* Checked + hover */
   .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
-    border-color: var(--sl-color-primary-400);
-    background-color: var(--sl-color-primary-400);
+    border-color: rgb(var(--sl-color-primary-400));
+    background-color: rgb(var(--sl-color-primary-400));
   }
 
   /* Checked + focus */
   .radio.radio--checked:not(.radio--disabled).radio--focused .radio__control {
-    border-color: var(--sl-color-primary-400);
-    background-color: var(--sl-color-primary-400);
+    border-color: rgb(var(--sl-color-primary-400));
+    background-color: rgb(var(--sl-color-primary-400));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts
index 9bd4b6ac9..515c16832 100644
--- a/src/components/range/range.styles.ts
+++ b/src/components/range/range.styles.ts
@@ -9,7 +9,7 @@ export default css`
   :host {
     --thumb-size: 20px;
     --tooltip-offset-y: 10px;
-    --track-color: var(--sl-color-gray-200);
+    --track-color: rgb(var(--sl-color-gray-200));
     --track-height: 6px;
 
     display: block;
@@ -42,8 +42,8 @@ export default css`
     width: var(--thumb-size);
     height: var(--thumb-size);
     border-radius: 50%;
-    background-color: var(--sl-color-primary-500);
-    border: solid var(--sl-input-border-width) var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-primary-500));
+    border: solid var(--sl-input-border-width) rgb(var(--sl-color-primary-500));
     -webkit-appearance: none;
     margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
     transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
@@ -52,19 +52,19 @@ export default css`
   }
 
   .range__control:not(:disabled)::-webkit-slider-thumb:hover {
-    background-color: var(--sl-color-primary-400);
-    border-color: var(--sl-color-primary-400);
+    background-color: rgb(var(--sl-color-primary-400));
+    border-color: rgb(var(--sl-color-primary-400));
   }
 
   .range__control:not(:disabled):focus::-webkit-slider-thumb {
-    background-color: var(--sl-color-primary-400);
-    border-color: var(--sl-color-primary-400);
+    background-color: rgb(var(--sl-color-primary-400));
+    border-color: rgb(var(--sl-color-primary-400));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
   .range__control:not(:disabled)::-webkit-slider-thumb:active {
-    background-color: var(--sl-color-primary-500);
-    border-color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-primary-500));
+    border-color: rgb(var(--sl-color-primary-500));
     cursor: grabbing;
   }
 
@@ -86,27 +86,27 @@ export default css`
     height: var(--thumb-size);
     width: var(--thumb-size);
     border-radius: 50%;
-    background-color: var(--sl-color-primary-500);
-    border-color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-primary-500));
+    border-color: rgb(var(--sl-color-primary-500));
     transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
       var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
     cursor: pointer;
   }
 
   .range__control:not(:disabled)::-moz-range-thumb:hover {
-    background-color: var(--sl-color-primary-400);
-    border-color: var(--sl-color-primary-400);
+    background-color: rgb(var(--sl-color-primary-400));
+    border-color: rgb(var(--sl-color-primary-400));
   }
 
   .range__control:not(:disabled):focus::-moz-range-thumb {
-    background-color: var(--sl-color-primary-400);
-    border-color: var(--sl-color-primary-400);
+    background-color: rgb(var(--sl-color-primary-400));
+    border-color: rgb(var(--sl-color-primary-400));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
   .range__control:not(:disabled)::-moz-range-thumb:active {
-    background-color: var(--sl-color-primary-600);
-    border-color: var(--sl-color-primary-600);
+    background-color: rgb(var(--sl-color-primary-600));
+    border-color: rgb(var(--sl-color-primary-600));
     cursor: grabbing;
   }
 
@@ -133,12 +133,12 @@ export default css`
     z-index: var(--sl-z-index-tooltip);
     left: 1px;
     border-radius: var(--sl-tooltip-border-radius);
-    background-color: var(--sl-tooltip-background-color);
+    background-color: rgb(var(--sl-tooltip-background-color));
     font-family: var(--sl-tooltip-font-family);
     font-size: var(--sl-tooltip-font-size);
     font-weight: var(--sl-tooltip-font-weight);
     line-height: var(--sl-tooltip-line-height);
-    color: var(--sl-tooltip-color);
+    color: rgb(var(--sl-tooltip-color));
     opacity: 0;
     padding: var(--sl-tooltip-padding);
     transition: var(--sl-transition-fast) opacity;
@@ -164,7 +164,7 @@ export default css`
   }
 
   .range--tooltip-top .range__tooltip:after {
-    border-top: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
+    border-top: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
     border-left: var(--sl-tooltip-arrow-size) solid transparent;
     border-right: var(--sl-tooltip-arrow-size) solid transparent;
     top: 100%;
@@ -175,7 +175,7 @@ export default css`
     bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));
   }
   .range--tooltip-bottom .range__tooltip:after {
-    border-bottom: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
+    border-bottom: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
     border-left: var(--sl-tooltip-arrow-size) solid transparent;
     border-right: var(--sl-tooltip-arrow-size) solid transparent;
     bottom: 100%;
diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts
index dfada2e16..aa6d2e6f9 100644
--- a/src/components/rating/rating.styles.ts
+++ b/src/components/rating/rating.styles.ts
@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --symbol-color: var(--sl-color-gray-300);
+    --symbol-color: rgb(var(--sl-color-gray-300));
     --symbol-color-active: #ffbe00;
     --symbol-size: 1.2rem;
     --symbol-spacing: var(--sl-spacing-xxx-small);
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index 5f246ebab..5b7a05aa5 100644
--- a/src/components/select/select.styles.ts
+++ b/src/components/select/select.styles.ts
@@ -25,8 +25,8 @@ export default css`
     font-family: var(--sl-input-font-family);
     font-weight: var(--sl-input-font-weight);
     letter-spacing: var(--sl-input-letter-spacing);
-    background-color: var(--sl-input-background-color);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+    background-color: rgb(var(--sl-input-background-color));
+    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     vertical-align: middle;
     overflow: hidden;
     transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
@@ -34,23 +34,23 @@ export default css`
   }
 
   .select:not(.select--disabled) .select__box:hover {
-    background-color: var(--sl-input-background-color-hover);
-    border-color: var(--sl-input-border-color-hover);
-    color: var(--sl-input-color-hover);
+    background-color: rgb(var(--sl-input-background-color-hover));
+    border-color: rgb(var(--sl-input-border-color-hover));
+    color: rgb(var(--sl-input-color-hover));
   }
 
   .select.select--focused:not(.select--disabled) .select__box {
-    background-color: var(--sl-input-background-color-focus);
-    border-color: var(--sl-input-border-color-focus);
+    background-color: rgb(var(--sl-input-background-color-focus));
+    border-color: rgb(var(--sl-input-border-color-focus));
     box-shadow: var(--focus-ring);
     outline: none;
-    color: var(--sl-input-color-focus);
+    color: rgb(var(--sl-input-color-focus));
   }
 
   .select--disabled .select__box {
-    background-color: var(--sl-input-background-color-disabled);
-    border-color: var(--sl-input-border-color-disabled);
-    color: var(--sl-input-color-disabled);
+    background-color: rgb(var(--sl-input-background-color-disabled));
+    border-color: rgb(var(--sl-input-border-color-disabled));
+    color: rgb(var(--sl-input-color-disabled));
     opacity: 0.5;
     cursor: not-allowed;
     outline: none;
@@ -96,11 +96,11 @@ export default css`
 
   /* Placeholder */
   .select--placeholder-visible .select__label {
-    color: var(--sl-input-placeholder-color);
+    color: rgb(var(--sl-input-placeholder-color));
   }
 
   .select--disabled.select--placeholder-visible .select__label {
-    color: var(--sl-input-placeholder-color-disabled);
+    color: rgb(var(--sl-input-placeholder-color-disabled));
   }
 
   /* Tags */
diff --git a/src/components/skeleton/skeleton.styles.ts b/src/components/skeleton/skeleton.styles.ts
index 254b54c74..2dc402245 100644
--- a/src/components/skeleton/skeleton.styles.ts
+++ b/src/components/skeleton/skeleton.styles.ts
@@ -6,8 +6,8 @@ export default css`
 
   :host {
     --border-radius: var(--sl-border-radius-pill);
-    --color: var(--sl-color-gray-200);
-    --sheen-color: var(--sl-color-gray-100);
+    --color: rgb(var(--sl-color-gray-200));
+    --sheen-color: rgb(var(--sl-color-gray-300));
 
     display: block;
     position: relative;
diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts
index f921d0b80..e67878a25 100644
--- a/src/components/spinner/spinner.styles.ts
+++ b/src/components/spinner/spinner.styles.ts
@@ -5,8 +5,8 @@ export default css`
   ${componentStyles}
 
   :host {
-    --track-color: var(--sl-color-gray-200);
-    --indicator-color: var(--sl-color-primary-500);
+    --track-color: rgb(var(--sl-color-black) / 10%);
+    --indicator-color: rgb(var(--sl-color-primary-500));
     --stroke-width: 2px;
 
     display: inline-flex;
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index 2938bed64..337e85ef1 100644
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -18,7 +18,7 @@ export default css`
     font-family: var(--sl-input-font-family);
     font-size: var(--sl-input-font-size-medium);
     font-weight: var(--sl-input-font-weight);
-    color: var(--sl-input-color);
+    color: rgb(var(--sl-input-color));
     vertical-align: middle;
     cursor: pointer;
   }
@@ -31,8 +31,8 @@ export default css`
     justify-content: center;
     width: var(--width);
     height: var(--height);
-    background-color: var(--sl-color-gray-300);
-    border: solid var(--sl-input-border-width) var(--sl-color-gray-300);
+    background-color: rgb(var(--sl-color-gray-300));
+    border: solid var(--sl-input-border-width) rgb(var(--sl-color-gray-300));
     border-radius: var(--height);
     transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
   }
@@ -40,9 +40,9 @@ export default css`
   .switch__control .switch__thumb {
     width: var(--thumb-size);
     height: var(--thumb-size);
-    background-color: var(--sl-color-white);
+    background-color: rgb(var(--sl-color-white));
     border-radius: 50%;
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     transform: translateX(calc((var(--width) - var(--height)) / -2));
     transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) background-color,
       var(--sl-transition-fast) border-color, var(--sl-transition-fast) box-shadow;
@@ -58,56 +58,56 @@ export default css`
 
   /* Hover */
   .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
-    background-color: var(--sl-color-gray-200);
-    border-color: var(--sl-color-gray-200);
+    background-color: rgb(var(--sl-color-gray-200));
+    border-color: rgb(var(--sl-color-gray-200));
   }
   .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: var(--sl-color-white);
-    border-color: var(--sl-input-border-color);
+    background-color: rgb(var(--sl-color-white));
+    border-color: rgb(var(--sl-input-border-color));
   }
 
   /* Focus */
   .switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control {
-    background-color: var(--sl-color-gray-200);
-    border-color: var(--sl-color-gray-200);
+    background-color: rgb(var(--sl-color-gray-200));
+    border-color: rgb(var(--sl-color-gray-200));
   }
 
   .switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control .switch__thumb {
-    background-color: var(--sl-color-white);
-    border-color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-white));
+    border-color: rgb(var(--sl-color-primary-500));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
   /* Checked */
   .switch--checked .switch__control {
-    background-color: var(--sl-color-primary-500);
-    border-color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-primary-500));
+    border-color: rgb(var(--sl-color-primary-500));
   }
   .switch--checked .switch__control .switch__thumb {
-    background-color: var(--sl-color-white);
-    border-color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-white));
+    border-color: rgb(var(--sl-color-primary-500));
     transform: translateX(calc((var(--width) - var(--height)) / 2));
   }
 
   /* Checked + hover */
   .switch.switch--checked:not(.switch--disabled) .switch__control:hover {
-    background-color: var(--sl-color-primary-400);
-    border-color: var(--sl-color-primary-400);
+    background-color: rgb(var(--sl-color-primary-400));
+    border-color: rgb(var(--sl-color-primary-400));
   }
   .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
-    background-color: var(--sl-color-white);
-    border-color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-white));
+    border-color: rgb(var(--sl-color-primary-500));
   }
 
   /* Checked + focus */
   .switch.switch--checked:not(.switch--disabled).switch--focused .switch__control {
-    background-color: var(--sl-color-primary-400);
-    border-color: var(--sl-color-primary-400);
+    background-color: rgb(var(--sl-color-primary-400));
+    border-color: rgb(var(--sl-color-primary-400));
   }
 
   .switch.switch--checked:not(.switch--disabled).switch--focused .switch__control .switch__thumb {
-    background-color: var(--sl-color-white);
-    border-color: var(--sl-color-primary-500);
+    background-color: rgb(var(--sl-color-white));
+    border-color: rgb(var(--sl-color-primary-500));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
   }
 
diff --git a/src/components/tab-group/tab-group.styles.ts b/src/components/tab-group/tab-group.styles.ts
index 556d42f64..b57338e82 100644
--- a/src/components/tab-group/tab-group.styles.ts
+++ b/src/components/tab-group/tab-group.styles.ts
@@ -5,7 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --tabs-border-color: var(--sl-color-gray-200);
+    --tabs-border-color: rgb(var(--sl-color-gray-200));
 
     display: block;
   }
@@ -90,7 +90,7 @@ export default css`
 
   .tab-group--top .tab-group__indicator {
     bottom: -2px;
-    border-bottom: solid 2px var(--sl-color-primary-500);
+    border-bottom: solid 2px rgb(var(--sl-color-primary-500));
   }
 
   .tab-group--top .tab-group__body {
@@ -132,7 +132,7 @@ export default css`
 
   .tab-group--bottom .tab-group__indicator {
     top: calc(-1 * 2px);
-    border-top: solid 2px var(--sl-color-primary-500);
+    border-top: solid 2px rgb(var(--sl-color-primary-500));
   }
 
   .tab-group--bottom .tab-group__body {
@@ -159,7 +159,7 @@ export default css`
 
   .tab-group--start .tab-group__indicator {
     right: calc(-1 * 2px);
-    border-right: solid 2px var(--sl-color-primary-500);
+    border-right: solid 2px rgb(var(--sl-color-primary-500));
   }
 
   .tab-group--start .tab-group__body {
@@ -187,7 +187,7 @@ export default css`
 
   .tab-group--end .tab-group__indicator {
     left: calc(-1 * 2px);
-    border-left: solid 2px var(--sl-color-primary-500);
+    border-left: solid 2px rgb(var(--sl-color-primary-500));
   }
 
   .tab-group--end .tab-group__body {
diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts
index fd59cd693..293f36f01 100644
--- a/src/components/tab/tab.styles.ts
+++ b/src/components/tab/tab.styles.ts
@@ -17,7 +17,7 @@ export default css`
     font-size: var(--sl-font-size-small);
     font-weight: var(--sl-font-weight-semibold);
     border-radius: 4px;
-    color: var(--sl-color-gray-600);
+    color: rgb(var(--sl-color-gray-600));
     padding: var(--sl-spacing-medium) var(--sl-spacing-large);
     white-space: nowrap;
     user-select: none;
@@ -26,7 +26,7 @@ export default css`
   }
 
   .tab:hover:not(.tab--disabled) {
-    color: var(--sl-color-primary-500);
+    color: rgb(var(--sl-color-primary-500));
   }
 
   .tab:focus {
@@ -34,12 +34,12 @@ export default css`
   }
 
   .tab:focus:not(.tab--disabled) {
-    color: var(--sl-color-primary-500);
+    color: rgb(var(--sl-color-primary-500));
     box-shadow: var(--focus-ring);
   }
 
   .tab.tab--active:not(.tab--disabled) {
-    color: var(--sl-color-primary-500);
+    color: rgb(var(--sl-color-primary-500));
   }
 
   .tab.tab--closable {
diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts
index 1474e0181..7e80845fe 100644
--- a/src/components/tag/tag.styles.ts
+++ b/src/components/tag/tag.styles.ts
@@ -28,33 +28,33 @@ export default css`
    */
 
   .tag--primary {
-    background-color: var(--sl-color-primary-100);
-    border-color: var(--sl-color-primary-200);
-    color: var(--sl-color-primary-700);
+    background-color: rgb(var(--sl-color-primary-100));
+    border-color: rgb(var(--sl-color-primary-200));
+    color: rgb(var(--sl-color-primary-700));
   }
 
   .tag--success {
-    background-color: var(--sl-color-success-100);
-    border-color: var(--sl-color-success-200);
-    color: var(--sl-color-success-700);
+    background-color: rgb(var(--sl-color-success-100));
+    border-color: rgb(var(--sl-color-success-200));
+    color: rgb(var(--sl-color-success-700));
   }
 
   .tag--info {
-    background-color: var(--sl-color-info-100);
-    border-color: var(--sl-color-info-200);
-    color: var(--sl-color-info-700);
+    background-color: rgb(var(--sl-color-info-100));
+    border-color: rgb(var(--sl-color-info-200));
+    color: rgb(var(--sl-color-info-700));
   }
 
   .tag--warning {
-    background-color: var(--sl-color-warning-100);
-    border-color: var(--sl-color-warning-200);
-    color: var(--sl-color-warning-700);
+    background-color: rgb(var(--sl-color-warning-100));
+    border-color: rgb(var(--sl-color-warning-200));
+    color: rgb(var(--sl-color-warning-700));
   }
 
   .tag--danger {
-    background-color: var(--sl-color-danger-100);
-    border-color: var(--sl-color-danger-200);
-    color: var(--sl-color-danger-700);
+    background-color: rgb(var(--sl-color-danger-100));
+    border-color: rgb(var(--sl-color-danger-200));
+    color: rgb(var(--sl-color-danger-700));
   }
 
   /*
diff --git a/src/components/textarea/textarea.styles.ts b/src/components/textarea/textarea.styles.ts
index 16bfad698..a6d0d5bd4 100644
--- a/src/components/textarea/textarea.styles.ts
+++ b/src/components/textarea/textarea.styles.ts
@@ -19,45 +19,45 @@ export default css`
     font-weight: var(--sl-input-font-weight);
     line-height: var(--sl-line-height-normal);
     letter-spacing: var(--sl-input-letter-spacing);
-    background-color: var(--sl-input-background-color);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+    background-color: rgb(var(--sl-input-background-color));
+    border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
     vertical-align: middle;
     transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
     cursor: text;
   }
 
   .textarea:hover:not(.textarea--disabled) {
-    background-color: var(--sl-input-background-color-hover);
-    border-color: var(--sl-input-border-color-hover);
+    background-color: rgb(var(--sl-input-background-color-hover));
+    border-color: rgb(var(--sl-input-border-color-hover));
   }
   .textarea:hover:not(.textarea--disabled) .textarea__control {
-    color: var(--sl-input-color-hover);
+    color: rgb(var(--sl-input-color-hover));
   }
 
   .textarea.textarea--focused:not(.textarea--disabled) {
-    background-color: var(--sl-input-background-color-focus);
-    border-color: var(--sl-input-border-color-focus);
+    background-color: rgb(var(--sl-input-background-color-focus));
+    border-color: rgb(var(--sl-input-border-color-focus));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
-    color: var(--sl-input-color-focus);
+    color: rgb(var(--sl-input-color-focus));
   }
 
   .textarea.textarea--focused:not(.textarea--disabled) .textarea__control {
-    color: var(--sl-input-color-focus);
+    color: rgb(var(--sl-input-color-focus));
   }
 
   .textarea.textarea--disabled {
-    background-color: var(--sl-input-background-color-disabled);
-    border-color: var(--sl-input-border-color-disabled);
+    background-color: rgb(var(--sl-input-background-color-disabled));
+    border-color: rgb(var(--sl-input-border-color-disabled));
     opacity: 0.5;
     cursor: not-allowed;
   }
 
   .textarea.textarea--disabled .textarea__control {
-    color: var(--sl-input-color-disabled);
+    color: rgb(var(--sl-input-color-disabled));
   }
 
   .textarea.textarea--disabled .textarea__control::placeholder {
-    color: var(--sl-input-placeholder-color-disabled);
+    color: rgb(var(--sl-input-placeholder-color-disabled));
   }
 
   .textarea__control {
@@ -66,7 +66,7 @@ export default css`
     font-size: inherit;
     font-weight: inherit;
     line-height: 1.4;
-    color: var(--sl-input-color);
+    color: rgb(var(--sl-input-color));
     border: none;
     background: none;
     box-shadow: none;
@@ -82,7 +82,7 @@ export default css`
   }
 
   .textarea__control::placeholder {
-    color: var(--sl-input-placeholder-color);
+    color: rgb(var(--sl-input-placeholder-color));
     user-select: none;
   }
 
diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts
index c7010861b..a0224c563 100644
--- a/src/components/tooltip/tooltip.styles.ts
+++ b/src/components/tooltip/tooltip.styles.ts
@@ -21,12 +21,12 @@ export default css`
   .tooltip {
     max-width: var(--max-width);
     border-radius: var(--sl-tooltip-border-radius);
-    background-color: var(--sl-tooltip-background-color);
+    background-color: rgb(var(--sl-tooltip-background-color));
     font-family: var(--sl-tooltip-font-family);
     font-size: var(--sl-tooltip-font-size);
     font-weight: var(--sl-tooltip-font-weight);
     line-height: var(--sl-tooltip-line-height);
-    color: var(--sl-tooltip-color);
+    color: rgb(var(--sl-tooltip-color));
     padding: var(--sl-tooltip-padding);
   }
 
@@ -57,7 +57,7 @@ export default css`
   .tooltip-positioner[data-popper-placement^='bottom'] .tooltip:after {
     bottom: 100%;
     left: calc(50% - var(--sl-tooltip-arrow-size));
-    border-bottom: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
+    border-bottom: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
     border-left: var(--sl-tooltip-arrow-size) solid transparent;
     border-right: var(--sl-tooltip-arrow-size) solid transparent;
   }
@@ -75,7 +75,7 @@ export default css`
   .tooltip-positioner[data-popper-placement^='top'] .tooltip:after {
     top: 100%;
     left: calc(50% - var(--sl-tooltip-arrow-size));
-    border-top: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
+    border-top: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
     border-left: var(--sl-tooltip-arrow-size) solid transparent;
     border-right: var(--sl-tooltip-arrow-size) solid transparent;
   }
@@ -93,7 +93,7 @@ export default css`
   .tooltip-positioner[data-popper-placement^='left'] .tooltip:after {
     top: calc(50% - var(--sl-tooltip-arrow-size));
     left: 100%;
-    border-left: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
+    border-left: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
     border-top: var(--sl-tooltip-arrow-size) solid transparent;
     border-bottom: var(--sl-tooltip-arrow-size) solid transparent;
   }
@@ -111,7 +111,7 @@ export default css`
   .tooltip-positioner[data-popper-placement^='right'] .tooltip:after {
     top: calc(50% - var(--sl-tooltip-arrow-size));
     right: 100%;
-    border-right: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
+    border-right: var(--sl-tooltip-arrow-size) solid rgb(var(--sl-tooltip-background-color));
     border-top: var(--sl-tooltip-arrow-size) solid transparent;
     border-bottom: var(--sl-tooltip-arrow-size) solid transparent;
   }
diff --git a/src/styles/form-control.styles.ts b/src/styles/form-control.styles.ts
index fa187d0a3..9079b23b0 100644
--- a/src/styles/form-control.styles.ts
+++ b/src/styles/form-control.styles.ts
@@ -31,7 +31,7 @@ export default css`
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: var(--sl-input-help-text-color);
+    color: rgb(var(--sl-input-help-text-color));
   }
 
   .form-control--has-help-text .form-control__help-text ::slotted(*) {
diff --git a/src/themes/base.css b/src/themes/base.css
index 9d7dfd1d1..178845db8 100644
--- a/src/themes/base.css
+++ b/src/themes/base.css
@@ -5,8 +5,8 @@
    * Color Primitives
    */
 
-  --sl-color-black: #000;
-  --sl-color-white: #fff;
+  --sl-color-black: 0 0 0;
+  --sl-color-white: 255 255 255;
 
   /* We can probably ditch these now */
   --sl-color-primary-text: var(--sl-color-white);
@@ -16,290 +16,290 @@
   --sl-color-danger-text: var(--sl-color-white);
 
   /* Blue Gray */
-  --sl-color-blue-gray-50: #f8fafc;
-  --sl-color-blue-gray-100: #f1f5f9;
-  --sl-color-blue-gray-200: #e2e8f0;
-  --sl-color-blue-gray-300: #cbd5e1;
-  --sl-color-blue-gray-400: #94a3b8;
-  --sl-color-blue-gray-500: #64748b;
-  --sl-color-blue-gray-600: #475569;
-  --sl-color-blue-gray-700: #334155;
-  --sl-color-blue-gray-800: #1e293b;
-  --sl-color-blue-gray-900: #0f172a;
-  --sl-color-blue-gray-1000: #0a101e;
+  --sl-color-blue-gray-50: 248 250 252;
+  --sl-color-blue-gray-100: 241 245 249;
+  --sl-color-blue-gray-200: 226 232 240;
+  --sl-color-blue-gray-300: 203 213 225;
+  --sl-color-blue-gray-400: 148 163 184;
+  --sl-color-blue-gray-500: 100 116 139;
+  --sl-color-blue-gray-600: 71 85 105;
+  --sl-color-blue-gray-700: 51 65 85;
+  --sl-color-blue-gray-800: 30 41 59;
+  --sl-color-blue-gray-900: 15 23 42;
+  --sl-color-blue-gray-1000: 10 16 30;
 
   /* Cool Gray */
-  --sl-color-cool-gray-50: #f9fafb;
-  --sl-color-cool-gray-100: #f3f4f6;
-  --sl-color-cool-gray-200: #e5e7eb;
-  --sl-color-cool-gray-300: #d1d5db;
-  --sl-color-cool-gray-400: #9ca3af;
-  --sl-color-cool-gray-500: #6b7280;
-  --sl-color-cool-gray-600: #4b5563;
-  --sl-color-cool-gray-700: #374151;
-  --sl-color-cool-gray-800: #1f2937;
-  --sl-color-cool-gray-900: #111827;
-  --sl-color-cool-gray-1000: #0c111d;
+  --sl-color-cool-gray-50: 249 250 251;
+  --sl-color-cool-gray-100: 243 244 246;
+  --sl-color-cool-gray-200: 229 231 235;
+  --sl-color-cool-gray-300: 209 213 219;
+  --sl-color-cool-gray-400: 156 163 175;
+  --sl-color-cool-gray-500: 107 114 128;
+  --sl-color-cool-gray-600: 75 85 99;
+  --sl-color-cool-gray-700: 55 65 81;
+  --sl-color-cool-gray-800: 31 41 55;
+  --sl-color-cool-gray-900: 17 24 39;
+  --sl-color-cool-gray-1000: 12 17 29;
 
   /* Gray */
-  --sl-color-gray-50: #fafafa;
-  --sl-color-gray-100: #f4f4f5;
-  --sl-color-gray-200: #e4e4e7;
-  --sl-color-gray-300: #d4d4d8;
-  --sl-color-gray-400: #a1a1aa;
-  --sl-color-gray-500: #71717a;
-  --sl-color-gray-600: #52525b;
-  --sl-color-gray-700: #3f3f46;
-  --sl-color-gray-800: #27272a;
-  --sl-color-gray-900: #18181b;
-  --sl-color-gray-1000: #131316;
+  --sl-color-gray-50: 250 250 250;
+  --sl-color-gray-100: 244 244 245;
+  --sl-color-gray-200: 228 228 231;
+  --sl-color-gray-300: 212 212 216;
+  --sl-color-gray-400: 161 161 170;
+  --sl-color-gray-500: 113 113 122;
+  --sl-color-gray-600: 82 82 91;
+  --sl-color-gray-700: 63 63 70;
+  --sl-color-gray-800: 39 39 42;
+  --sl-color-gray-900: 24 24 27;
+  --sl-color-gray-1000: 19 19 22;
 
   /* True Gray */
-  --sl-color-true-gray-50: #fafafa;
-  --sl-color-true-gray-100: #f5f5f5;
-  --sl-color-true-gray-200: #e5e5e5;
-  --sl-color-true-gray-300: #d4d4d4;
-  --sl-color-true-gray-400: #a3a3a3;
-  --sl-color-true-gray-500: #737373;
-  --sl-color-true-gray-600: #525252;
-  --sl-color-true-gray-700: #404040;
-  --sl-color-true-gray-800: #262626;
-  --sl-color-true-gray-900: #171717;
-  --sl-color-true-gray-1000: #111111;
+  --sl-color-true-gray-50: 250 250 250;
+  --sl-color-true-gray-100: 245 245 245;
+  --sl-color-true-gray-200: 229 229 229;
+  --sl-color-true-gray-300: 212 212 212;
+  --sl-color-true-gray-400: 163 163 163;
+  --sl-color-true-gray-500: 115 115 115;
+  --sl-color-true-gray-600: 82 82 82;
+  --sl-color-true-gray-700: 64 64 64;
+  --sl-color-true-gray-800: 38 38 38;
+  --sl-color-true-gray-900: 23 23 23;
+  --sl-color-true-gray-1000: 17 17 17;
 
   /* Warm Gray */
-  --sl-color-warm-gray-50: #fafaf9;
-  --sl-color-warm-gray-100: #f5f5f4;
-  --sl-color-warm-gray-200: #e7e5e4;
-  --sl-color-warm-gray-300: #d6d3d1;
-  --sl-color-warm-gray-400: #a8a29e;
-  --sl-color-warm-gray-500: #78716c;
-  --sl-color-warm-gray-600: #57534e;
-  --sl-color-warm-gray-700: #44403c;
-  --sl-color-warm-gray-800: #292524;
-  --sl-color-warm-gray-900: #1c1917;
-  --sl-color-warm-gray-1000: #131210;
+  --sl-color-warm-gray-50: 250 250 249;
+  --sl-color-warm-gray-100: 245 245 244;
+  --sl-color-warm-gray-200: 231 229 228;
+  --sl-color-warm-gray-300: 214 211 209;
+  --sl-color-warm-gray-400: 168 162 158;
+  --sl-color-warm-gray-500: 120 113 108;
+  --sl-color-warm-gray-600: 87 83 78;
+  --sl-color-warm-gray-700: 68 64 60;
+  --sl-color-warm-gray-800: 41 37 36;
+  --sl-color-warm-gray-900: 28 25 23;
+  --sl-color-warm-gray-1000: 19 18 16;
 
   /* Red */
-  --sl-color-red-50: #fef2f2;
-  --sl-color-red-100: #fee2e2;
-  --sl-color-red-200: #fecaca;
-  --sl-color-red-300: #fca5a5;
-  --sl-color-red-400: #f87171;
-  --sl-color-red-500: #ef4444;
-  --sl-color-red-600: #dc2626;
-  --sl-color-red-700: #b91c1c;
-  --sl-color-red-800: #991b1b;
-  --sl-color-red-900: #7f1d1d;
-  --sl-color-red-1000: #501414;
+  --sl-color-red-50: 254 242 242;
+  --sl-color-red-100: 254 226 226;
+  --sl-color-red-200: 254 202 202;
+  --sl-color-red-300: 252 165 165;
+  --sl-color-red-400: 248 113 113;
+  --sl-color-red-500: 239 68 68;
+  --sl-color-red-600: 220 38 38;
+  --sl-color-red-700: 185 28 28;
+  --sl-color-red-800: 153 27 27;
+  --sl-color-red-900: 127 29 29;
+  --sl-color-red-1000: 80 20 20;
 
   /* Orange */
-  --sl-color-orange-50: #fff7ed;
-  --sl-color-orange-100: #ffedd5;
-  --sl-color-orange-200: #fed7aa;
-  --sl-color-orange-300: #fdba74;
-  --sl-color-orange-400: #fb923c;
-  --sl-color-orange-500: #f97316;
-  --sl-color-orange-600: #ea580c;
-  --sl-color-orange-700: #c2410c;
-  --sl-color-orange-800: #9a3412;
-  --sl-color-orange-900: #7c2d12;
-  --sl-color-orange-1000: #52200f;
+  --sl-color-orange-50: 255 247 237;
+  --sl-color-orange-100: 255 237 213;
+  --sl-color-orange-200: 254 215 170;
+  --sl-color-orange-300: 253 186 116;
+  --sl-color-orange-400: 251 146 60;
+  --sl-color-orange-500: 249 115 22;
+  --sl-color-orange-600: 234 88 12;
+  --sl-color-orange-700: 194 65 12;
+  --sl-color-orange-800: 154 52 18;
+  --sl-color-orange-900: 124 45 18;
+  --sl-color-orange-1000: 82 32 15;
 
   /* Amber */
-  --sl-color-amber-50: #fffbeb;
-  --sl-color-amber-100: #fef3c7;
-  --sl-color-amber-200: #fde68a;
-  --sl-color-amber-300: #fcd34d;
-  --sl-color-amber-400: #fbbf24;
-  --sl-color-amber-500: #f59e0b;
-  --sl-color-amber-600: #d97706;
-  --sl-color-amber-700: #b45309;
-  --sl-color-amber-800: #92400e;
-  --sl-color-amber-900: #78350f;
-  --sl-color-amber-1000: #4a230b;
+  --sl-color-amber-50: 255 251 235;
+  --sl-color-amber-100: 254 243 199;
+  --sl-color-amber-200: 253 230 138;
+  --sl-color-amber-300: 252 211 77;
+  --sl-color-amber-400: 251 191 36;
+  --sl-color-amber-500: 245 158 11;
+  --sl-color-amber-600: 217 119 6;
+  --sl-color-amber-700: 180 83 9;
+  --sl-color-amber-800: 146 64 14;
+  --sl-color-amber-900: 120 53 15;
+  --sl-color-amber-1000: 74 35 11;
 
   /* Yellow */
-  --sl-color-yellow-50: #fefce8;
-  --sl-color-yellow-100: #fef9c3;
-  --sl-color-yellow-200: #fef08a;
-  --sl-color-yellow-300: #fde047;
-  --sl-color-yellow-400: #facc15;
-  --sl-color-yellow-500: #eab308;
-  --sl-color-yellow-600: #ca8a04;
-  --sl-color-yellow-700: #a16207;
-  --sl-color-yellow-800: #854d0e;
-  --sl-color-yellow-900: #713f12;
-  --sl-color-yellow-1000: #3c260b;
+  --sl-color-yellow-50: 254 252 232;
+  --sl-color-yellow-100: 254 249 195;
+  --sl-color-yellow-200: 254 240 138;
+  --sl-color-yellow-300: 253 224 71;
+  --sl-color-yellow-400: 250 204 21;
+  --sl-color-yellow-500: 234 179 8;
+  --sl-color-yellow-600: 202 138 4;
+  --sl-color-yellow-700: 161 98 7;
+  --sl-color-yellow-800: 133 77 14;
+  --sl-color-yellow-900: 113 63 18;
+  --sl-color-yellow-1000: 60 38 11;
 
   /* Lime */
-  --sl-color-lime-50: #f7fee7;
-  --sl-color-lime-100: #ecfccb;
-  --sl-color-lime-200: #d9f99d;
-  --sl-color-lime-300: #bef264;
-  --sl-color-lime-400: #a3e635;
-  --sl-color-lime-500: #84cc16;
-  --sl-color-lime-600: #65a30d;
-  --sl-color-lime-700: #4d7c0f;
-  --sl-color-lime-800: #3f6212;
-  --sl-color-lime-900: #365314;
-  --sl-color-lime-1000: #26390e;
+  --sl-color-lime-50: 247 254 231;
+  --sl-color-lime-100: 236 252 203;
+  --sl-color-lime-200: 217 249 157;
+  --sl-color-lime-300: 190 242 100;
+  --sl-color-lime-400: 163 230 53;
+  --sl-color-lime-500: 132 204 22;
+  --sl-color-lime-600: 101 163 13;
+  --sl-color-lime-700: 77 124 15;
+  --sl-color-lime-800: 63 98 18;
+  --sl-color-lime-900: 54 83 20;
+  --sl-color-lime-1000: 38 57 14;
 
   /* Green */
-  --sl-color-green-50: #f0fdf4;
-  --sl-color-green-100: #dcfce7;
-  --sl-color-green-200: #bbf7d0;
-  --sl-color-green-300: #86efac;
-  --sl-color-green-400: #4ade80;
-  --sl-color-green-500: #22c55e;
-  --sl-color-green-600: #16a34a;
-  --sl-color-green-700: #15803d;
-  --sl-color-green-800: #166534;
-  --sl-color-green-900: #14532d;
-  --sl-color-green-1000: #0c311b;
+  --sl-color-green-50: 240 253 244;
+  --sl-color-green-100: 220 252 231;
+  --sl-color-green-200: 187 247 208;
+  --sl-color-green-300: 134 239 172;
+  --sl-color-green-400: 74 222 128;
+  --sl-color-green-500: 34 197 94;
+  --sl-color-green-600: 22 163 74;
+  --sl-color-green-700: 21 128 61;
+  --sl-color-green-800: 22 101 52;
+  --sl-color-green-900: 20 83 45;
+  --sl-color-green-1000: 12 49 27;
 
   /* Emerald */
-  --sl-color-emerald-50: #ecfdf5;
-  --sl-color-emerald-100: #d1fae5;
-  --sl-color-emerald-200: #a7f3d0;
-  --sl-color-emerald-300: #6ee7b7;
-  --sl-color-emerald-400: #34d399;
-  --sl-color-emerald-500: #10b981;
-  --sl-color-emerald-600: #059669;
-  --sl-color-emerald-700: #047857;
-  --sl-color-emerald-800: #065f46;
-  --sl-color-emerald-900: #064e3b;
-  --sl-color-emerald-1000: #032d22;
+  --sl-color-emerald-50: 236 253 245;
+  --sl-color-emerald-100: 209 250 229;
+  --sl-color-emerald-200: 167 243 208;
+  --sl-color-emerald-300: 110 231 183;
+  --sl-color-emerald-400: 52 211 153;
+  --sl-color-emerald-500: 16 185 129;
+  --sl-color-emerald-600: 5 150 105;
+  --sl-color-emerald-700: 4 120 87;
+  --sl-color-emerald-800: 6 95 70;
+  --sl-color-emerald-900: 6 78 59;
+  --sl-color-emerald-1000: 3 45 34;
 
   /* Teal */
-  --sl-color-teal-50: #f0fdfa;
-  --sl-color-teal-100: #ccfbf1;
-  --sl-color-teal-200: #99f6e4;
-  --sl-color-teal-300: #5eead4;
-  --sl-color-teal-400: #2dd4bf;
-  --sl-color-teal-500: #14b8a6;
-  --sl-color-teal-600: #0d9488;
-  --sl-color-teal-700: #0f766e;
-  --sl-color-teal-800: #115e59;
-  --sl-color-teal-900: #134e4a;
-  --sl-color-teal-1000: #0c2e2c;
+  --sl-color-teal-50: 240 253 250;
+  --sl-color-teal-100: 204 251 241;
+  --sl-color-teal-200: 153 246 228;
+  --sl-color-teal-300: 94 234 212;
+  --sl-color-teal-400: 45 212 191;
+  --sl-color-teal-500: 20 184 166;
+  --sl-color-teal-600: 13 148 136;
+  --sl-color-teal-700: 15 118 110;
+  --sl-color-teal-800: 17 94 89;
+  --sl-color-teal-900: 19 78 74;
+  --sl-color-teal-1000: 12 46 44;
 
   /* Cyan */
-  --sl-color-cyan-50: #ecfeff;
-  --sl-color-cyan-100: #cffafe;
-  --sl-color-cyan-200: #a5f3fc;
-  --sl-color-cyan-300: #67e8f9;
-  --sl-color-cyan-400: #22d3ee;
-  --sl-color-cyan-500: #06b6d4;
-  --sl-color-cyan-600: #0891b2;
-  --sl-color-cyan-700: #0e7490;
-  --sl-color-cyan-800: #155e75;
-  --sl-color-cyan-900: #164e63;
-  --sl-color-cyan-1000: #103442;
+  --sl-color-cyan-50: 236 254 255;
+  --sl-color-cyan-100: 207 250 254;
+  --sl-color-cyan-200: 165 243 252;
+  --sl-color-cyan-300: 103 232 249;
+  --sl-color-cyan-400: 34 211 238;
+  --sl-color-cyan-500: 6 182 212;
+  --sl-color-cyan-600: 8 145 178;
+  --sl-color-cyan-700: 14 116 144;
+  --sl-color-cyan-800: 21 94 117;
+  --sl-color-cyan-900: 22 78 99;
+  --sl-color-cyan-1000: 16 52 66;
 
   /* Sky */
-  --sl-color-sky-50: #f0f9ff;
-  --sl-color-sky-100: #e0f2fe;
-  --sl-color-sky-200: #bae6fd;
-  --sl-color-sky-300: #7dd3fc;
-  --sl-color-sky-400: #38bdf8;
-  --sl-color-sky-500: #0ea5e9;
-  --sl-color-sky-600: #0284c7;
-  --sl-color-sky-700: #0369a1;
-  --sl-color-sky-800: #075985;
-  --sl-color-sky-900: #0c4a6e;
-  --sl-color-sky-1000: #0b3249;
+  --sl-color-sky-50: 240 249 255;
+  --sl-color-sky-100: 224 242 254;
+  --sl-color-sky-200: 186 230 253;
+  --sl-color-sky-300: 125 211 252;
+  --sl-color-sky-400: 56 189 248;
+  --sl-color-sky-500: 14 165 233;
+  --sl-color-sky-600: 2 132 199;
+  --sl-color-sky-700: 3 105 161;
+  --sl-color-sky-800: 7 89 133;
+  --sl-color-sky-900: 12 74 110;
+  --sl-color-sky-1000: 11 50 73;
 
   /* Blue */
-  --sl-color-blue-50: #eff6ff;
-  --sl-color-blue-100: #dbeafe;
-  --sl-color-blue-200: #bfdbfe;
-  --sl-color-blue-300: #93c5fd;
-  --sl-color-blue-400: #60a5fa;
-  --sl-color-blue-500: #3b82f6;
-  --sl-color-blue-600: #2563eb;
-  --sl-color-blue-700: #1d4ed8;
-  --sl-color-blue-800: #1e40af;
-  --sl-color-blue-900: #1e3a8a;
-  --sl-color-blue-1000: #152149;
+  --sl-color-blue-50: 239 246 255;
+  --sl-color-blue-100: 219 234 254;
+  --sl-color-blue-200: 191 219 254;
+  --sl-color-blue-300: 147 197 253;
+  --sl-color-blue-400: 96 165 250;
+  --sl-color-blue-500: 59 130 246;
+  --sl-color-blue-600: 37 99 235;
+  --sl-color-blue-700: 29 78 216;
+  --sl-color-blue-800: 30 64 175;
+  --sl-color-blue-900: 30 58 138;
+  --sl-color-blue-1000: 21 33 73;
 
   /* Indigo */
-  --sl-color-indigo-50: #eef2ff;
-  --sl-color-indigo-100: #e0e7ff;
-  --sl-color-indigo-200: #c7d2fe;
-  --sl-color-indigo-300: #a5b4fc;
-  --sl-color-indigo-400: #818cf8;
-  --sl-color-indigo-500: #6366f1;
-  --sl-color-indigo-600: #4f46e5;
-  --sl-color-indigo-700: #4338ca;
-  --sl-color-indigo-800: #3730a3;
-  --sl-color-indigo-900: #312e81;
-  --sl-color-indigo-1000: #242154;
+  --sl-color-indigo-50: 238 242 255;
+  --sl-color-indigo-100: 224 231 255;
+  --sl-color-indigo-200: 199 210 254;
+  --sl-color-indigo-300: 165 180 252;
+  --sl-color-indigo-400: 129 140 248;
+  --sl-color-indigo-500: 99 102 241;
+  --sl-color-indigo-600: 79 70 229;
+  --sl-color-indigo-700: 67 56 202;
+  --sl-color-indigo-800: 55 48 163;
+  --sl-color-indigo-900: 49 46 129;
+  --sl-color-indigo-1000: 36 33 84;
 
   /* Violet */
-  --sl-color-violet-50: #f5f3ff;
-  --sl-color-violet-100: #ede9fe;
-  --sl-color-violet-200: #ddd6fe;
-  --sl-color-violet-300: #c4b5fd;
-  --sl-color-violet-400: #a78bfa;
-  --sl-color-violet-500: #8b5cf6;
-  --sl-color-violet-600: #7c3aed;
-  --sl-color-violet-700: #6d28d9;
-  --sl-color-violet-800: #5b21b6;
-  --sl-color-violet-900: #4c1d95;
-  --sl-color-violet-1000: #311558;
+  --sl-color-violet-50: 245 243 255;
+  --sl-color-violet-100: 237 233 254;
+  --sl-color-violet-200: 221 214 254;
+  --sl-color-violet-300: 196 181 253;
+  --sl-color-violet-400: 167 139 250;
+  --sl-color-violet-500: 139 92 246;
+  --sl-color-violet-600: 124 58 237;
+  --sl-color-violet-700: 109 40 217;
+  --sl-color-violet-800: 91 33 182;
+  --sl-color-violet-900: 76 29 149;
+  --sl-color-violet-1000: 49 21 88;
 
   /* Purple */
-  --sl-color-purple-50: #faf5ff;
-  --sl-color-purple-100: #f3e8ff;
-  --sl-color-purple-200: #e9d5ff;
-  --sl-color-purple-300: #d8b4fe;
-  --sl-color-purple-400: #c084fc;
-  --sl-color-purple-500: #a855f7;
-  --sl-color-purple-600: #9333ea;
-  --sl-color-purple-700: #7e22ce;
-  --sl-color-purple-800: #6b21a8;
-  --sl-color-purple-900: #581c87;
-  --sl-color-purple-1000: #2f1143;
+  --sl-color-purple-50: 250 245 255;
+  --sl-color-purple-100: 243 232 255;
+  --sl-color-purple-200: 233 213 255;
+  --sl-color-purple-300: 216 180 254;
+  --sl-color-purple-400: 192 132 252;
+  --sl-color-purple-500: 168 85 247;
+  --sl-color-purple-600: 147 51 234;
+  --sl-color-purple-700: 126 34 206;
+  --sl-color-purple-800: 107 33 168;
+  --sl-color-purple-900: 88 28 135;
+  --sl-color-purple-1000: 47 17 67;
 
   /* Fuchsia */
-  --sl-color-fuchsia-50: #fdf4ff;
-  --sl-color-fuchsia-100: #fae8ff;
-  --sl-color-fuchsia-200: #f5d0fe;
-  --sl-color-fuchsia-300: #f0abfc;
-  --sl-color-fuchsia-400: #e879f9;
-  --sl-color-fuchsia-500: #d946ef;
-  --sl-color-fuchsia-600: #c026d3;
-  --sl-color-fuchsia-700: #a21caf;
-  --sl-color-fuchsia-800: #86198f;
-  --sl-color-fuchsia-900: #701a75;
-  --sl-color-fuchsia-1000: #38103a;
+  --sl-color-fuchsia-50: 253 244 255;
+  --sl-color-fuchsia-100: 250 232 255;
+  --sl-color-fuchsia-200: 245 208 254;
+  --sl-color-fuchsia-300: 240 171 252;
+  --sl-color-fuchsia-400: 232 121 249;
+  --sl-color-fuchsia-500: 217 70 239;
+  --sl-color-fuchsia-600: 192 38 211;
+  --sl-color-fuchsia-700: 162 28 175;
+  --sl-color-fuchsia-800: 134 25 143;
+  --sl-color-fuchsia-900: 112 26 117;
+  --sl-color-fuchsia-1000: 56 16 58;
 
   /* Pink */
-  --sl-color-pink-50: #fdf2f8;
-  --sl-color-pink-100: #fce7f3;
-  --sl-color-pink-200: #fbcfe8;
-  --sl-color-pink-300: #f9a8d4;
-  --sl-color-pink-400: #f472b6;
-  --sl-color-pink-500: #ec4899;
-  --sl-color-pink-600: #db2777;
-  --sl-color-pink-700: #be185d;
-  --sl-color-pink-800: #9d174d;
-  --sl-color-pink-900: #831843;
-  --sl-color-pink-1000: #430e23;
+  --sl-color-pink-50: 253 242 248;
+  --sl-color-pink-100: 252 231 243;
+  --sl-color-pink-200: 251 207 232;
+  --sl-color-pink-300: 249 168 212;
+  --sl-color-pink-400: 244 114 182;
+  --sl-color-pink-500: 236 72 153;
+  --sl-color-pink-600: 219 39 119;
+  --sl-color-pink-700: 190 24 93;
+  --sl-color-pink-800: 157 23 77;
+  --sl-color-pink-900: 131 24 67;
+  --sl-color-pink-1000: 67 14 35;
 
   /* Rose */
-  --sl-color-rose-50: #fff1f2;
-  --sl-color-rose-100: #ffe4e6;
-  --sl-color-rose-200: #fecdd3;
-  --sl-color-rose-300: #fda4af;
-  --sl-color-rose-400: #fb7185;
-  --sl-color-rose-500: #f43f5e;
-  --sl-color-rose-600: #e11d48;
-  --sl-color-rose-700: #be123c;
-  --sl-color-rose-800: #9f1239;
-  --sl-color-rose-900: #881337;
-  --sl-color-rose-1000: #4a0d20;
+  --sl-color-rose-50: 255 241 242;
+  --sl-color-rose-100: 255 228 230;
+  --sl-color-rose-200: 254 205 211;
+  --sl-color-rose-300: 253 164 175;
+  --sl-color-rose-400: 251 113 133;
+  --sl-color-rose-500: 244 63 94;
+  --sl-color-rose-600: 225 29 72;
+  --sl-color-rose-700: 190 18 60;
+  --sl-color-rose-800: 159 18 57;
+  --sl-color-rose-900: 136 19 55;
+  --sl-color-rose-1000: 74 13 32;
 
   /*
    * Theme Tokens
@@ -480,7 +480,6 @@
   --sl-input-background-color-hover: var(--sl-color-white);
   --sl-input-background-color-focus: var(--sl-color-white);
   --sl-input-background-color-disabled: var(--sl-color-gray-100);
-
   --sl-input-border-color: var(--sl-color-gray-300);
   --sl-input-border-color-hover: var(--sl-color-gray-400);
   --sl-input-border-color-focus: var(--sl-color-primary-500);
@@ -502,14 +501,11 @@
   --sl-input-color-hover: var(--sl-color-gray-700);
   --sl-input-color-focus: var(--sl-color-gray-700);
   --sl-input-color-disabled: var(--sl-color-gray-900);
-
   --sl-input-icon-color: var(--sl-color-gray-400);
   --sl-input-icon-color-hover: var(--sl-color-gray-600);
   --sl-input-icon-color-focus: var(--sl-color-gray-600);
-
   --sl-input-placeholder-color: var(--sl-color-gray-400);
   --sl-input-placeholder-color-disabled: var(--sl-color-gray-600);
-
   --sl-input-spacing-small: var(--sl-spacing-small);
   --sl-input-spacing-medium: var(--sl-spacing-medium);
   --sl-input-spacing-large: var(--sl-spacing-large);
@@ -528,14 +524,14 @@
 
   --sl-input-help-text-color: var(--sl-color-gray-400);
 
-  /* Toggles (checkboxes, radios, switches) */
+  /* Toggle (checkboxes, radios, switches) */
   --sl-toggle-size: 1rem;
 
   /*
    * Overlay tokens
    */
 
-  --sl-overlay-background-color: #37415180;
+  --sl-overlay-background-color: var(--sl-color-blue-gray-900);
 
   /*
    * Panels
@@ -543,9 +539,8 @@
 
   --sl-panel-background-color: var(--sl-color-white);
   --sl-panel-border-color: var(--sl-color-gray-200);
-
   /*
-   * Tooltip tokens
+    Tooltip tokens
    */
 
   --sl-tooltip-border-radius: var(--sl-border-radius-medium);
diff --git a/src/themes/dark.css b/src/themes/dark.css
index 9ff9578fd..d5ee420a6 100644
--- a/src/themes/dark.css
+++ b/src/themes/dark.css
@@ -1,291 +1,291 @@
 :host,
 .sl-theme-dark {
-  --sl-color-black: #fff;
+  --sl-color-black: 255 255 255;
   --sl-color-white: var(--sl-color-gray-100);
 
   /* Blue Gray */
-  --sl-color-blue-gray-1000: #f8fafc;
-  --sl-color-blue-gray-900: #f1f5f9;
-  --sl-color-blue-gray-800: #e2e8f0;
-  --sl-color-blue-gray-700: #cbd5e1;
-  --sl-color-blue-gray-600: #94a3b8;
-  --sl-color-blue-gray-500: #64748b;
-  --sl-color-blue-gray-400: #475569;
-  --sl-color-blue-gray-300: #334155;
-  --sl-color-blue-gray-200: #1e293b;
-  --sl-color-blue-gray-100: #0f172a;
-  --sl-color-blue-gray-50: #0a101e;
+  --sl-color-blue-gray-1000: 248 250 252;
+  --sl-color-blue-gray-900: 241 245 249;
+  --sl-color-blue-gray-800: 226 232 240;
+  --sl-color-blue-gray-700: 203 213 225;
+  --sl-color-blue-gray-600: 148 163 184;
+  --sl-color-blue-gray-500: 100 116 139;
+  --sl-color-blue-gray-400: 71 85 105;
+  --sl-color-blue-gray-300: 51 65 85;
+  --sl-color-blue-gray-200: 30 41 59;
+  --sl-color-blue-gray-100: 15 23 42;
+  --sl-color-blue-gray-50: 10 16 30;
 
   /* Cool Gray */
-  --sl-color-cool-gray-1000: #f9fafb;
-  --sl-color-cool-gray-900: #f3f4f6;
-  --sl-color-cool-gray-800: #e5e7eb;
-  --sl-color-cool-gray-700: #d1d5db;
-  --sl-color-cool-gray-600: #9ca3af;
-  --sl-color-cool-gray-500: #6b7280;
-  --sl-color-cool-gray-400: #4b5563;
-  --sl-color-cool-gray-300: #374151;
-  --sl-color-cool-gray-200: #1f2937;
-  --sl-color-cool-gray-100: #111827;
-  --sl-color-cool-gray-50: #0c111d;
+  --sl-color-cool-gray-1000: 249 250 251;
+  --sl-color-cool-gray-900: 243 244 246;
+  --sl-color-cool-gray-800: 229 231 235;
+  --sl-color-cool-gray-700: 209 213 219;
+  --sl-color-cool-gray-600: 156 163 175;
+  --sl-color-cool-gray-500: 107 114 128;
+  --sl-color-cool-gray-400: 75 85 99;
+  --sl-color-cool-gray-300: 55 65 81;
+  --sl-color-cool-gray-200: 31 41 55;
+  --sl-color-cool-gray-100: 17 24 39;
+  --sl-color-cool-gray-50: 12 17 29;
 
   /* Gray */
-  --sl-color-gray-1000: #fafafa;
-  --sl-color-gray-900: #f4f4f5;
-  --sl-color-gray-800: #e4e4e7;
-  --sl-color-gray-700: #d4d4d8;
-  --sl-color-gray-600: #a1a1aa;
-  --sl-color-gray-500: #71717a;
-  --sl-color-gray-400: #52525b;
-  --sl-color-gray-300: #3f3f46;
-  --sl-color-gray-200: #27272a;
-  --sl-color-gray-100: #18181b;
-  --sl-color-gray-50: #131316;
+  --sl-color-gray-1000: 250 250 250;
+  --sl-color-gray-900: 244 244 245;
+  --sl-color-gray-800: 228 228 231;
+  --sl-color-gray-700: 212 212 216;
+  --sl-color-gray-600: 161 161 170;
+  --sl-color-gray-500: 113 113 122;
+  --sl-color-gray-400: 82 82 91;
+  --sl-color-gray-300: 63 63 70;
+  --sl-color-gray-200: 39 39 42;
+  --sl-color-gray-100: 24 24 27;
+  --sl-color-gray-50: 19 19 22;
 
   /* True Gray */
-  --sl-color-true-gray-1000: #fafafa;
-  --sl-color-true-gray-900: #f5f5f5;
-  --sl-color-true-gray-800: #e5e5e5;
-  --sl-color-true-gray-700: #d4d4d4;
-  --sl-color-true-gray-600: #a3a3a3;
-  --sl-color-true-gray-500: #737373;
-  --sl-color-true-gray-400: #525252;
-  --sl-color-true-gray-300: #404040;
-  --sl-color-true-gray-200: #262626;
-  --sl-color-true-gray-100: #171717;
-  --sl-color-true-gray-50: #111111;
+  --sl-color-true-gray-1000: 250 250 250;
+  --sl-color-true-gray-900: 245 245 245;
+  --sl-color-true-gray-800: 229 229 229;
+  --sl-color-true-gray-700: 212 212 212;
+  --sl-color-true-gray-600: 163 163 163;
+  --sl-color-true-gray-500: 115 115 115;
+  --sl-color-true-gray-400: 82 82 82;
+  --sl-color-true-gray-300: 64 64 64;
+  --sl-color-true-gray-200: 38 38 38;
+  --sl-color-true-gray-100: 23 23 23;
+  --sl-color-true-gray-50: 17 17 17;
 
   /* Warm Gray */
-  --sl-color-warm-gray-1000: #fafaf9;
-  --sl-color-warm-gray-900: #f5f5f4;
-  --sl-color-warm-gray-800: #e7e5e4;
-  --sl-color-warm-gray-700: #d6d3d1;
-  --sl-color-warm-gray-600: #a8a29e;
-  --sl-color-warm-gray-500: #78716c;
-  --sl-color-warm-gray-400: #57534e;
-  --sl-color-warm-gray-300: #44403c;
-  --sl-color-warm-gray-200: #292524;
-  --sl-color-warm-gray-100: #1c1917;
-  --sl-color-warm-gray-50: #131210;
+  --sl-color-warm-gray-1000: 250 250 249;
+  --sl-color-warm-gray-900: 245 245 244;
+  --sl-color-warm-gray-800: 231 229 228;
+  --sl-color-warm-gray-700: 214 211 209;
+  --sl-color-warm-gray-600: 168 162 158;
+  --sl-color-warm-gray-500: 120 113 108;
+  --sl-color-warm-gray-400: 87 83 78;
+  --sl-color-warm-gray-300: 68 64 60;
+  --sl-color-warm-gray-200: 41 37 36;
+  --sl-color-warm-gray-100: 28 25 23;
+  --sl-color-warm-gray-50: 19 18 16;
 
   /* Red */
-  --sl-color-red-1000: #fef2f2;
-  --sl-color-red-900: #fee2e2;
-  --sl-color-red-800: #fecaca;
-  --sl-color-red-700: #fca5a5;
-  --sl-color-red-600: #f87171;
-  --sl-color-red-500: #ef4444;
-  --sl-color-red-400: #dc2626;
-  --sl-color-red-300: #b91c1c;
-  --sl-color-red-200: #991b1b;
-  --sl-color-red-100: #7f1d1d;
-  --sl-color-red-50: #501414;
+  --sl-color-red-1000: 254 242 242;
+  --sl-color-red-900: 254 226 226;
+  --sl-color-red-800: 254 202 202;
+  --sl-color-red-700: 252 165 165;
+  --sl-color-red-600: 248 113 113;
+  --sl-color-red-500: 239 68 68;
+  --sl-color-red-400: 220 38 38;
+  --sl-color-red-300: 185 28 28;
+  --sl-color-red-200: 153 27 27;
+  --sl-color-red-100: 127 29 29;
+  --sl-color-red-50: 80 20 20;
 
   /* Orange */
-  --sl-color-orange-1000: #fff7ed;
-  --sl-color-orange-900: #ffedd5;
-  --sl-color-orange-800: #fed7aa;
-  --sl-color-orange-700: #fdba74;
-  --sl-color-orange-600: #fb923c;
-  --sl-color-orange-500: #f97316;
-  --sl-color-orange-400: #ea580c;
-  --sl-color-orange-300: #c2410c;
-  --sl-color-orange-200: #9a3412;
-  --sl-color-orange-100: #7c2d12;
-  --sl-color-orange-50: #52200f;
+  --sl-color-orange-1000: 255 247 237;
+  --sl-color-orange-900: 255 237 213;
+  --sl-color-orange-800: 254 215 170;
+  --sl-color-orange-700: 253 186 116;
+  --sl-color-orange-600: 251 146 60;
+  --sl-color-orange-500: 249 115 22;
+  --sl-color-orange-400: 234 88 12;
+  --sl-color-orange-300: 194 65 12;
+  --sl-color-orange-200: 154 52 18;
+  --sl-color-orange-100: 124 45 18;
+  --sl-color-orange-50: 82 32 15;
 
   /* Amber */
-  --sl-color-amber-1000: #fffbeb;
-  --sl-color-amber-900: #fef3c7;
-  --sl-color-amber-800: #fde68a;
-  --sl-color-amber-700: #fcd34d;
-  --sl-color-amber-600: #fbbf24;
-  --sl-color-amber-500: #f59e0b;
-  --sl-color-amber-400: #d97706;
-  --sl-color-amber-300: #b45309;
-  --sl-color-amber-200: #92400e;
-  --sl-color-amber-100: #78350f;
-  --sl-color-amber-50: #4a230b;
+  --sl-color-amber-1000: 255 251 235;
+  --sl-color-amber-900: 254 243 199;
+  --sl-color-amber-800: 253 230 138;
+  --sl-color-amber-700: 252 211 77;
+  --sl-color-amber-600: 251 191 36;
+  --sl-color-amber-500: 245 158 11;
+  --sl-color-amber-400: 217 119 6;
+  --sl-color-amber-300: 180 83 9;
+  --sl-color-amber-200: 146 64 14;
+  --sl-color-amber-100: 120 53 15;
+  --sl-color-amber-50: 74 35 11;
 
   /* Yellow */
-  --sl-color-yellow-1000: #fefce8;
-  --sl-color-yellow-900: #fef9c3;
-  --sl-color-yellow-800: #fef08a;
-  --sl-color-yellow-700: #fde047;
-  --sl-color-yellow-600: #facc15;
-  --sl-color-yellow-500: #eab308;
-  --sl-color-yellow-400: #ca8a04;
-  --sl-color-yellow-300: #a16207;
-  --sl-color-yellow-200: #854d0e;
-  --sl-color-yellow-100: #713f12;
-  --sl-color-yellow-50: #3c260b;
+  --sl-color-yellow-1000: 254 252 232;
+  --sl-color-yellow-900: 254 249 195;
+  --sl-color-yellow-800: 254 240 138;
+  --sl-color-yellow-700: 253 224 71;
+  --sl-color-yellow-600: 250 204 21;
+  --sl-color-yellow-500: 234 179 8;
+  --sl-color-yellow-400: 202 138 4;
+  --sl-color-yellow-300: 161 98 7;
+  --sl-color-yellow-200: 133 77 14;
+  --sl-color-yellow-100: 113 63 18;
+  --sl-color-yellow-50: 60 38 11;
 
   /* Lime */
-  --sl-color-lime-1000: #f7fee7;
-  --sl-color-lime-900: #ecfccb;
-  --sl-color-lime-800: #d9f99d;
-  --sl-color-lime-700: #bef264;
-  --sl-color-lime-600: #a3e635;
-  --sl-color-lime-500: #84cc16;
-  --sl-color-lime-400: #65a30d;
-  --sl-color-lime-300: #4d7c0f;
-  --sl-color-lime-200: #3f6212;
-  --sl-color-lime-100: #365314;
-  --sl-color-lime-50: #26390e;
+  --sl-color-lime-1000: 247 254 231;
+  --sl-color-lime-900: 236 252 203;
+  --sl-color-lime-800: 217 249 157;
+  --sl-color-lime-700: 190 242 100;
+  --sl-color-lime-600: 163 230 53;
+  --sl-color-lime-500: 132 204 22;
+  --sl-color-lime-400: 101 163 13;
+  --sl-color-lime-300: 77 124 15;
+  --sl-color-lime-200: 63 98 18;
+  --sl-color-lime-100: 54 83 20;
+  --sl-color-lime-50: 38 57 14;
 
   /* Green */
-  --sl-color-green-1000: #f0fdf4;
-  --sl-color-green-900: #dcfce7;
-  --sl-color-green-800: #bbf7d0;
-  --sl-color-green-700: #86efac;
-  --sl-color-green-600: #4ade80;
-  --sl-color-green-500: #22c55e;
-  --sl-color-green-400: #16a34a;
-  --sl-color-green-300: #15803d;
-  --sl-color-green-200: #166534;
-  --sl-color-green-100: #14532d;
-  --sl-color-green-50: #0c311b;
+  --sl-color-green-1000: 240 253 244;
+  --sl-color-green-900: 220 252 231;
+  --sl-color-green-800: 187 247 208;
+  --sl-color-green-700: 134 239 172;
+  --sl-color-green-600: 74 222 128;
+  --sl-color-green-500: 34 197 94;
+  --sl-color-green-400: 22 163 74;
+  --sl-color-green-300: 21 128 61;
+  --sl-color-green-200: 22 101 52;
+  --sl-color-green-100: 20 83 45;
+  --sl-color-green-50: 12 49 27;
 
   /* Emerald */
-  --sl-color-emerald-1000: #ecfdf5;
-  --sl-color-emerald-900: #d1fae5;
-  --sl-color-emerald-800: #a7f3d0;
-  --sl-color-emerald-700: #6ee7b7;
-  --sl-color-emerald-600: #34d399;
-  --sl-color-emerald-500: #10b981;
-  --sl-color-emerald-400: #059669;
-  --sl-color-emerald-300: #047857;
-  --sl-color-emerald-200: #065f46;
-  --sl-color-emerald-100: #064e3b;
-  --sl-color-emerald-50: #032d22;
+  --sl-color-emerald-1000: 236 253 245;
+  --sl-color-emerald-900: 209 250 229;
+  --sl-color-emerald-800: 167 243 208;
+  --sl-color-emerald-700: 110 231 183;
+  --sl-color-emerald-600: 52 211 153;
+  --sl-color-emerald-500: 16 185 129;
+  --sl-color-emerald-400: 5 150 105;
+  --sl-color-emerald-300: 4 120 87;
+  --sl-color-emerald-200: 6 95 70;
+  --sl-color-emerald-100: 6 78 59;
+  --sl-color-emerald-50: 3 45 34;
 
   /* Teal */
-  --sl-color-teal-1000: #f0fdfa;
-  --sl-color-teal-900: #ccfbf1;
-  --sl-color-teal-800: #99f6e4;
-  --sl-color-teal-700: #5eead4;
-  --sl-color-teal-600: #2dd4bf;
-  --sl-color-teal-500: #14b8a6;
-  --sl-color-teal-400: #0d9488;
-  --sl-color-teal-300: #0f766e;
-  --sl-color-teal-200: #115e59;
-  --sl-color-teal-100: #134e4a;
-  --sl-color-teal-50: #0c2e2c;
+  --sl-color-teal-1000: 240 253 250;
+  --sl-color-teal-900: 204 251 241;
+  --sl-color-teal-800: 153 246 228;
+  --sl-color-teal-700: 94 234 212;
+  --sl-color-teal-600: 45 212 191;
+  --sl-color-teal-500: 20 184 166;
+  --sl-color-teal-400: 13 148 136;
+  --sl-color-teal-300: 15 118 110;
+  --sl-color-teal-200: 17 94 89;
+  --sl-color-teal-100: 19 78 74;
+  --sl-color-teal-50: 12 46 44;
 
   /* Cyan */
-  --sl-color-cyan-1000: #ecfeff;
-  --sl-color-cyan-900: #cffafe;
-  --sl-color-cyan-800: #a5f3fc;
-  --sl-color-cyan-700: #67e8f9;
-  --sl-color-cyan-600: #22d3ee;
-  --sl-color-cyan-500: #06b6d4;
-  --sl-color-cyan-400: #0891b2;
-  --sl-color-cyan-300: #0e7490;
-  --sl-color-cyan-200: #155e75;
-  --sl-color-cyan-100: #164e63;
-  --sl-color-cyan-50: #103442;
+  --sl-color-cyan-1000: 236 254 255;
+  --sl-color-cyan-900: 207 250 254;
+  --sl-color-cyan-800: 165 243 252;
+  --sl-color-cyan-700: 103 232 249;
+  --sl-color-cyan-600: 34 211 238;
+  --sl-color-cyan-500: 6 182 212;
+  --sl-color-cyan-400: 8 145 178;
+  --sl-color-cyan-300: 14 116 144;
+  --sl-color-cyan-200: 21 94 117;
+  --sl-color-cyan-100: 22 78 99;
+  --sl-color-cyan-50: 16 52 66;
 
   /* Sky */
-  --sl-color-sky-1000: #f0f9ff;
-  --sl-color-sky-900: #e0f2fe;
-  --sl-color-sky-800: #bae6fd;
-  --sl-color-sky-700: #7dd3fc;
-  --sl-color-sky-600: #38bdf8;
-  --sl-color-sky-500: #0ea5e9;
-  --sl-color-sky-400: #0284c7;
-  --sl-color-sky-300: #0369a1;
-  --sl-color-sky-200: #075985;
-  --sl-color-sky-100: #0c4a6e;
-  --sl-color-sky-50: #0b3249;
+  --sl-color-sky-1000: 240 249 255;
+  --sl-color-sky-900: 224 242 254;
+  --sl-color-sky-800: 186 230 253;
+  --sl-color-sky-700: 125 211 252;
+  --sl-color-sky-600: 56 189 248;
+  --sl-color-sky-500: 14 165 233;
+  --sl-color-sky-400: 2 132 199;
+  --sl-color-sky-300: 3 105 161;
+  --sl-color-sky-200: 7 89 133;
+  --sl-color-sky-100: 12 74 110;
+  --sl-color-sky-50: 11 50 73;
 
   /* Blue */
-  --sl-color-blue-1000: #eff6ff;
-  --sl-color-blue-900: #dbeafe;
-  --sl-color-blue-800: #bfdbfe;
-  --sl-color-blue-700: #93c5fd;
-  --sl-color-blue-600: #60a5fa;
-  --sl-color-blue-500: #3b82f6;
-  --sl-color-blue-400: #2563eb;
-  --sl-color-blue-300: #1d4ed8;
-  --sl-color-blue-200: #1e40af;
-  --sl-color-blue-100: #1e3a8a;
-  --sl-color-blue-50: #152149;
+  --sl-color-blue-1000: 239 246 255;
+  --sl-color-blue-900: 219 234 254;
+  --sl-color-blue-800: 191 219 254;
+  --sl-color-blue-700: 147 197 253;
+  --sl-color-blue-600: 96 165 250;
+  --sl-color-blue-500: 59 130 246;
+  --sl-color-blue-400: 37 99 235;
+  --sl-color-blue-300: 29 78 216;
+  --sl-color-blue-200: 30 64 175;
+  --sl-color-blue-100: 30 58 138;
+  --sl-color-blue-50: 21 33 73;
 
   /* Indigo */
-  --sl-color-indigo-1000: #eef2ff;
-  --sl-color-indigo-900: #e0e7ff;
-  --sl-color-indigo-800: #c7d2fe;
-  --sl-color-indigo-700: #a5b4fc;
-  --sl-color-indigo-600: #818cf8;
-  --sl-color-indigo-500: #6366f1;
-  --sl-color-indigo-400: #4f46e5;
-  --sl-color-indigo-300: #4338ca;
-  --sl-color-indigo-200: #3730a3;
-  --sl-color-indigo-100: #312e81;
-  --sl-color-indigo-50: #242154;
+  --sl-color-indigo-1000: 238 242 255;
+  --sl-color-indigo-900: 224 231 255;
+  --sl-color-indigo-800: 199 210 254;
+  --sl-color-indigo-700: 165 180 252;
+  --sl-color-indigo-600: 129 140 248;
+  --sl-color-indigo-500: 99 102 241;
+  --sl-color-indigo-400: 79 70 229;
+  --sl-color-indigo-300: 67 56 202;
+  --sl-color-indigo-200: 55 48 163;
+  --sl-color-indigo-100: 49 46 129;
+  --sl-color-indigo-50: 36 33 84;
 
   /* Violet */
-  --sl-color-violet-1000: #f5f3ff;
-  --sl-color-violet-900: #ede9fe;
-  --sl-color-violet-800: #ddd6fe;
-  --sl-color-violet-700: #c4b5fd;
-  --sl-color-violet-600: #a78bfa;
-  --sl-color-violet-500: #8b5cf6;
-  --sl-color-violet-400: #7c3aed;
-  --sl-color-violet-300: #6d28d9;
-  --sl-color-violet-200: #5b21b6;
-  --sl-color-violet-100: #4c1d95;
-  --sl-color-violet-50: #311558;
+  --sl-color-violet-1000: 245 243 255;
+  --sl-color-violet-900: 237 233 254;
+  --sl-color-violet-800: 221 214 254;
+  --sl-color-violet-700: 196 181 253;
+  --sl-color-violet-600: 167 139 250;
+  --sl-color-violet-500: 139 92 246;
+  --sl-color-violet-400: 124 58 237;
+  --sl-color-violet-300: 109 40 217;
+  --sl-color-violet-200: 91 33 182;
+  --sl-color-violet-100: 76 29 149;
+  --sl-color-violet-50: 49 21 88;
 
   /* Purple */
-  --sl-color-purple-1000: #faf5ff;
-  --sl-color-purple-900: #f3e8ff;
-  --sl-color-purple-800: #e9d5ff;
-  --sl-color-purple-700: #d8b4fe;
-  --sl-color-purple-600: #c084fc;
-  --sl-color-purple-500: #a855f7;
-  --sl-color-purple-400: #9333ea;
-  --sl-color-purple-300: #7e22ce;
-  --sl-color-purple-200: #6b21a8;
-  --sl-color-purple-100: #581c87;
-  --sl-color-purple-50: #2f1143;
+  --sl-color-purple-1000: 250 245 255;
+  --sl-color-purple-900: 243 232 255;
+  --sl-color-purple-800: 233 213 255;
+  --sl-color-purple-700: 216 180 254;
+  --sl-color-purple-600: 192 132 252;
+  --sl-color-purple-500: 168 85 247;
+  --sl-color-purple-400: 147 51 234;
+  --sl-color-purple-300: 126 34 206;
+  --sl-color-purple-200: 107 33 168;
+  --sl-color-purple-100: 88 28 135;
+  --sl-color-purple-50: 47 17 67;
 
   /* Fuchsia */
-  --sl-color-fuchsia-1000: #fdf4ff;
-  --sl-color-fuchsia-900: #fae8ff;
-  --sl-color-fuchsia-800: #f5d0fe;
-  --sl-color-fuchsia-700: #f0abfc;
-  --sl-color-fuchsia-600: #e879f9;
-  --sl-color-fuchsia-500: #d946ef;
-  --sl-color-fuchsia-400: #c026d3;
-  --sl-color-fuchsia-300: #a21caf;
-  --sl-color-fuchsia-200: #86198f;
-  --sl-color-fuchsia-100: #701a75;
-  --sl-color-fuchsia-50: #38103a;
+  --sl-color-fuchsia-1000: 253 244 255;
+  --sl-color-fuchsia-900: 250 232 255;
+  --sl-color-fuchsia-800: 245 208 254;
+  --sl-color-fuchsia-700: 240 171 252;
+  --sl-color-fuchsia-600: 232 121 249;
+  --sl-color-fuchsia-500: 217 70 239;
+  --sl-color-fuchsia-400: 192 38 211;
+  --sl-color-fuchsia-300: 162 28 175;
+  --sl-color-fuchsia-200: 134 25 143;
+  --sl-color-fuchsia-100: 112 26 117;
+  --sl-color-fuchsia-50: 56 16 58;
 
   /* Pink */
-  --sl-color-pink-1000: #fdf2f8;
-  --sl-color-pink-900: #fce7f3;
-  --sl-color-pink-800: #fbcfe8;
-  --sl-color-pink-700: #f9a8d4;
-  --sl-color-pink-600: #f472b6;
-  --sl-color-pink-500: #ec4899;
-  --sl-color-pink-400: #db2777;
-  --sl-color-pink-300: #be185d;
-  --sl-color-pink-200: #9d174d;
-  --sl-color-pink-100: #831843;
-  --sl-color-pink-50: #430e23;
+  --sl-color-pink-1000: 253 242 248;
+  --sl-color-pink-900: 252 231 243;
+  --sl-color-pink-800: 251 207 232;
+  --sl-color-pink-700: 249 168 212;
+  --sl-color-pink-600: 244 114 182;
+  --sl-color-pink-500: 236 72 153;
+  --sl-color-pink-400: 219 39 119;
+  --sl-color-pink-300: 190 24 93;
+  --sl-color-pink-200: 157 23 77;
+  --sl-color-pink-100: 131 24 67;
+  --sl-color-pink-50: 67 14 35;
 
   /* Rose */
-  --sl-color-rose-1000: #fff1f2;
-  --sl-color-rose-900: #ffe4e6;
-  --sl-color-rose-800: #fecdd3;
-  --sl-color-rose-700: #fda4af;
-  --sl-color-rose-600: #fb7185;
-  --sl-color-rose-500: #f43f5e;
-  --sl-color-rose-400: #e11d48;
-  --sl-color-rose-300: #be123c;
-  --sl-color-rose-200: #9f1239;
-  --sl-color-rose-100: #881337;
-  --sl-color-rose-50: #4a0d20;
+  --sl-color-rose-1000: 255 241 242;
+  --sl-color-rose-900: 255 228 230;
+  --sl-color-rose-800: 254 205 211;
+  --sl-color-rose-700: 253 164 175;
+  --sl-color-rose-600: 251 113 133;
+  --sl-color-rose-500: 244 63 94;
+  --sl-color-rose-400: 225 29 72;
+  --sl-color-rose-300: 190 18 60;
+  --sl-color-rose-200: 159 18 57;
+  --sl-color-rose-100: 136 19 55;
+  --sl-color-rose-50: 74 13 32;
 }