a60914909c
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 |
||
---|---|---|
afpalette | ||
clr | ||
css | ||
gpl | ||
lib | ||
png | ||
scss | ||
sip | ||
.editorconfig | ||
.gitignore | ||
.npmrc | ||
LICENSE | ||
Makefile | ||
README.md | ||
builder.js | ||
esbuild.js | ||
index.d.ts | ||
index.js | ||
package.json | ||
palette.json | ||
test.js |
README.md
Catppuccin Palettes
Available formats
- Development
- Node Package
- CSS
- Sass
- Tailwind CSS (separate repository)
- Design
- Colour pickers
- Reference
Usage
Node Package
# npm
npm install @catppuccin/palette
# yarn
yarn add @catppuccin/palette
Example: test.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:
/* 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:
body {
color: var(--ctp-mocha-text);
background: var(--ctp-frappe-base);
}
Sass
The usage instructions for Sass are documented here, in the scss
folder.
Affinity
- Clone this repository locally
- 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
- Clone this repository locally
- Open Palette Options
- Select "Load Palette" from the menu
- Open a file in
gpl/
in the dialog that appears
Gimp
- Clone this repository locally
- Navigate to Edit > Preferences > Folders > Palettes in GIMP
- Select the folder with the 'x' and press "Show file location in the file manager" (the rightmost button)
- Copy the files in
gpl/
to this folder
Inkscape
- Clone this repository locally
- Navigate to Edit > Preferences > System > User palettes in Inkscape
- Press the "Open" button next to the folder path
- Copy the files in
gpl/
to this folder
Krita
- Clone this repository locally
- Navigate to Settings > Dockers > Palette in Krita
- Open the "Choose Palette" button in the bottom left corner of Palette docker
- Select "Import a new palette from file"
- Open a file in
gpl/
in the dialog that appears
macOS Color Picker
- Clone this repository locally
cd
into the repo directory- Run the following command in terminal, to copy the files into the library:
cp -r clr/* ~/Library/Colors
Sip
- Clone this repository locally
- Open the
sip/
folder - Open the
.palette
files, and Sip will import the palettes
💝 Thanks to
Copyright © 2021-present Catppuccin Org