diff --git a/src/components/Bgm.js b/src/components/Bgm.js
index 7d0d7c3..79bd2a7 100644
--- a/src/components/Bgm.js
+++ b/src/components/Bgm.js
@@ -25,8 +25,9 @@ const StyledWraper = styled.aside`
   audio {
     display: none;
   }
+  animation: ${Rotation} 2s infinite linear forwards;
   &.playing {
-    animation: ${Rotation} 2s infinite linear forwards;
+    animation-play-state: running;
   }
   &.paused {
     animation-play-state: paused;
diff --git a/src/components/Color.js b/src/components/Color.js
index d4832ac..b0e29c6 100644
--- a/src/components/Color.js
+++ b/src/components/Color.js
@@ -18,7 +18,7 @@ const Wrapper = styled.li`
   transition: all 0.5s;
   align-self: flex-start;
   opacity: 0.8;
-  background-color: ${({ rgb }) => `rgba(${rgb.join(',')},.4)`};
+  background-color: ${({ rgb }) => `rgba(${rgb.join(',')},.3)`};
   &:hover {
     opacity: 0.9;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);