@rose-pine/palette

Color palette tool for Rosé Pine


Keywords
colors, theme, palette, soho-vibes, rose-pine, color, css
License
MIT
Install
npm install @rose-pine/palette@3.0.1

Documentation

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/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