Catppuccin Palette: What Each of the 26 Colors Does

Shop Catppuccin Keycaps Set

Catppuccin is 26 named colors, not a mood board. Mauve is not “the purple.” Peach is not “the orange.” Sapphire is not “a second blue you can swap in.” Each name is a job. Ports look official because they keep those jobs. Ports look off because someone used Sapphire where Blue belongs, or painted a sidebar with Pink.

This page is the job list. Hex for all four flavors is on the Catppuccin hex chart. Flavor brightness (Mocha vs Macchiato vs Frappé vs Latte) is a separate decision; the names do not change when you switch roast.

26 colors, two stacks

Fourteen accents do syntax, status, links, and anything that should read as a token. Twelve neutrals do the room: backgrounds, chrome, comments, body copy. If you only remember one rule: accents go on small things. Neutrals go on large things.

That mapping is the official style guide, not folk wisdom from one Neovim config. Ports still improvise. If a theme paints keywords Blue, it is a fork of the idea, not the card.

Mauve, Peach, Sapphire: the three that get misused

Mauve is keywords: if, for, class, import, return. On Mocha it is #cba6f7. On Latte it is a much louder #8839ef. People search “Catppuccin purple” and land here. Do not use it for functions (that is Blue) or for types (that is Yellow). If every identifier is mauve, you have a lavender soup, not Catppuccin.

Peach is numbers and constants: 42, true, PI. Mocha #fab387. It also shares warning duty with Yellow, and it is rainbow highlight #2. It is the warm accent in screenshots because numbers show up everywhere and because keycap kits like a peach modifier. It is not the string color (Green) and it is not the error color (Red). If your JSON looks like a fruit stand, you put Peach on keys. Keys are Blue.

Sapphire is the one people treat as “cyan-blue for anything leftover.” The style guide barely gives it a syntax job. Functions are Blue. Operators are Sky. Types are Yellow. Sapphire is rainbow #5 (brackets, headings) and terminal mark 3. Mocha #74c7ec. If you need a fifth nested-bracket color, this is it. If you need a link, a function, or a button, use Blue. Sapphire as a primary accent is how a port starts looking “Catppuccin-ish” instead of Catppuccin.

The other accents, in the order they actually show up

Blue is the workhorse after Mauve. Functions, methods, object properties, JSON keys, normal links, pills/tags. Mocha #89b4fa. If you are theming a UI and you only pick one accent besides Mauve, pick this.

Green is strings and success. Inserted lines in a diff. It is not “go” in the traffic-light sense unless the UI is actually reporting success. Do not paint the whole sidebar green because it feels friendly.

Yellow is the type system: classes, interfaces, enums as types, annotations, XML-style attributes. Warnings sit on Yellow, sometimes Peach. Bell border in the terminal is Yellow. Types in mauve is a common Neovim override; it fights the card.

Red is the stop color: errors, builtins (console, Math), symbols/atoms, removed diff, breakpoint dots. Keep the area small. A red editor chrome is a different product.

Pink is regex, escapes like \n, ANSI magenta, and file-path markers in diffs. It is louder than Mauve. One or two token types is enough.

Maroon is parameters. That is a narrow, useful job. Using it as “muted red” for errors makes parameters look like they are on fire. Mocha #eba0ac is close to Red on purpose; the distinction is semantic, not decorative.

Teal is enum variants, information diagnostics, and the search match background (foreground stays Text). It is also ANSI cyan. Good for “this is a case of that type,” not for body text.

Sky is operators: +, =>, ===. Hovered links also go Sky (normal Blue, followed Lavender). If operators are Blue, functions and punctuation collapse into one smear.

Lavender is chrome more than syntax: the current line number, followed links, the active terminal border, rainbow #6. It is the cool accent that should stay quiet. Painting keywords Lavender instead of Mauve is the usual “I made it softer” fork.

Rosewater is the cursor, and macros when the editor can tell them apart. Terminals also use it as an extra color. It is pale on purpose. A Rosewater headline on Mocha fails contrast. A Rosewater caret does not.

Flamingo is the spare. The style guide does not give it a language default. Keep it for a one-off (a specific plugin, a novelty key, a chart series) after the other thirteen are assigned. If Flamingo and Pink and Maroon are all in the buffer, you have three pinks and no hierarchy.

The twelve neutrals: the room, not the tokens

Read them as a stack, darkest-to-lightest on Mocha (reverse the luminance on Latte):

1. Crust — under everything. Status line, tab bar, window edge. Mocha #11111b.
2. Mantle — sidebar, secondary pane. Mocha #181825.
3. Base — the editor / main pane. Mocha #1e1e2e.
4. Surface 0 → 2 — each step is a raised control: input, hover, selected row, floating panel.
5. Overlay 0 → 2 — still gray-blue, now for lines and type that should recede. Overlay 0 inactive borders. Overlay 1 gutter numbers. Overlay 2 comments and braces.
6. Subtext 0 / 1 — labels. Not comments (too strong) and not body (too weak if you use them for paragraphs).
7. Text — the default foreground. Mocha #cdd6f4. Headlines stay Text. Color is for tokens, not for titles.

A Mocha app that feels “right” is usually Crust / Mantle / Base / Surface 0 with Text on Base and Overlay 2 on comments. Skip a layer and the UI goes flat. Invent a 13th gray in Figma and you have left the palette.

On colored buttons, the style guide wants Base as the “on accent” fill (the text sitting on Mauve or Green), not Text. Text on Peach is muddy. Base on Peach reads as a label.

Rainbows, diffs, and the jobs that are not “a color”

Bracket pair colorization and heading levels use a six-step rainbow: Red, Peach, Yellow, Green, Sapphire, Lavender. That is why Sapphire exists in daily use. Nested local variables, when a port bothers, mix Text with Red / Yellow / Green / Teal / Blue / Mauve at about 60%. Those mixes are not new swatches in the 26. Do not add them to a brand kit.

Diffs: header Blue, hunk Peach, insert Green, delete Red, path Pink, index metadata Overlay 2. Search: Teal background, active match Red background, Text on top of both. You do not need a custom “search yellow.”

What not to do with the 26

• Do not use all 14 accents in one view. A buffer that needs more than Mauve, Blue, Green, Peach, Yellow, and Overlay 2 is rare. The rest are specialist tools.
• Do not fill a large background with an accent. Pastel on Mocha is for glyphs. A Peach sidebar is a poster.
• Do not copy Latte Mauve onto Mocha because you wanted “more pop.” Latte accents are darker ink for cream paper. Dark-flavor accents are pastels for navy-purple. Mix them and you get a warning light or a stain.
• Do not assign Overlay / Surface to keycap legends or tiny type you need to read. They are built to disappear on a display.

If you are picking a flavor rather than a token, start with Mocha vs Macchiato vs Frappé vs Latte. If you are still choosing a theme family, Tokyo Night vs Catppuccin is the other fork. This page is only: when you already have the card, which square is for what.

Jobs follow the Catppuccin style guide. Hex values live on catppuccin.com/palette. A port that disagrees on names is stale or custom. A port that disagrees on jobs is a different theme wearing the same swatches.