## Available formats
- Development
- [Node Package](#node-package)
- [CSS](#css)
- [Sass](#sass)
- [Tailwind CSS](https://github.com/catppuccin/tailwindcss) (separate repository)
- Design
- [Affinity](#affinity)
- [Aseprite / LibreSprite](#aseprite)
- [Gimp](#gimp)
- [Inkscape](#inkscape)
- [Krita](#krita)
- Colour pickers
- [macOS Color Picker](#macos-color-picker)
- [Sip](#sip)
- Reference
- [PNG](#png)
## Usage
### Node Package
```bash
# npm
npm install @catppuccin/palette
# yarn
yarn add @catppuccin/palette
```
Example: `test.js`
```js
import {variants, labels} from '@catppuccin/palette'
console.log(variants.latte.lavender.hex) // #7287FD
console.log(labels.base.macchiato.hex) // #24273A
```
### CSS
Import the palettes:
```css
/* directly from the file */
@import "@catppuccin/palette/style"
/* or using unpkg.com */
@import url('https://unpkg.com/@catppuccin/palette@0.1.4/css/catppuccin.css');
```
Then use them:
```css
body {
color: var(--ctp-mocha-text);
background: var(--ctp-frappe-base);
}
```
### Sass
The usage instructions for Sass are documented [here](https://github.com/catppuccin/palette/tree/main/scss), in the `scss` folder.
### Affinity
1. Clone this repository locally
2. Open a file in the `afpalette` folder. If you have multiple Affinity products
installed, you can choose to import it as a System palette
### Aseprite / LibreSprite
1. Clone this repository locally
2. Open Palette Options
3. Select "Load Palette" from the menu
4. Open a file in `gpl/` in the dialog that appears
### 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 the files in `gpl/` to this folder
### 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 the files in `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 a file in `gpl/` in the dialog that appears
### macOS Color Picker
1. Clone this repository locally
2. `cd` into the repo directory
3. Run the following command in terminal, to copy the files into the library:
```bash
cp -r clr/* ~/Library/Colors
```
### Sip
1. Clone this repository locally
2. Open the `sip/` folder
3. Open the `.palette` files, and Sip will import the palettes
## 💝 Thanks to
- [Gingeh](https://github.com/gingeh)
- [TheExistingOne](https://github.com/TheExistingOne)
- [Andreas Grafen](https://github.com/andreasgrafen)
- [Pocco81](https://github.com/Pocco81)
- [winston](https://github.com/nekowinston)
Catppuccin Palettes
