@rose-pine/palette

Rosé Pine Palette

All natural pine, faux fur and a bit of soho vibes for the classy minimalist

Color palette tool for Rosé Pine

This package allows for easy import of the colors in the official Rosé Pine palette.

Install

npm install @rose-pine/palette

Usage

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