diff --git a/assets/styles/global.css b/assets/styles/global.css
index f871a66..9e8b2bc 100644
--- a/assets/styles/global.css
+++ b/assets/styles/global.css
@@ -98,7 +98,7 @@ ul { list-style: none; }
 
 :focus-visible {
     outline: 0.125rem solid;
-    outline-color: hsl(var(--color-1, 0 0% 0%));
+    outline-color: hsla(var(--color-1, 0 0% 0% 100%));
     outline-offset: var(--focus-offset, 0);
 }
 
diff --git a/assets/styles/settings.css b/assets/styles/settings.css
index c4fc018..16ae747 100644
--- a/assets/styles/settings.css
+++ b/assets/styles/settings.css
@@ -53,7 +53,7 @@
 .settings__button:focus-visible {
     --focus-offset: 0.125rem;
 
-    color: hsl(var(--settings-interact));
+    color: hsla(var(--settings-interact));
 }
 
 @media (hover:hover) {
@@ -87,7 +87,7 @@
 }
 
 .settings__button--toggle-settings[aria-expanded="true"] .settings__svg--toggle-settings {
-    color: hsl(var(--settings-interact));
+    color: hsla(var(--settings-interact));
     transform: rotate(180deg);
 }
 
diff --git a/assets/styles/simple-note.css b/assets/styles/simple-note.css
index 6920d55..056d262 100644
--- a/assets/styles/simple-note.css
+++ b/assets/styles/simple-note.css
@@ -1,5 +1,5 @@
 body {
-    color: hsl(var(--color-1));
+    color: hsla(var(--color-1));
     background-color: hsl(var(--color-2));
     min-height: 21.875rem;
 }