diff --git a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/services/hazard-plots.service.ts b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/services/hazard-plots.service.ts
index 1d6f9c21b5c4aaccd372b0c19527c410e71b39d5..7ec681590331b10780421046ca4d597e0885a4f7 100644
--- a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/services/hazard-plots.service.ts
+++ b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/services/hazard-plots.service.ts
@@ -14,7 +14,6 @@ import {
 } from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/model';
 import {Parameter} from '@ghsc/nshmp-utils-ts/libs/nshmp-ws-utils/metadata';
 import {PlotlyPlot} from '@ghsc/nshmp-utils-ts/libs/plotly';
-import * as d3Color from 'd3-scale-chromatic';
 import {Dash, PlotData} from 'plotly.js';
 
 import {
@@ -380,7 +379,7 @@ export class HazardPlotsService {
       options.availableModels
     );
 
-    const colors = d3Color.schemeCategory10;
+    const colors = plotUtils.COLORWAY;
     let count = 0;
 
     return hazardCurves.map(data => {
diff --git a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/services/spectra-plots.service.ts b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/services/spectra-plots.service.ts
index 6d19c71dfeb844cbcbfc111e9ee31cdb508cdead..fdb820d8381ae68daa3a2cc43dcde846f943f5a7 100644
--- a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/services/spectra-plots.service.ts
+++ b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/services/spectra-plots.service.ts
@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {FormGroupControls} from '@ghsc/nshmp-lib-ng/nshmp';
-import {NshmpPlot} from '@ghsc/nshmp-lib-ng/plot';
+import {NshmpPlot, plotUtils} from '@ghsc/nshmp-lib-ng/plot';
 import {Imt, imtToPeriod} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/gmm';
 import {
   SourceType,
@@ -8,7 +8,6 @@ import {
 } from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/model';
 import {Parameter} from '@ghsc/nshmp-utils-ts/libs/nshmp-ws-utils/metadata';
 import {PlotlyPlot} from '@ghsc/nshmp-utils-ts/libs/plotly';
-import * as d3Color from 'd3-scale-chromatic';
 import {Dash, PlotData} from 'plotly.js';
 
 import {
@@ -223,7 +222,7 @@ export class SpectraPlotsService {
     const spectraFilter = (spectra: Spectra) =>
       spectra.sourceType === SourceType.TOTAL;
     const name = (modelInfo: Parameter) => modelInfo.display;
-    const colors = d3Color.schemeCategory10;
+    const colors = plotUtils.COLORWAY;
 
     return this.createSpectraPlot({
       availableModels,
@@ -407,7 +406,7 @@ export class SpectraPlotsService {
     const lines: Partial<PlotData>[] = [];
     let count = 0;
     const lineColors =
-      options.colors === undefined ? d3Color.schemeCategory10 : options.colors;
+      options.colors === undefined ? plotUtils.COLORWAY : options.colors;
 
     spectra.map(spectrum => {
       const color =