Catppuccin Mocha

The darkest flavor of Catppuccin — a community-driven pastel theme with six accents and six surface tones. Mocha is the deep midnight variant of the family (Latte / Frappé / Macchiato being the lighter cousins). Both light and dark mode role mappings draw exclusively from the Mocha palette: dark maps the canonical role taxonomy (base/mantle/ crust + surfaces); light "mode" within Mocha is a role-shifted view where the brighter text/subtext tones become the canvas.

26 swatches 14 light roles 14 dark roles catppuccinmochaeditordark-firstpastel

Swatches

rosewater
#F5E0DC
Soft pink-tan accent.
flamingo
#F2CDCD
Coral pink accent.
pink
#F5C2E7
Vivid pink accent.
mauve
#CBA6F7
Purple accent (signature).
red
#F38BA8
Error / red accent.
maroon
#EBA0AC
Warm red accent.
peach
#FAB387
Orange / peach accent.
yellow
#F9E2AF
Warning / yellow accent.
green
#A6E3A1
Success / green accent.
teal
#94E2D5
Teal accent.
sky
#89DCEB
Sky-blue accent.
sapphire
#74C7EC
Sapphire accent.
blue
#89B4FA
Primary / blue accent.
lavender
#B4BEFE
Lavender accent.
text
#CDD6F4
Primary text.
subtext1
#BAC2DE
Secondary text.
subtext0
#A6ADC8
Tertiary text.
overlay2
#9399B2
Brightest overlay.
overlay1
#7F849C
Mid overlay.
overlay0
#6C7086
Subtle overlay.
surface2
#585B70
Brightest surface.
surface1
#45475A
Mid surface.
surface0
#313244
Subtle surface.
base
#1E1E2E
Canvas (dark).
mantle
#181825
Slightly darker than base.
crust
#11111B
Darkest neutral.

Mode role mappings

Light mode (14 roles)

accent → mauve
accent-hover → pink
background → text
error → red
primary → blue
primary-hover → sapphire
success → green
surface → subtext1
surface-elevated → subtext0
text-primary → base
text-secondary → mantle
text-tertiary → surface2
warning → yellow
warning-hover → peach

Dark mode (14 roles)

accent → mauve
accent-hover → pink
background → base
error → red
primary → blue
primary-hover → sapphire
success → green
surface → mantle
surface-elevated → surface0
text-primary → text
text-secondary → subtext1
text-tertiary → subtext0
warning → yellow
warning-hover → peach

Provenance

Source
https://github.com/catppuccin/palette/blob/main/palette.json
License
MIT
Attribution
Catppuccin community — github.com/catppuccin
Imported
2026-05-17 (upstream version 1.8.0)
Notes
Hex values from the canonical Catppuccin palette.json (v1.8.0, mocha flavor). Both modes.light and modes.dark draw from the same Mocha palette — Mocha is a dark-first flavor, so the light mode here is a within-Mocha role-shift (text becomes canvas), not the Latte flavor.