Catppuccin Hex Chart: Palette Codes for All 4 Flavors

[Shop teh Catppuccin Keycap Set]

If you need a Catppuccin hex value, you usually need it now: paste into CSS, a Figma fill, a terminal config, or a keycap proof. This page is the Catppuccin palette as four columns of hex. Same 26 names in Latte, Frappé, Macchiato, and Mocha. Official codes from the catppuccin/palette repo.

The names do not change between flavors. Mauve is always Mauve. Base is always the main background. Only the roast changes. That is why a port can swap flavors without remapping every highlight.

The four flavors, in hex

Latte is the light theme. Frappé, Macchiato, and Mocha are three dark roasts, lightest to darkest. Mocha is the one in most screenshots. Frappé is the muted middle. Macchiato sits between them. If you already compared this family to Tokyo Night, the dark default you were looking at was Mocha base #1e1e2e.

Read that table left to right on one row and you see the actual product. Latte accents are saturated and darker so they sit on cream. Dark-flavor accents are pastel so they sit on navy-purple. Mixing Mocha Mauve into a Latte UI looks washed. Mixing Latte Peach into Mocha looks like a warning light.

Catppuccin palette: 14 accents

These are the colors people mean when they say "the pastels." Use them for syntax, links, status, and anything that should read as a token. Do not use them for large backgrounds unless you are making a poster.

Search traffic clusters on a handful of these. Mocha Mauve #cba6f7, Mocha Peach #fab387, Mocha Blue #89b4fa, Mocha Green #a6e3a1. Latte's versions of the same names are a different paint: Mauve #8839ef, Peach #fe640b, Blue #1e66f5. If a mockup "looks official except the purple is too loud," you probably grabbed Latte Mauve and dropped it on a Mocha base.

Surfaces, text, and chrome

The other 12 names are the UI stack. Base is the page. Mantle and crust sit behind it (sidebars, status bars, the layer under the editor). Surfaces and overlays are steps up for panels, rules, and muted chrome. Text / subtext / overlay handle foreground hierarchy. Overlay 0 is the usual comment color in dark flavors.

A practical mapping for app chrome in Mocha: window #1e1e2e (base), sidebar #181825 (mantle), status line or tab bar #11111b (crust), raised panel #313244 (surface 0). Copy that pattern to Macchiato or Frappé by taking the same names, not by lightening Mocha in a color picker. The flavors were mixed as sets.

Catppuccin keycap colors

Custom keycap makers get asked for Catppuccin keycap colors more often than the official docs cover. The palette is not a GMK set. It is a screen palette. ABS/PBT and dye-sub legends will not match a hex on a calibrated monitor, and that is fine if you treat the names as roles instead of a PANTONE contract.

For a dark board that should read as Mocha on a desk:

• Alphas: body Base #1e1e2e or Mantle #181825, legends Text #cdd6f4. Crust #11111b is a better bottom row / case color than a large alpha field. It swallows legends in photos.
• Modifiers: pick two accents and stop. Mauve #cba6f7 plus Peach #fab387 is the screenshot combo. Blue #89b4fa plus Green #a6e3a1 looks more "terminal." Pink #f5c2e7 as a third accent on Escape only.
• Numbers / function row: Yellow #f9e2af and Sapphire #74c7ec if you want the row to separate without shouting.

For a light board that should read as Latte:

• Alphas: Base #eff1f5, legends Text #4c4f69. Crust #dce0e8 as a slightly cooler novelty or case.
• Modifiers: Latte Mauve #8839ef and Peach #fe640b hold up on cream. Dark-flavor pastels on a Latte body look faded in person, the same way they look faded in CSS.

Skip Overlay and Surface for legends. They are made to recede on a display. On a keycap they read as dirty gray. If a vendor asks for "one hex for the whole kit," send Mocha Base + Text + Mauve. That is enough to look like Catppuccin without turning the board into a bag of jelly beans.

CSS variables you can paste

Flavor files in the official palette already export these names. A minimal Mocha sheet looks like this. Swap the hex block for another flavor from the tables above.

:root {
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;
  --ctp-text: #cdd6f4;
  --ctp-subtext0: #a6adc8;
  --ctp-overlay0: #6c7086;
  --ctp-surface0: #313244;
  --ctp-mauve: #cba6f7;
  --ctp-blue: #89b4fa;
  --ctp-peach: #fab387;
  --ctp-green: #a6e3a1;
  --ctp-red: #f38ba8;
  --ctp-yellow: #f9e2af;
  --ctp-teal: #94e2d5;
}

Keep the names. If you rename Mauve to "purple-1," the next port you install will not match your tokens, and you will be back on this page looking up hex again.

Which flavor's hex to copy

Copy Mocha if the rest of the machine is already on the dark default, or if you are matching a screenshot. Copy Macchiato if Mocha feels a bit too crushed on a dim laptop panel. Copy Frappé if you want the same names with less punch. Copy Latte only when the surface is actually light. Do not "brighten Mocha in Figma" and call it Latte. The accent hex values are not a brightness slider.

If you are choosing a theme rather than a fill color, the comparison that usually settles it is still Tokyo Night vs Catppuccin. This page is the color card underneath that choice.

Hex values match catppuccin.com/palette and the palette package. If a port disagrees with a cell here, the port is stale.