--- a/browser/extensions/pocket/skin/shared/pocket.css
+++ b/browser/extensions/pocket/skin/shared/pocket.css
@@ -18,17 +18,17 @@ panelmultiview[mainViewId=PanelUI-pocket
 }
 
 #pocket-button-box[animate="true"] > #pocket-button,
 #pocket-button[open="true"][animationsenabled] > .toolbarbutton-icon {
   fill: transparent;
 }
 
 #pocket-button-box[open="true"] > #pocket-button {
-  fill: rgb(213,32,20);
+  fill: #ef4056;
   fill-opacity: 1;
 }
 
 @keyframes pocket-animation {
   from {
     transform: translateX(0);
   }
   to {
@@ -94,17 +94,17 @@ panelmultiview[mainViewId=PanelUI-pocket
 }
 
 #pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image,
 #pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-name: pocket-animation;
   animation-timing-function: steps(12);
   animation-duration: 200ms;
   background-image: url("chrome://pocket-shared/skin/pocket-animation.svg");
-  fill: rgb(213,32,20);
+  fill: #ef4056;
   -moz-context-properties: fill;
   width: 260px;
 }
 
 #pocket-button-box[animate="true"]:-moz-locale-dir(rtl) > #pocket-animatable-box > #pocket-animatable-image,
 #pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-name: pocket-animation-rtl;
 }
@@ -117,38 +117,38 @@ panelmultiview[mainViewId=PanelUI-pocket
   from {
     transform: translateX(0);
     fill: inherit;
   }
   25% {
     fill: inherit;
   }
   50% {
-    fill: rgb(213,32,20);
+    fill: #ef4056;
   }
   to {
     transform: translateX(-1056px);
-    fill: rgb(213,32,20);
+    fill: #ef4056;
   }
 }
 
 @keyframes library-pocket-animation-rtl {
   from {
     transform: scaleX(-1) translateX(0);
     fill: inherit;
   }
   25% {
     fill: inherit;
   }
   50% {
-    fill: rgb(213,32,20);
+    fill: #ef4056;
   }
   to {
     transform: scaleX(-1) translateX(-1056px);
-    fill: rgb(213,32,20);
+    fill: #ef4056;
   }
 }
 
 /* The animations for the pocket-button and library-button are disabled
    outside of the nav-bar due to bug 1382894. */
 :-moz-any(#pocket-button, #library-button) > .toolbarbutton-animatable-box {
   display: none;
 }
@@ -157,17 +157,17 @@ panelmultiview[mainViewId=PanelUI-pocket
 }
 
 /* We need to use an animation here instead of a transition
    to guarantee that the animation succeeds. With transitions
    if the starting value is already equal to the end value
    then no transition will occur and thus no transitionend event. */
 @keyframes library-pocket-fade {
   from {
-    fill: rgb(213,32,20);
+    fill: #ef4056;
   }
   to {
     fill: inherit;
   }
 }
 
 #library-button[animate="pocket"] {
   position: relative;
@@ -213,17 +213,17 @@ panelmultiview[mainViewId=PanelUI-pocket
 
 #library-button[animate="pocket"][fade] > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   animation-name: library-pocket-fade;
   animation-duration: 2s;
   animation-timing-function: ease-out;
 }
 
 #pocket-button[cui-areatype="toolbar"][open] {
-  fill: rgb(213,32,20);
+  fill: #ef4056;
 }
 
 @media not all and (min-resolution: 1.1dppx) {
   #pocket-button[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #pocket-button {
     list-style-image: url(chrome://pocket/skin/menuPanel.png);
     -moz-image-region: rect(0, 32px, 32px, 0);
   }