mirror of
https://github.com/catppuccin/catppuccin
synced 2024-11-25 04:50:19 +00:00
24 KiB
24 KiB
Catppuccin Theme
Palette · Ports · Design Philosophy
Catppuccin is a community-driven pastel theme that aims to be the middle ground between low and high contrast themes. It consists of a soothing warm palette with 22 eye-candy colors perfect for coding, designing, and much more! In addition, this repository tracks the development of the actual color palette, organization-wide assets, resources and code samples for maintainers/developers.
🧠 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 most.
- Harmony is superior to dissonance: vivacious colors must complement each other.
🎨 Palette
Catppuccin constist of two main color palettes. All the details can be found below.
To make the best use them please refer to the Styleguide.
| 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%) |
| 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 | #c6ceef |
rgb(198, 206, 239) |
hsl(228, 56%, 86%) |
 |
Subtext1 | #b5bddc |
rgb(181, 189, 220) |
hsl(228, 36%, 79%) |
 |
Subtext0 | #a5acc9 |
rgb(165, 172, 201) |
hsl(228, 25%, 72%) |
 |
Overlay2 | #949bb7 |
rgb(148, 155, 183) |
hsl(228, 20%, 65%) |
 |
Overlay1 | #838aa4 |
rgb(131, 138, 164) |
hsl(227, 15%, 58%) |
 |
Overlay0 | #737891 |
rgb(115, 120, 145) |
hsl(230, 12%, 51%) |
 |
Surface2 | #62677e |
rgb(98, 103, 126) |
hsl(229, 13%, 44%) |
 |
Surface1 | #51566c |
rgb(81, 86, 108) |
hsl(229, 14%, 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%) |
| 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 | #c5cff5 |
rgb(197, 207, 245) |
hsl(228, 71%, 87%) |
 |
Subtext1 | #b3bce0 |
rgb(179, 188, 224) |
hsl(228, 42%, 79%) |
 |
Subtext0 | #a1aacb |
rgb(161, 170, 203) |
hsl(227, 29%, 71%) |
 |
Overlay2 | #8f97b7 |
rgb(143, 151, 183) |
hsl(228, 22%, 64%) |
 |
Overlay1 | #7d84a2 |
rgb(125, 132, 162) |
hsl(229, 17%, 56%) |
 |
Overlay0 | #6c728d |
rgb(108, 114, 141) |
hsl(229, 13%, 49%) |
 |
Surface2 | #5a5f78 |
rgb(90, 95, 120) |
hsl(230, 14%, 41%) |
 |
Surface1 | #484c64 |
rgb(72, 76, 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%) |
| 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 | #87b0f9 |
rgb(135, 176, 249) |
hsl(218, 90%, 75%) |
 |
Lavender | #b4befe |
rgb(180, 190, 254) |
hsl(232, 97%, 85%) |
 |
Text | #c6d0f5 |
rgb(198, 208, 245) |
hsl(227, 70%, 87%) |
 |
Subtext1 | #b3bcdf |
rgb(179, 188, 223) |
hsl(228, 41%, 79%) |
 |
Subtext0 | #a1a8c9 |
rgb(161, 168, 201) |
hsl(229, 27%, 71%) |
 |
Overlay2 | #8e95b3 |
rgb(142, 149, 179) |
hsl(229, 20%, 63%) |
 |
Overlay1 | #7b819d |
rgb(123, 129, 157) |
hsl(229, 15%, 55%) |
 |
Overlay0 | #696d86 |
rgb(105, 109, 134) |
hsl(232, 12%, 47%) |
 |
Surface2 | #565970 |
rgb(86, 89, 112) |
hsl(233, 13%, 39%) |
 |
Surface1 | #43465a |
rgb(67, 70, 90) |
hsl(232, 15%, 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%) |
🪵 Ports and more!
Catppuccin is available for various apps and in different formats. Here is a list of them:
IDEs/DEs
- NeoVim
- VSCode
- Sublime Text (WIP)
- Geany
Development
Terminals
- Kitty
- Windows Terminal
- Alacritty
- Gnome-Terminal
- Terminator
- iTerm 2
- Tmux
- Termux
- Urxvt
- Konsole
- Zellij
- WezTerm
- Contour
- ST
Messaging
Browsers
Productivity
Shells
System
👐 Contribute
See CONTRIBUTING.md.
📜 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:
- coolors.co: A tool for creating and collecting color palettes.
- InkScape: Free and open-source vector graphics editor.
- colors_converter.asp: Color format converter.
- mdigi.tools: Web based digital tools.
Copyright © 2021-present Catppuccin Org
