back to palettes
Color lane

Prism Spectrum

One white beam fanned into three spectral accents, used like highlighters on a warm-light ground — bright, crisp, never muddy. The whole palette is a prism's dispersed light.

Signature · the star
primary accentMagenta · #f0468c
Cyan · #1fb6c9
Amber · #f2a33c
Neutrals · the ground
bg
#fbf7f2
surface
#ffffff
text
#1a1620
muted
#6e6678
border
rgba(26,22,32,0.10)
Semantic · functional accessory
success
warning
error
info
Ramps
neutral
Download .cssspectralwarm-lightmagentacyanamber
Do
  • · Lead with ink for primary action and magenta for the highest-energy accent; let cyan carry focus and amber carry warmth.
  • · Use the three accents like highlighters — confined to the split-bar, marks, focus, and transmitted light.
  • · Keep semantic colours quiet and small; never let them become the visual lead.
  • · Carry the accents as the spectral split-bar so they recolour together on a palette swap.
Don't
  • · Don't flood surfaces with accent colour or run more than these three accents.
  • · Don't put the palette on cold white; it is staged on a warm-light ground so the light glows.
  • · Don't muddy the accents by tinting the whole field; keep plaques clear white.
try it

remix with this palette

Drop Prism Spectrum onto any UI language and swap the art style — the preview recolors live.

UI language
Palette · fixed
Prism Spectrum
Art style
Landing Page
live preview · recolored + filled