diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
index 8df5168471336e..7060be264b7bdb 100644
--- a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
+++ b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
@@ -10,12 +10,14 @@ import styled from 'styled-components';
 import { isEmpty } from 'lodash';
 import Suggestion from './Suggestion';
 import { units, colors, px, unit } from '../../../../style/variables';
+import { rgba } from 'polished';
 
 const List = styled.ul`
   width: 100%;
   border: 1px solid ${colors.gray4};
   border-radius: ${px(units.quarter)};
-  box-shadow: 0px ${px(units.quarter)} ${px(units.double)} rgba(0, 0, 0, 0.1);
+  box-shadow: 0px ${px(units.quarter)} ${px(units.double)}
+    ${rgba(colors.black, 0.1)};
   position: absolute;
   background: #fff;
   z-index: 10;
diff --git a/x-pack/plugins/apm/public/components/shared/Modal.js b/x-pack/plugins/apm/public/components/shared/Modal.js
index f588b015e856a5..07e8d9ada99613 100644
--- a/x-pack/plugins/apm/public/components/shared/Modal.js
+++ b/x-pack/plugins/apm/public/components/shared/Modal.js
@@ -9,7 +9,8 @@ import Portal from 'react-portal';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Close } from './Icons';
-import { fontSizes, units } from '../../style/variables';
+import { fontSizes, units, colors } from '../../style/variables';
+import { rgba } from 'polished';
 
 const Header = styled.div`
   display: flex;
@@ -36,7 +37,7 @@ const ModalFixed = styled.div`
 
 const ModalOverlay = styled(ModalFixed)`
   z-index: 10;
-  background: rgba(45, 45, 45, 0.8);
+  background: ${rgba(colors.gray2, 0.8)};
   height: 100%;
 `;
 
diff --git a/x-pack/plugins/apm/public/store/selectors/chartSelectors.js b/x-pack/plugins/apm/public/store/selectors/chartSelectors.js
index ef5d918476a0f0..cc898d6b667799 100644
--- a/x-pack/plugins/apm/public/store/selectors/chartSelectors.js
+++ b/x-pack/plugins/apm/public/store/selectors/chartSelectors.js
@@ -12,6 +12,7 @@ import {
   asDecimal,
   tpmUnit
 } from '../../utils/formatters';
+import { rgba } from 'polished';
 
 export const getEmptySerie = memoize(
   (start = Date.now() - 3600000, end = Date.now()) => {
@@ -91,7 +92,7 @@ export function getResponseTimeSeries(chartsData) {
       ),
       type: 'area',
       color: 'none',
-      areaColor: 'rgba(49, 133, 252, 0.1)' // apmBlue
+      areaColor: rgba(colors.apmBlue, 0.1)
     });
 
     series.splice(1, 0, {
@@ -105,7 +106,7 @@ export function getResponseTimeSeries(chartsData) {
       ),
       type: 'areaMaxHeight',
       color: 'none',
-      areaColor: 'rgba(146, 0, 0, 0.1)' // apmRed
+      areaColor: rgba(colors.apmRed, 0.1)
     });
   }