All natural pine, faux fur and a bit of soho vibes for the classy minimalist
Color palette tool for Rosé Pine
Media
See
dist/css/rose-pine-media{-rgb,-hsl}.css
Useful for light/dark theming. Values follow the user's system theme, using the dawn variant when light and main variant when dark. Moon values can be uncommented and used instead.
Classes
See
dist/css/rose-pine-class{-rgb,-hsl}.css
Useful for theming with more than two options. Values are set based on a
wrapping class of .theme-rp{-moon,-dawn}.
body {
color: var(--rp-text);
background: var(--rp-base);
}Static
See
dist/css/rose-pine{-rgb,-hsl}.css
Useful when flexibility is desired. Values include their variant's name for moon and dawn, allowing all variants to be individually referenced.
.link-main {
color: var(--rp-iris);
}
.link-moon {
color: var(--rp-moon-iris);
}
.link-dawn {
color: var(--rp-dawn-iris);
}Preset configuration
See
dist/tailwind/rose-pine{-media}.js
// tailwind.config.js
module.exports = {
presets: [require("./rose-pine.js")],
};If using rose-pine-media.js, see the section below to include the necessary
CSS variables.
CSS variables
See
dist/css/rose-pine-media-tailwind.css
This method sets CSS variables to raw HSL values to support alpha values in
classes, e.g. bg-rose/50.
Starting with v4, colour values are unformatted. Formatted values can be found
in our dist folder. For creating new themes, it is recommended to use our
build tool.
import {variants, roles} from "@rose-pine/palette";
variants.moon.colors.highlightLow.hsl
// => [245, 22, 20]
variants.moon.colors.highlightLow.alpha.hsl
// => [249, 14%, 55%, 0.08]
variants.main.id
// => rose-pine
variants.moon.key
// => moon
variants.dawn.name
// => Rosé Pine Dawn
roles.base.colors.main.hex
// => '191724'
roles.surface.colors.dawn.rgb
// => [255, 250, 243]
roles.highlightLow.id
// => highlight-low
roles.highlightMed.key
// => highlightMed
roles.highlightHigh.name
// => Highlight HighRosé Pine includes three variants. These are referenced as Rosé Pine, Rosé Pine Moon, and Rosé Pine Dawn. Their codenames are main, moon, and dawn respectively. Naming does not include "main" unless necessary. When used as file names, prefer snake-case. E.g. rose-pine, rose-pine-moon, and rose-pine-dawn.
Neutral
| Role | Description | Usage |
|---|---|---|
base |
Primary background | inactive tabs, sidebars |
surface |
Low contrast background atop base |
text inputs, panels |
overlay |
Medium contrast background atop surface |
text inputs, panels, active tabs |
muted |
Low contrast foreground | comments, git ignored |
subtle |
Medium contrast foreground | non-selected results, inactive tabs, punctuation, operators |
text |
High contrast foreground | cursor text, selected results, selection foreground (paired with highlightMed background), active tabs, variables |
highlightLow |
Low contrast highlight | cursor line |
highlightMed |
Medium contrast highlight | selection background (paired with text foreground) |
highlightHigh |
High contrast highlight | cursor background, borders |
Accent
| Role | Usage |
|---|---|
love |
terminal red, builtins, errors, git delete |
gold |
terminal yellow, strings, warnings |
rose |
terminal cyan, booleans, git change, git dirty, git text |
pine |
terminal green, functions, git rename |
foam |
terminal blue, object keys, info, git add |
iris |
terminal magenta, parameters, links, hints, git merge, git stage |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent