Implementing a multi-color palette and sepia toned cover image using Cloud Dancer color

I used the light pastel palette from Pantone and converted it into a multi-color palette for use in my custom Rise theme, including Cloud Dancer which I used to colorize and my cover page image and make it more of a sepia toned image, all with CSS. And a little help from ChatGPT.

 

CSS from the video:

:root {
  /* Pantone 11-0515 TCX — Lemon Icing */
  --lemon-icing: #F6EEC9;

  /* Pantone 13-4108 TCX — Nimbus Cloud */
  --nimbus-cloud: #DADBDD;

  /* Pantone 11-1400 TCX — Raindrops on Roses */
  --raindrops-on-roses: #EADCDD;

  /* Pantone 11-4201 TCX — Cloud Dancer */
  --cloud-dancer: #F1EFEA;

  /* Pantone 13-4306 TCX — Ice Melt */
  --ice-melt: #DCE7F2;

  /* Pantone 12-1107 TCX — Peach Dust */
  --peach-dust: #EEDCD1;

  /* Pantone 13-6006 TCX — Almost Aqua */
  --almost-aqua: #D2D9C8;

  /* Pantone 13-3802 TCX — Orchid Tint */
  --orchid-tint: #DED7DD;
    
  /* friendly names */  
  --ui-bg-primary: var(--cloud-dancer);
  --ui-bg-secondary: var(--nimbus-cloud);
  --ui-accent-warm: var(--peach-dust);
  --ui-accent-cool: var(--almost-aqua);
  --ui-highlight: var(--lemon-icing);
  --ui-info: var(--ice-melt);
  --ui-subtle-pink: var(--raindrops-on-roses);
  --ui-subtle-purple: var(--orchid-tint);

}

#app .cover--layout-left-overlay .cover__header-content--overlay-light .cover__header-content-action-link {
  background-color: var(--ui-bg-primary);
  color: black;
}

#app .cover__header-image::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
    background-color: var(--ui-bg-primary);
  mix-blend-mode: color;
}

#app .cover__header-image::after {
  content: "";
  background: var(--ui-bg-primary);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .6;
}

.nav-sidebar-header__content a.nav-sidebar-header__title,
#app .cover__header-content-title {font-weight:400}