diff --git a/sass/style.scss b/sass/style.scss
index 9b0cd07..78cd095 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -584,8 +584,8 @@ a {
         width: 80px;
         height: 80px;
         border-radius: 50%;
-        border: 1px solid var(--color-border);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch-color) 40%, white),
+                    0 2px 8px rgba(0, 0, 0, 0.08);
     }
 
     &__name {
diff --git a/templates/index.html b/templates/index.html
index 89423f7..ebfeb57 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -156,7 +156,7 @@
         <div class="palette">
             {% for swatch in config.extra.palette %}
             <div class="palette__item">
-                <div class="palette__circle" style="background-color: {{ swatch.color }}"></div>
+                <div class="palette__circle" style="--swatch-color: {{ swatch.color }}; background-color: {{ swatch.color }}"></div>
                 <span class="palette__name">{{ swatch.name }}</span>
             </div>
             {% endfor %}