Catppuccin Flavors: Mocha, Macchiato, Frappé, and Latte

Petit Keycaps
Shop Catppuccin Keycap Set Shop Catppuccin Keycap Set

Catppuccin has four flavors: Latte, Frappé, Macchiato, and Mocha. They share the same color names and the same basic design language, but they are not interchangeable skins. Each flavor rebuilds the palette for a different brightness level, from Latte's pale daytime canvas to Mocha's deep nighttime background.

The fastest way to choose is not to ask which screenshot looks best. Ask where your screen sits, how much light reaches it, and how clearly you need to see secondary text. This guide compares the four Catppuccin flavors as working environments, so you can pick one without spending an evening cycling through themes.

Four developer workspaces progressing from Catppuccin Latte to Frappe, Macchiato, and Mocha
The four flavors behave like four lighting environments: bright Latte, muted Frappé, balanced Macchiato, and deep Mocha. Illustration generated for Petit Keycaps.

Catppuccin flavors at a glance

Flavor Type Base Overall feel Best fit
Latte Light #eff1f5 Clean, bright, and ink-like Daylight, bright offices, projectors
Frappé Lightest dark #303446 Muted and low-pressure Mixed light, softer dark mode
Macchiato Middle dark #24273a Balanced and comfortably dark All-day coding, average laptop panels
Mocha Deepest dark #1e1e2e Rich, immersive, and pastel-forward Dim rooms, high-quality displays, dark setups

Latte is the only light flavor. The other three form a dark progression: Frappé is the lightest and most subdued, Macchiato sits in the middle, and Mocha is the deepest. That order is useful, but brightness alone does not tell the whole story. The accents are retuned as well, so every flavor keeps its own balance between foreground, background, and color.

Latte: the daylight flavor

Latte uses a soft cream Base rather than stark white. Its main Text color is a cool, dark gray-purple, while accents such as Mauve, Blue, Peach, and Green become darker and more saturated than their dark-flavor equivalents. That extra strength is what keeps syntax and controls visible on a pale background.

Choose Latte if your workspace has a large window, strong overhead lighting, or a screen that reflects the room. It is also the safest Catppuccin flavor for presentations and screen sharing: a bright canvas usually survives a mediocre projector or a compressed video call better than a quiet dark interface.

Latte is not merely a daytime switch for Mocha. A light palette changes how your eyes scan paragraphs, sidebars, code comments, and large empty areas. If you already read more comfortably in light mode, Latte lets you keep Catppuccin's color language without forcing yourself into a dark-theme habit.

Bright home office with a laptop and monitor beside a large window
A bright, window-lit workspace is exactly where Latte makes practical sense. Photo by Dell on Unsplash.

Frappé: the softest dark flavor

Frappé is the lightest of Catppuccin's dark flavors, with a blue-gray Base at #303446. Its accents feel slightly dustier and less luminous than Mocha's. The result is still recognizably Catppuccin, but the palette asks for less attention.

This flavor works well when you prefer dark mode but spend the day under office lighting. The lifted background keeps panels from collapsing into one dark block, while the muted accents reduce the candy-like quality that draws people to Mocha. Frappé can also suit readers who find high separation between colorful syntax tokens tiring.

The tradeoff is visual impact. Next to Mocha, Frappé can look washed out in a screenshot. That does not make it worse during an eight-hour session. It means Frappé is optimized for a gentler relationship with the screen rather than for a dramatic desktop photo.

Macchiato: the practical middle

Macchiato places Base at #24273a, between Frappé and Mocha. It retains a clearly dark environment, yet raises the floor enough that inactive tabs, file trees, line numbers, and comments are less likely to disappear on an average laptop panel.

If you do not know which dark flavor to choose, Macchiato is the most useful starting point. It works in more lighting conditions than Mocha without losing the layered purple-navy atmosphere that makes Catppuccin recognizable. It is especially good for a workspace that moves from daylight to evening without changing themes.

Macchiato's strength is not that it has the most exciting individual hex values. It is that the UI hierarchy remains easy to read. The Catppuccin style guide assigns Base, Mantle, and Crust to different background layers, then uses Surface and Overlay colors for controls and secondary information. Macchiato gives those steps enough room to stay visible without making the interface feel gray.

Official Catppuccin Macchiato palette showing its named accent and surface colors
The official Macchiato palette shows how colorful accents sit above a stepped family of purple-gray surfaces. Image source: Catppuccin's official repository.

Mocha: the signature Catppuccin look

Mocha is the darkest flavor and the version most often seen in setup photos. Its #1e1e2e Base lets pastel Mauve, Blue, Peach, Green, and Lavender appear luminous without using neon colors. Darker Mantle and Crust layers give sidebars and surrounding chrome a deep, finished look.

Choose Mocha for a dim room, a display with solid shadow detail, or a desk already built around dark purple and navy tones. It is also the easiest flavor to match with dark terminal windows, browser chrome, wallpapers, and physical accessories.

Mocha's weakness is the quiet end of the interface. Secondary labels and comments are meant to recede. On a low-contrast panel, or with the brightness turned down too far, they may recede more than you want. If the main text looks beautiful but everything around it feels vague, move up to Macchiato before rewriting the palette by hand.

What stays the same across all four?

Every Catppuccin flavor contains 26 named colors. Fourteen are colorful accents, including Rosewater, Mauve, Peach, Green, Teal, Blue, and Lavender. Three are foreground steps: Text, Subtext 1, and Subtext 0. Nine build the neutral interface stack from Overlay colors through Surface colors to Base, Mantle, and Crust.

The names stay stable, but their values change. Blue remains Blue as you move from Latte to Mocha; it does not keep the same hex code. The same is true for Text, Base, and every other label. This is why a good Catppuccin port can preserve familiar syntax roles while adapting the actual contrast for a light or dark background.

If you need exact values for customization, use the complete Catppuccin hex palette. Copy values from one flavor as a set rather than mixing a Latte accent into Mocha by accident.

Choose by lighting, not by coffee order

  • Strong daylight or presentations: start with Latte.
  • Bright office but you still want dark mode: start with Frappé.
  • One dark flavor for changing conditions: start with Macchiato.
  • Dim room and the classic Catppuccin aesthetic: start with Mocha.

Then test the quiet parts of the interface. Open a long file and look at comments, line numbers, an inactive tab, the sidebar, and a selected line. Those elements reveal a poor flavor match faster than a colorful demo file. If they disappear, choose a lighter flavor. If the background feels foggy and the accents lack separation, choose a darker one.

You can also keep two flavors and switch with the environment. Latte by day and Mocha at night is the obvious pair. Frappé by day and Macchiato after sunset creates a smaller transition for people who want dark mode all the time. The shared color names make either change feel less disruptive than moving between unrelated theme families.

Carry the flavor across your setup

Once one app feels right, use the same flavor in the next app you open beside it. Matching the editor and terminal produces a bigger sense of cohesion than perfecting one window while the rest of the desktop remains unrelated. The Catppuccin VS Code guide and Catppuccin Neovim guide are practical starting points.

Do not theme the entire computer before testing real work. Install one port, spend a few hours with it, and change flavor before changing individual colors. If you are new to the palette system itself, the complete Catppuccin theme guide explains how the named accents and surface layers work across different applications.

Catppuccin flavors FAQ

Which Catppuccin flavor is most popular?

Mocha is the flavor most commonly associated with Catppuccin because its deep background makes the pastel accents stand out in screenshots. Popularity does not make it the best option for every display or room.

Which Catppuccin flavor is best for coding?

Macchiato is a strong general-purpose dark choice because it balances atmosphere with visible secondary text. Latte is better in strong daylight, while Mocha is better in a dim environment with a good display. The best coding flavor is the one that keeps both code and interface chrome readable after several hours.

Is Frappé lighter than Macchiato?

Yes. Among the dark flavors, the brightness order is Frappé, Macchiato, then Mocha from lightest to darkest. Latte sits outside that sequence as the dedicated light flavor.

Can I mix Catppuccin flavors?

You can, but adjacent apps usually look more coherent when they share a flavor. A deliberate day/night switch is more predictable than mixing individual hex values from different flavors inside one application.

Palette names, values, and role descriptions follow the official Catppuccin project and its style guide.

Back to blog

Leave a comment