Convert Figma logo to code with AI

catppuccin logocatppuccin

😸 Soothing pastel theme for the high-spirited!

16,415
301
16,415
49

Top Related Projects

🧛🏻‍♂️ One theme. All platforms.

14,332

Retro groove color scheme for Vim

6,453

An arctic, north-bluish color palette.

A dark Vim/Neovim color scheme inspired by Atom's One Dark syntax theme.

1,835

Clean, vibrant and pleasing color schemes for Vim, Sublime Text, iTerm, gnome-terminal and more.

🏙 A clean, dark Neovim theme written in Lua, with support for lsp, treesitter and lots of plugins. Includes additional themes for Kitty, Alacritty, iTerm and Fish.

Quick Overview

Catppuccin is a soothing pastel theme for various applications and platforms. It aims to provide a consistent and aesthetically pleasing color scheme across different development environments, text editors, and system interfaces. The project offers multiple flavors (color variations) to suit different preferences and lighting conditions.

Pros

  • Wide compatibility with numerous applications and platforms
  • Multiple flavors to choose from, catering to different tastes
  • Active community and frequent updates
  • Consistent design language across various tools and environments

Cons

  • May not appeal to users who prefer high-contrast or vibrant themes
  • Some less popular applications might not have official support
  • Occasional inconsistencies in implementation across different platforms
  • Learning curve for customizing and applying the theme in some environments

Getting Started

To use Catppuccin in your preferred application or platform:

  1. Visit the Catppuccin GitHub repository
  2. Navigate to the "Ports" section in the README
  3. Find your desired application or platform
  4. Follow the specific installation instructions provided for that port

For example, to use Catppuccin with Visual Studio Code:

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X)
  3. Search for "Catppuccin"
  4. Install the official Catppuccin theme
  5. Press Ctrl+K Ctrl+T and select your preferred Catppuccin flavor

Note that the exact steps may vary depending on the application or platform you're using. Always refer to the specific port's documentation for the most up-to-date instructions.

Competitor Comparisons

🧛🏻‍♂️ One theme. All platforms.

Pros of Dracula

  • Longer history and more established community
  • Wider range of supported applications and platforms
  • More consistent and unified color scheme across different applications

Cons of Dracula

  • Less customization options for users
  • Fewer color variants compared to Catppuccin's multiple flavors
  • Less frequent updates and new theme additions

Code Comparison

Dracula color definition:

:root {
  --background: #282a36;
  --foreground: #f8f8f2;
  --selection: #44475a;
  --comment: #6272a4;
  --cyan: #8be9fd;
}

Catppuccin (Mocha flavor) color definition:

:root {
  --ctp-base: #1e1e2e;
  --ctp-text: #cdd6f4;
  --ctp-surface0: #313244;
  --ctp-overlay0: #6c7086;
  --ctp-sky: #89dceb;
}

Both themes offer a dark color scheme with vibrant accents, but Catppuccin provides more flavors and customization options. Dracula has a more established presence and wider application support, while Catppuccin offers a fresher approach with multiple variants. The code comparison shows similar structure in color definitions, with Catppuccin using a more descriptive naming convention for its variables.

14,332

Retro groove color scheme for Vim

Pros of Gruvbox

  • Established and widely adopted color scheme with a long history
  • Warm, earthy tones that are easy on the eyes for long coding sessions
  • Extensive support for various applications and platforms

Cons of Gruvbox

  • Limited color palette compared to Catppuccin's extensive options
  • Less active community and fewer recent updates
  • Fewer official ports and integrations for modern tools and applications

Code Comparison

Gruvbox (Vim configuration):

let g:gruvbox_contrast_dark = 'hard'
colorscheme gruvbox
set background=dark

Catppuccin (Vim configuration):

let g:catppuccin_flavour = "mocha"
colorscheme catppuccin

Summary

Gruvbox is a well-established color scheme with a warm, earthy palette that's easy on the eyes. It has broad support across various platforms but offers a more limited color range. Catppuccin, on the other hand, provides a wider array of color options and has a more active community with frequent updates and integrations for modern tools. While Gruvbox may appeal to those who prefer a classic, subdued look, Catppuccin offers more flexibility and customization options for users who want a fresh, vibrant aesthetic.

6,453

An arctic, north-bluish color palette.

Pros of Nord

  • More established and widely adopted theme with a larger ecosystem
  • Offers a comprehensive style guide and design system
  • Provides official support for a broader range of applications and tools

Cons of Nord

  • Limited color palette compared to Catppuccin's extensive options
  • Less flexibility for customization and personalization
  • Slower release cycle and updates compared to Catppuccin

Code Comparison

Nord color definition:

:root {
  --nord0: #2E3440;
  --nord1: #3B4252;
  --nord2: #434C5E;
  --nord3: #4C566A;
  --nord4: #D8DEE9;
}

Catppuccin color definition:

:root {
  --ctp-rosewater: #F5E0DC;
  --ctp-flamingo: #F2CDCD;
  --ctp-pink: #F5C2E7;
  --ctp-mauve: #CBA6F7;
  --ctp-red: #F38BA8;
}

Nord focuses on a cohesive, arctic-inspired color scheme with a limited set of colors, while Catppuccin offers a broader range of pastel colors with multiple flavors (Latte, Frappe, Macchiato, Mocha) to choose from. Catppuccin provides more flexibility for users to customize their themes, but Nord's established ecosystem and comprehensive style guide make it easier to maintain consistency across various applications and tools.

A dark Vim/Neovim color scheme inspired by Atom's One Dark syntax theme.

Pros of One Dark

  • Specifically designed for Vim and Neovim, offering seamless integration
  • Lightweight and focused on a single color scheme
  • Well-established and widely used in the Vim community

Cons of One Dark

  • Limited to a single color palette, less versatile than Catppuccin
  • Fewer customization options and variants
  • Not as actively maintained or frequently updated as Catppuccin

Code Comparison

One Dark:

" One Dark color definitions
let s:colors = onedark#GetColors()

" Set highlight groups
call onedark#set_highlight("Normal", { "fg": s:colors.fg, "bg": s:colors.bg })

Catppuccin:

-- Catppuccin color setup
require("catppuccin").setup({
    flavour = "mocha", -- latte, frappe, macchiato, mocha
    background = { light = "latte", dark = "mocha" },
    transparent_background = false,
    term_colors = true,
    -- ... other options
})

One Dark is a focused Vim color scheme, while Catppuccin offers a more comprehensive theming solution with multiple flavors and broader application support. One Dark excels in simplicity and Vim-specific optimization, whereas Catppuccin provides greater flexibility and customization across various platforms and applications.

1,835

Clean, vibrant and pleasing color schemes for Vim, Sublime Text, iTerm, gnome-terminal and more.

Pros of OneHalf

  • Simpler color scheme with fewer variants, making it easier to implement and maintain
  • Includes both light and dark themes, offering more versatility for different environments
  • Provides ready-made configurations for popular text editors and terminal emulators

Cons of OneHalf

  • Less extensive community support and fewer ports to various applications
  • Limited customization options compared to Catppuccin's multiple flavors and accent colors
  • Fewer regular updates and maintenance compared to Catppuccin's active development

Code Comparison

OneHalf (Vim configuration):

set t_Co=256
set cursorline
colorscheme onehalfdark
let g:airline_theme='onehalfdark'

Catppuccin (Vim configuration):

set termguicolors
colorscheme catppuccin
let g:airline_theme = 'catppuccin'
let g:catppuccin_flavour = "macchiato"

Both color schemes offer easy integration with popular text editors like Vim. OneHalf provides a more straightforward setup, while Catppuccin offers additional customization options through its flavors.

🏙 A clean, dark Neovim theme written in Lua, with support for lsp, treesitter and lots of plugins. Includes additional themes for Kitty, Alacritty, iTerm and Fish.

Pros of tokyonight.nvim

  • Specifically designed for Neovim, offering deep integration and optimized performance
  • Includes multiple style variants (storm, night, day, moon)
  • Provides built-in support for various plugins and language syntax highlighting

Cons of tokyonight.nvim

  • Limited to Neovim environment, less versatile across different applications
  • Fewer color palette options compared to Catppuccin's extensive variants
  • May require more manual configuration for non-Neovim use cases

Code Comparison

tokyonight.nvim:

require("tokyonight").setup({
  style = "storm",
  transparent = true,
  terminal_colors = true,
})

Catppuccin:

vim.g.catppuccin_flavour = "mocha"
require("catppuccin").setup({
  transparent_background = true,
  term_colors = true,
})

Both projects offer easy setup in Lua, but tokyonight.nvim provides more Neovim-specific options, while Catppuccin focuses on broader customization across different environments. Catppuccin's setup is generally simpler, reflecting its more universal approach to theming.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Logo
Catppuccin

/ˌkætpʊˈtʃiːn/
Palette · Ports · Showcase · Docs

 

Catppuccin is a community-driven pastel theme that aims to be the middle ground between low and high-contrast themes. It consists of 4 soothing warm flavors with 26 eye-candy colors each, perfect for coding, designing, and much more! In addition, this repository tracks the development of the actual color palette, the project's documentation, organization-wide assets, resources and code samples for maintainers/developers.

Github Logo NPM Logo Discord Logo Twitter Logo Mastodon Logo Reddit Logo

Join our community!

 

🧠 Design Philosophy

  • Colorful is better than colorless: the colorfulness of something contributes to the distinction amongst the parts of that something, making it marginally easier to understand how things are structured.
  • There should be balance: not too dull, not too bright. Suitability under various light conditions is a must.
  • Harmony is superior to dissonance: vivacious colors must complement each other.

 

🎨 Palette

Catppuccin consists of 4 beautiful pastel color palettes, named flavors. All the details can be found below.
If you want to use them for your own project, refer to our style guide for general use cases and guidelines. Additionally, you can find integrations with popular frameworks and tools in catppuccin/palette.

Already have a project making use of our palette? Don't forget to add it to our showcase section below!

🌻 Latte
Labels Hex RGB HSL
Rosewater #dc8a78 rgb(220, 138, 120) hsl(11, 59%, 67%)
Flamingo #dd7878 rgb(221, 120, 120) hsl(0, 60%, 67%)
Pink #ea76cb rgb(234, 118, 203) hsl(316, 73%, 69%)
Mauve #8839ef rgb(136, 57, 239) hsl(266, 85%, 58%)
Red #d20f39 rgb(210, 15, 57) hsl(347, 87%, 44%)
Maroon #e64553 rgb(230, 69, 83) hsl(355, 76%, 59%)
Peach #fe640b rgb(254, 100, 11) hsl(22, 99%, 52%)
Yellow #df8e1d rgb(223, 142, 29) hsl(35, 77%, 49%)
Green #40a02b rgb(64, 160, 43) hsl(109, 58%, 40%)
Teal #179299 rgb(23, 146, 153) hsl(183, 74%, 35%)
Sky #04a5e5 rgb(4, 165, 229) hsl(197, 97%, 46%)
Sapphire #209fb5 rgb(32, 159, 181) hsl(189, 70%, 42%)
Blue #1e66f5 rgb(30, 102, 245) hsl(220, 91%, 54%)
Lavender #7287fd rgb(114, 135, 253) hsl(231, 97%, 72%)
Text #4c4f69 rgb(76, 79, 105) hsl(234, 16%, 35%)
Subtext1 #5c5f77 rgb(92, 95, 119) hsl(233, 13%, 41%)
Subtext0 #6c6f85 rgb(108, 111, 133) hsl(233, 10%, 47%)
Overlay2 #7c7f93 rgb(124, 127, 147) hsl(232, 10%, 53%)
Overlay1 #8c8fa1 rgb(140, 143, 161) hsl(231, 10%, 59%)
Overlay0 #9ca0b0 rgb(156, 160, 176) hsl(228, 11%, 65%)
Surface2 #acb0be rgb(172, 176, 190) hsl(227, 12%, 71%)
Surface1 #bcc0cc rgb(188, 192, 204) hsl(225, 14%, 77%)
Surface0 #ccd0da rgb(204, 208, 218) hsl(223, 16%, 83%)
Base #eff1f5 rgb(239, 241, 245) hsl(220, 23%, 95%)
Mantle #e6e9ef rgb(230, 233, 239) hsl(220, 22%, 92%)
Crust #dce0e8 rgb(220, 224, 232) hsl(220, 21%, 89%)
🪴 Frappé
Labels Hex RGB HSL
Rosewater #f2d5cf rgb(242, 213, 207) hsl(10, 57%, 88%)
Flamingo #eebebe rgb(238, 190, 190) hsl(0, 59%, 84%)
Pink #f4b8e4 rgb(244, 184, 228) hsl(316, 73%, 84%)
Mauve #ca9ee6 rgb(202, 158, 230) hsl(277, 59%, 76%)
Red #e78284 rgb(231, 130, 132) hsl(359, 68%, 71%)
Maroon #ea999c rgb(234, 153, 156) hsl(358, 66%, 76%)
Peach #ef9f76 rgb(239, 159, 118) hsl(20, 79%, 70%)
Yellow #e5c890 rgb(229, 200, 144) hsl(40, 62%, 73%)
Green #a6d189 rgb(166, 209, 137) hsl(96, 44%, 68%)
Teal #81c8be rgb(129, 200, 190) hsl(172, 39%, 65%)
Sky #99d1db rgb(153, 209, 219) hsl(189, 48%, 73%)
Sapphire #85c1dc rgb(133, 193, 220) hsl(199, 55%, 69%)
Blue #8caaee rgb(140, 170, 238) hsl(222, 74%, 74%)
Lavender #babbf1 rgb(186, 187, 241) hsl(239, 66%, 84%)
Text #c6d0f5 rgb(198, 208, 245) hsl(227, 70%, 87%)
Subtext1 #b5bfe2 rgb(181, 191, 226) hsl(227, 44%, 80%)
Subtext0 #a5adce rgb(165, 173, 206) hsl(228, 29%, 73%)
Overlay2 #949cbb rgb(148, 156, 187) hsl(228, 22%, 66%)
Overlay1 #838ba7 rgb(131, 139, 167) hsl(227, 17%, 58%)
Overlay0 #737994 rgb(115, 121, 148) hsl(229, 13%, 52%)
Surface2 #626880 rgb(98, 104, 128) hsl(228, 13%, 44%)
Surface1 #51576d rgb(81, 87, 109) hsl(227, 15%, 37%)
Surface0 #414559 rgb(65, 69, 89) hsl(230, 16%, 30%)
Base #303446 rgb(48, 52, 70) hsl(229, 19%, 23%)
Mantle #292c3c rgb(41, 44, 60) hsl(231, 19%, 20%)
Crust #232634 rgb(35, 38, 52) hsl(229, 20%, 17%)
🌺 Macchiato
Labels Hex RGB HSL
Rosewater #f4dbd6 rgb(244, 219, 214) hsl(10, 58%, 90%)
Flamingo #f0c6c6 rgb(240, 198, 198) hsl(0, 58%, 86%)
Pink #f5bde6 rgb(245, 189, 230) hsl(316, 74%, 85%)
Mauve #c6a0f6 rgb(198, 160, 246) hsl(267, 83%, 80%)
Red #ed8796 rgb(237, 135, 150) hsl(351, 74%, 73%)
Maroon #ee99a0 rgb(238, 153, 160) hsl(355, 71%, 77%)
Peach #f5a97f rgb(245, 169, 127) hsl(21, 86%, 73%)
Yellow #eed49f rgb(238, 212, 159) hsl(40, 70%, 78%)
Green #a6da95 rgb(166, 218, 149) hsl(105, 48%, 72%)
Teal #8bd5ca rgb(139, 213, 202) hsl(171, 47%, 69%)
Sky #91d7e3 rgb(145, 215, 227) hsl(189, 59%, 73%)
Sapphire #7dc4e4 rgb(125, 196, 228) hsl(199, 66%, 69%)
Blue #8aadf4 rgb(138, 173, 244) hsl(220, 83%, 75%)
Lavender #b7bdf8 rgb(183, 189, 248) hsl(234, 82%, 85%)
Text #cad3f5 rgb(202, 211, 245) hsl(227, 68%, 88%)
Subtext1 #b8c0e0 rgb(184, 192, 224) hsl(228, 39%, 80%)
Subtext0 #a5adcb rgb(165, 173, 203) hsl(227, 27%, 72%)
Overlay2 #939ab7 rgb(147, 154, 183) hsl(228, 20%, 65%)
Overlay1 #8087a2 rgb(128, 135, 162) hsl(228, 15%, 57%)
Overlay0 #6e738d rgb(110, 115, 141) hsl(230, 12%, 49%)
Surface2 #5b6078 rgb(91, 96, 120) hsl(230, 14%, 41%)
Surface1 #494d64 rgb(73, 77, 100) hsl(231, 16%, 34%)
Surface0 #363a4f rgb(54, 58, 79) hsl(230, 19%, 26%)
Base #24273a rgb(36, 39, 58) hsl(232, 23%, 18%)
Mantle #1e2030 rgb(30, 32, 48) hsl(233, 23%, 15%)
Crust #181926 rgb(24, 25, 38) hsl(236, 23%, 12%)
🌿 Mocha
Labels Hex RGB HSL
Rosewater #f5e0dc rgb(245, 224, 220) hsl(10, 56%, 91%)
Flamingo #f2cdcd rgb(242, 205, 205) hsl(0, 59%, 88%)
Pink #f5c2e7 rgb(245, 194, 231) hsl(316, 72%, 86%)
Mauve #cba6f7 rgb(203, 166, 247) hsl(267, 84%, 81%)
Red #f38ba8 rgb(243, 139, 168) hsl(343, 81%, 75%)
Maroon #eba0ac rgb(235, 160, 172) hsl(350, 65%, 77%)
Peach #fab387 rgb(250, 179, 135) hsl(23, 92%, 75%)
Yellow #f9e2af rgb(249, 226, 175) hsl(41, 86%, 83%)
Green #a6e3a1 rgb(166, 227, 161) hsl(115, 54%, 76%)
Teal #94e2d5 rgb(148, 226, 213) hsl(170, 57%, 73%)
Sky #89dceb rgb(137, 220, 235) hsl(189, 71%, 73%)
Sapphire #74c7ec rgb(116, 199, 236) hsl(199, 76%, 69%)
Blue #89b4fa rgb(137, 180, 250) hsl(217, 92%, 76%)
Lavender #b4befe rgb(180, 190, 254) hsl(232, 97%, 85%)
Text #cdd6f4 rgb(205, 214, 244) hsl(226, 64%, 88%)
Subtext1 #bac2de rgb(186, 194, 222) hsl(227, 35%, 80%)
Subtext0 #a6adc8 rgb(166, 173, 200) hsl(228, 24%, 72%)
Overlay2 #9399b2 rgb(147, 153, 178) hsl(228, 17%, 64%)
Overlay1 #7f849c rgb(127, 132, 156) hsl(230, 13%, 55%)
Overlay0 #6c7086 rgb(108, 112, 134) hsl(231, 11%, 47%)
Surface2 #585b70 rgb(88, 91, 112) hsl(233, 12%, 39%)
Surface1 #45475a rgb(69, 71, 90) hsl(234, 13%, 31%)
Surface0 #313244 rgb(49, 50, 68) hsl(237, 16%, 23%)
Base #1e1e2e rgb(30, 30, 46) hsl(240, 21%, 15%)
Mantle #181825 rgb(24, 24, 37) hsl(240, 21%, 12%)
Crust #11111b rgb(17, 17, 27) hsl(240, 23%, 9%)

 

👐 Contributing

[!NOTE]
If you would like to submit a port or learn how to port Catppuccin to a program, please refer to the port-creation.md

See CONTRIBUTING.md

 

🪵 Ports and more!

Catppuccin is available for various apps and in different formats. Here is a list of them:

👾 Code Editors & IDEs
💭 Development Tools
📜 Documentation Generators
🖍️ Syntax Highlighting
📚 Libraries
🐚 CLI Tools
🌱 Terminals
🔧 System
👢 Boot Loaders
😈 Notification Daemons
🖥️ Desktop Environments
🪟 Window Managers
🗂️ File Managers
🗃️ Application Launchers
🏄 Browsers
🧩 Browser Extensions
🔎 Search Engines
📦 Package Registries
🗺️ Translation Tools
🧠 Wikis
📸 Photo & Video
🎵 Music
📖 Productivity
💌 Email Clients
🕹️ Game Development
🖼️ 3D Modelling
📝 Note Taking
🎓 Education
📰 News & Journalism
📃 Document Viewers
✨ Social Networking
🗣️ Discussion Forums
🌈 Entertainment
🎮 Games
📊 Analytics
🤖 Artificial Intelligence
🏃 Health & Fitness

 

🌟 Showcase

[!NOTE]
Catppuccin staff reserve the right to remove and reject showcase additions if we determine the addition to be in violation of our CODE OF CONDUCT. Extremely personal configurations and websites will not be added.

If you're making an application or tool using our palette, please let us know by adding it below!

  • flotes.app - A free note-taking app enhanced with flashcard features.
  • AnuPpuccin - Highly customizable theme for Obsidian.
  • faerber - Website for applying custom color schemes to any wallpaper.
  • Simple MP - A simple music player based on Material You design.
  • Comfy - A theme for Spicetify with a basic catppuccin color scheme!
  • Catppuccin Noctis - An alternative to the official VSCode theme, with Noctis syntax highlighting.
  • Catppuccin Noctis Icons - A companion icons theme for Catppuccin Noctis color theme. Forked from Symbols Icon Theme.
  • Mind Elixir - A framework agnostic JavaScript mind map core.
  • Career Vault - A remote job board that shows hundreds of new opportunities every day.
  • Loungy - An open-source application launcher in the vein of Raycast and Alfred.
  • Reciper - A simple, open-source recipe management app.
  • Catbbrew - Easily create your own Catppuccin flavors.
  • Tomatillo Timer - A modern pomodoro timer that syncs to your music
  • Catppuccin Startpage - Aesthetic and clean startpage in Catppuccin style, hosted on GitHub Pages
  • ccrs - A simple yet highly configurable set of widgets for Rainmeter.

 

📜 License

Catppuccin is released under the MIT license, which grants the following permissions:

  • Commercial use
  • Distribution
  • Modification
  • Private use

For more convoluted language, see the LICENSE.

 

❤️ Gratitude

Thanks to the following tools developing this project is possible:

 

Copyright © 2021-present Catppuccin Org

NPM DownloadsLast 30 Days