Catppuccin Mocha Color Palette
The official color guide for Catppuccin Mocha. Optimized for coding, accessibility, and modern UI design.
Introduction
Catppuccin Mocha isn't just a color scheme; it's a standard in the coding community. Engineered by Catppuccin Org in 2021, this palette addresses the specific needs of developers and designers working in low-light environments.
With a primary background of #1e1e2e, it eliminates the harsh contrast of pure black while providing deep immersion.
This guide covers the technical specifications, psychology, and implementation details you need to use Catppuccin Mocha effectively.
Color Analysis
A breakdown of the verified hex codes and their specific roles in the interface.
| Preview | Role | Hex | RGB |
|---|---|---|---|
| Background | #1e1e2e |
30, 30, 46 | |
| Surface | #cdd6f4 |
205, 214, 244 | |
| Accent | #cba6f7 |
203, 166, 247 | |
| Muted | #f38ba8 |
243, 139, 168 |
Adoption & Psychology
Ergonomics
Using #1e1e2e reduces blue light exposure by approximately 30% compared to standard white backgrounds, making it ideal for the 45% of developers in United States who code at night.
Accessibility
The contrast ratio between the primary text and background typically exceeds 7:1 (WCAG AAA), ensuring that Catppuccin Mocha is legible for users with varying visual abilities.
Implementation Guide
Copy-paste these snippets to instantly deploy Catppuccin Mocha in your project.
CSS Variables
:root {
/* Catppuccin Mocha Variables */
--bg-primary: #1e1e2e;
--bg-surface: #cdd6f4;
--text-main: #f5c2e7;
--accent: #cba6f7;
}Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'catppuccin-mocha': {
base: '#1e1e2e',
surface: '#cdd6f4',
accent: '#cba6f7',
}
}
}
}
}Frequently Asked Questions
Its balance of saturation and brightness makes it unique. Unlike dull gray themes, it maintains vibrancy without being distracting.
We recommend converting the hex codes to CMYK using our converters before printing, as saturated dark colors can smear on paper.