🎨 Soothing pastel theme to use within your projects!

  • By Catppuccin
  • Last update: Dec 27, 2022
  • Comments: 12

Logo
Catppuccin Palettes

Available formats

  • Node Package
  • CSS
  • Gimp
  • Krita
  • Inkscape
  • Aseprite/LibreSprite
  • Affinity
  • PNG
  • Sass

Usage

Node Package

npm install @catppuccin/palette

Example: test.js

import {variants, labels} from '@catppuccin/palette'

console.log(variants.latte.lavender) // #7287FD
console.log(labels.base.macchiato) // #24273A

CSS

Example: test.css

@import url('https://unpkg.com/@catppuccin/[email protected]/css/catppuccin.css');

body {
	color: var(--ctp-mocha-text);
	background: var(--ctp-frappe-base);
}

Gimp

  1. Clone this repository locally
  2. Navigate to Edit > Preferences > Folders > Palettes in GIMP
  3. Select the folder with the 'x' and press "Show file location in the file manager" (the rightmost button)
  4. Copy "Catppuccin.gpl" to this folder

Krita

  1. Clone this repository locally
  2. Navigate to Settings > Dockers > Palette in Krita
  3. Open the "Choose Palette" button in the bottom left corner of Palette docker
  4. Select "Import a new palette from file"
  5. Open Catppuccin.kpl from the dialog that appears

Inkscape

  1. Clone this repository locally
  2. Navigate to Edit > Preferences > System > User palettes in Inkscape
  3. Press the "Open" button next to the folder path
  4. Copy "Catppuccin.gpl" to this folder

Aseprite

  1. Clone this repository locally
  2. Open Palette Options
  3. Select "Load Palette" from the menu
  4. Open Catppuccin.ase from the dialog that appears

💝 Thanks to

 

Copyright Š 2021-present Catppuccin Org

Github

https://github.com/catppuccin/palette

Comments(12)

  • 1

    Add Python support along with JS support.

    JavaScript is a great language but NPM has packaging issues at times, mostly with vulnerabilities. Python is another great language which doesn't have these issues. I will be willing to contribute to this to add Python support along with JavaScript support.

  • 2

    Seperate projects out to submodules to facilitate better access control

    Currently if someone needs to maintain for example the Rust crate, they have to be given access to the entire repo This is obviously not an ideal situation. A solution to this would be to move each project out into a separate repo and then including them in this repo as a submodules, that way this repo just acts as a sort of hub.

    This should probably just be done for future projects being added and perhaps the Rust crate as its still fairly new, as backporting this to the other projects in here, is a pain that probably isn't worth it.

  • 3

    Rust: Add methods to `Flavour` to get each colour

    This adds method to get each of the colors directly from the Flavour variants like so

    Flavour::Latte.teal()
    

    rather than needing to go through the FlavourColours struct

    This closes #27

  • 4

    feat: add python package

    this python package exposes the catppuccin palette with just enough default features to be useful. you can pick colours from the four flavours, convert those colours to a hex string or their r/g/b components, and iterate over the flavours to get the full palette.

    the project is managed by poetry and supports python >= 3.7.2.

    future PRs will cover integration with third-party packages such as pygments and pygame. these will be gated behind optional package feature switches as with the rust crate. these integrations will also allow us to put some more flashy examples in the readme.

  • 5

    refactor: move flavours into enum

    fixes #22

    Notes:

    • Palettes used in the Flavour::palette impl could be extracted into private items in separate files
    • This is a breaking change, so the major version number will need to be incremented before release
  • 6

    refactor: Move base above mantle

    The ordering should be consistent across all the palettes. While it does not matter for this repository, for people copying and pasting values, it can be confusing if ordering matters

  • 7

    npm package: hybrid cjs+esm support

    Hi there! 👋

    I noticed that the npm package only supports import, so I added support for require() . This PR adds esbuild as a devDep to build both formats; please let me know if you'd prefer a different solution.

  • 8

    New Palette formats for Aseprite and Krita

    I added native palette files for Krita and Aseprite (Aseprite's palette also works in LibreSprite)

    I also added a palette swatch as somewhat of a stopgap measure for image editors that aren't officially supported

  • 9

    [Rust]: Move the into_iter methods into proper IntoIterator implementations

    This allows for directly iterating over the types with a for loop, rather than manually needing to call into_iter() std::iter::IntoIterator trait documentation in the std library

  • 10

    [Rust]: Naming of the Palette type

    Right now we use Palette to refer to colours of each flavours, which after some discussion in the Discord, we ended up with the conclusion that this is the wrong name, as palette usually is used to refer to all 4 flavours as a whole.

    The new naming we ended up with is changing Palette to FlavourColours

  • 11

    Rust: Flavours as enum variants

    Motivation

    I want to pattern match on the current flavour.

    // Fix latte colours
    if matches!(flavour, Latte) {
    	...
    }
    

    Proposed solution

    pub enum Flavour {
    	Latte,
    	...
    }
    
    impl Flavour {
    	pub fn name(&self) -> &'static str { ... }
    
    	pub fn palette(&self) -> Palette { ... }
    	// OR
    	pub fn rosewater(&self) -> Colour { ... }
    	pub fn flamingo(&self) -> Colour { ... }
    	pub fn pink(&self) -> Colour { ... }
    	...
    }
    
  • 12

    feat: add raw value for use in css and update css palette

    I noticed that some colors in the css color palette are outdated (example: latte rosewater is #dc8a78 according to the README on the main repo but is #de9584 in the current CSS.

    I also added a raw value in the CSS which makes it easier to eg. modify the opacity of the color like so:

    element {
       color: rgba(var(--ctp-mocha-teal-raw), 0.5);
    }
    

    This does not work with hex, rgb or hsl colors but defining them as a custom value like the raw value I added makes this possible.