Celebrate open source with us. Upstream is June 7, 2022.
Rosé Pine Palette
All natural pine, faux fur and a bit of soho vibes for the classy minimalist
Color palette tool for Rosé Pine
Install
npm install @rose-pine/paletteUsage
js
import {variants, roles} from '@rose-pine/palette'
roles.base.main.hex
// => '#191724'
roles.surface.dawn.rgb
// => 'rgb(255, 250, 243)'
variants.moon.highlightLow.hsl
// => 'hsl(245, 22%, 20%)'
variants.moon.highlightLow.alpha.hsl
// => 'hsla(249, 14%, 55%, 0.08)'css
@import url('https://unpkg.com/@rose-pine/palette@3.0.1/css/rose-pine.css');
body {
color: var(--rp-main-text);
background: var(--rp-main-base);
}Palette
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 |
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 |
